从PC Web到移动 Web，我踩过的坑
我在《响应式Web设计——断点设计》一文中简单阐述了我对断点的理解及运用。
Link to this heading问题1：屏幕变宽，页面中可能会出现过多空白区域。应当调节元素宽度或者设置其他方式自动来补充页面留白.
示例： 互联网分析沙龙
此处有两张图
长标题，可以单行截取。示例：51CTO
Link to this heading问题2：写死高度可能使内容超出模块范围，出现截取或者错版的问题。
屏幕宽度变化时，如从360px到320px时。PS：在UC上float有bug
图片
Link to this heading问题3：浮动容易导致错版。
Link to this heading问题5：按钮、图片使用一致的对齐方式。
竖屏看起来像水平居中，那么横屏时也要是水平居中的。
Link to this headingNO1: 基于表格布局的垂直居中。
1、高度一致；2：轻松实现垂直居中
此处有一张图片
Link to this headingNO2: 计算间距
- 情况一：看几倍图，看font-size，看line-height，看padding和margin。
- 情况二：缩放式，间距也应当设置成百分比形式的
- 情况三：360px到320px可能导致换行，此时行距也会导致间距，应适时改变间距设置
Link to this headingNO3: 手机上 1PX 边框
1像素边框，在2倍屏幕上为2“占位”，3倍屏上为3“占位”，但设计师就要1“占位”
Link to this heading字体 我是这么认为的~
不建议使用小于12px的字体，因为在安卓chrome上不支持
Link to this heading知名互联网公司 移动端字体大小
| 类型 | 基准字体 | 字体区间 |
|---|---|---|
| 国外官网类 | 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
Link to this heading搜索区域内的输入框和搜索按钮在横竖屏切换占满整个屏幕，并且UI显示效果一致。
示例: search-input.html 此乃右边固定、左边自适应的写法之一
Link to this heading布局类的表单样式在苹果、安卓手机显示效果要一致。
