从PC到移动端，我踩过的坑
响应式布局
响应式网页的概念
- 多设备
- 多浏览器宽度
- 横竖屏切换
我的理解：通过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