1.滚动条默认是在html上的，移到body上

html{ width: 100%; height: 100%; overflow: hidden; } body{ width: 100%; height: 100%; overflow: auto; }

2.高清屏1px边框还原

pixelRatio = 1 / window.devicePixelRatio; //通过js动态设置视口的缩放比 document.write('<meta content="width=device-width,initial-scale = '+pixelRatio
+ ',minimum-scale =' +pixelRatio+',maximum-scale='+pixelRatio+'" />');

3.使用单位

px绝对单位，任何情况下都是固定值，在不同尺寸的屏幕下会错位。

% 相对单位，相对于父级（自身）的大小进行计算。对于不太好确定值的地方（如高度）不好使用百分比，会导致变形。

em相对单位，相对于当前字体大小的倍数。如果容器字体大小不一样，一一修改很麻烦。

rem 相对单位，只相对于html（root元素）的字体大小，移动端浏览器都兼容，这种布局比较通用。

var html = document.getElementsByTagName('html')[0]; pageWidth = html.getBoundingClientRect().width; // 屏幕宽度 / 平分块数 = 基准值 html.style.fontSize = pageWidth / 16 + "px"; //然后计算容器的rem数值，这样不同的屏幕，容器布局结构不会变。（即将整个屏幕均等分，再计算容器的占比。） //开发css时，使用less定义@rem变量，不用每次都用计算器计算。

4.使用背景图或者img，要针对不同的屏幕调整对应的大小：

　　如果图片大小和容器大小一致，可以使用width:100%。

　　如果图片和容器大小不一样，那么需针对图片分别设置宽/高，背景图设置background-size(x baseRem,y baseRem)。

　　在物理像素和css像素不是1：1时，retina屏相当于放大，会添加中间色的像素，导致模糊。想要图片不模糊失真，需要针对retina屏的图片重新制作一张像素总数更多的图片。

5.文字要测量行高，再算padding（rem）

6.文字前插入小图标：

　　搜索框：div.search_box:before(图标)+form input(padding-left)

      a标签：a的background(图标)+text-indent(文字)

7.<link/>的media属性只是规定了只有复合条件的媒体样式表才会生效，但不符合条件的样式表依然会被下载到客户端。

8.移动端fixed定位的元素中有input时，触发键盘后会导致固定定位错位，可以使用绝对定位或者跳转到别的页面避免。

　　绝对定位会卡顿，需要用js解决，固定定位有兼容性问题

9.常用样式调整

a{ -webkit-tap-highlight-color:transparent; text-decoration:none; } input{ -webkit-apperance:none; }