响应式布局

响应式网页的概念

百度百科 漫谈响应式设计

• 多设备
• 多浏览器宽度
• 横竖屏切换

我的理解：通过CSS3媒体查询，在某一宽度区间内显示固定“变化”布局，响应各种区间的布局方案。示例：微软 苹果

断点：区间的具体分界点

根据场景、设备选择常见的断点，如320px、360px、414px、640px、736px等

设备	屏幕实际显示宽高	渲染宽度
iPhone 5s	640 * 1136	320 * 568
某手机	1080 * 1920	360 * 640
iPhone 6 plus	1080 1920 ( 1242 2208)	414 * 736

示例： 百度 分辨率使用情况

某公司官网移动版：PC和PAD上显示PC固定布局，手机端才显示移动端响应式

/* 无论pc和手机都会显示响应式，不满足要求 （736px为iPhone6 plus横屏渲染宽度，但在pc上浏览器缩小到736px时也有效）*/
@media screen and (max-width: 736px) { }

 /*pc上也会显示给手机做的响应式，不满足要求 （添加设备宽）*/
@media screen and (max-width: 736px) and (max-device-width: 1920px) { }

 /* pc chrome浏览器拖动宽高为400*800时(max-width: 414px) and (orientation:portrait)有效，不符合要求；
再拖动宽高为600*500时，screen and (max-width: 736px) and (orientation:landscape)有效，不符合要求。 */
@media screen and (max-width: 414px) and (orientation:portrait), screen and (max-width: 736px) and (orientation:landscape) { }

/* 加上更加严格的横竖屏状态  portrait竖屏 —— landscape横屏 */
@media screen and (max-width: 414px) and (max-device-width: 1080px) and (orientation:portrait),
       screen and (max-width: 736px) and (max-device-width: 1920px) and (orientation:landscape) { }

bug出现在 -- MacBook pro(1280 800 2倍屏)和公司台式机(1920 1200)都符合小于1920设备宽的要去，那么735 * 734以下（宽比高的数值更大，符合横屏条件）就会显示响应式，但这个就属于比较小

/* 最后一版，bug出现 MacBook pro(1280 * 800 2倍屏上*/
@media screen and (max-width: 736px) and (max-device-width: 736px),
screen and (max-width: 736px) and (-webkit-min-device-pixel-ratio: 2.0)  { }

断点的另一种理解：特定的浏览器宽度下，页面元素出现效果不佳时添加断点。微软

下方的这个适配不是很好。

/* → 1列 */     @media screen and (max-width: 539px){ }
/* → 2列 */     @media screen and (max-width: 992px) and (min-width: 540px) { }
/* → 4列 */     @media screen and (min-width: 992px) { }

快速审查

问题1：屏幕变宽，页面中可能会出现过多空白区域。应当调节元素宽度或者设置其他方式自动来补充页面留白.

示例： 互联网分析沙龙

此处有两张图

长标题，可以单行截取。示例：51CTO

a {
    display: block;
    word-wrap: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

问题2：写死高度可能使内容超出模块范围，出现截取或者错版的问题。

屏幕宽度变化时，如从360px到320px时。PS：在UC上float有bug 图片

.am-list-news-hd h2 {
    font-size: 1.6rem;
    float: left;
    margin: 0;
    height: 2rem;
    line-height: 2rem;
}

/* 导致uc上float不正常的原因 示例:float.html*/
text-rendering: optimizeLegibility;

问题3：浮动容易导致错版。

.col-a .area > a {
    width: 80px;
    overflow: hidden;
    float: left;
    margin-right: 5px;
}


.col-a .area {
  padding: 5px 10px;
  border-bottom: 1px dashed #bfbfbf;
  overflow: hidden;
}

问题5：按钮、图片使用一致的对齐方式。

竖屏看起来像水平居中，那么横屏时也要是水平居中的。

奇思淫巧

NO1: 基于表格布局的垂直居中。

1、高度一致；2：轻松实现垂直居中

此处有一张图片

<div class="list">
    <div class="line">
        <div class="pic"></div>
        <div class="title"></div>
    </div>
    <div class="line">
        <div class="pic"></div>
        <div class="title"></div>
    </div>
</div>

list {
    display: table;
}
.line {
    display:table-row;
}
.pic, .title {
    display:table-cell;vertical-align: middle;
}
.pic {
    /*左边固定宽度，右边宽度自适应*/
    width: 120px;
}

NO2: 计算间距

• 情况一：看几倍图，看font-size，看line-height，看padding和margin。
• 情况二：缩放式，间距也应当设置成百分比形式的
• 情况三：360px到320px可能导致换行，此时行距也会导致间距，应适时改变间距设置

NO3: 手机上 1PX 边框

1像素边框，在2倍屏幕上为2“占位”，3倍屏上为3“占位”，但设计师就要1“占位”

.content h1:after,
.content h2:after {
    border-top: 1px solid #bfbfbf;
    content: ' ';
    display: block;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    -webkit-transform-origin: left bottom;
}
/* Retina 适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 三倍屏 适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
    .content h1:after,
    .content h2:after {
        -webkit-transform: scaleY(0.33333334);
        transform: scaleY(0.33333334);
    }
}

字体 我是这么认为的~

px em rem 三者的区别

不建议使用小于12px的字体，因为在安卓chrome上不支持

知名互联网公司 移动端字体大小

类型	基准字体	字体区间
国外官网类	18~16px	大字体 ≈30px 标题字体 22px~18px正文字体 18~14px底部最小字体 14~12px
网购类	14~12px	标题 16px正文 14~12px底部最小字体 12px
国内媒体类	16px	标题 22px~18px正文 18~16px附加信息 12px底部最小字体 12px

行高为 1.3、1.35、1.45、1.5

表单区域

搜索区域内的输入框和搜索按钮在横竖屏切换占满整个屏幕，并且UI显示效果一致。

示例: search-input.html 此乃右边固定、左边自适应的写法之一

布局类的表单样式在苹果、安卓手机显示效果要一致。

 /* 修复代码 */
input {
    outline: none; //清除input外边框
    -webkit-appearance: none; // 清除iPhone上默认的样式，如圆角（待确认）
}
/* 保证安卓手机和苹果手机样式一致 */
.inputtext{
    display: block;  //变成块元素消除默认的上下外边距 某些时候有用
    width: 100%; //特定的时候用
    height: 30px; //严格要求的时候用
    //需要设置  `边距、边框、背景、圆角、行高`
    padding: 0;
    background: #e1e1e1; //背景颜色不一致？
    border-radius: 5px 0 0 5px; // 圆角矩形也必须写出
    border: none;
    line-height: 30px; //与高度保持一致
 }