利用REM实现移动端布局的高效适配技巧

使用rem适配已经快一年了&＃xff0c;感觉还是不错的&＃xff0c;在这里记录一下。 ##1.原理 rem是一个相对单位&＃xff0c;相对的是根元素‘html’的字号。比如html的font-size:100px;那么1rem&＃61;100px&＃xff1b;html的font-size:120px;那么1rem&＃61;120px&＃xff1b;所以我们可以根据手机不同的尺寸&＃xff0c;设置不同的根元素字体&＃xff0c;来适应不同的屏幕。而且它兼容性好&＃xff0c;从安卓2.1就支持rem。

举个栗子&＃xff1a;

//在iPhone5下
html{font-size:100px;
}


//在iPhone6下
html{font-size:116px;
}


.box{width:1rem;//在iPhone5下&＃xff0c;width为100px;在iPhone6下,width为116px&＃xff0c;从而实现了大小屏的适配
}


##2.设置基准 我们依据什么来设置根目录的字号呢&＃xff1f;两种方案 ###2.1css媒体查询宽度设置断点 为什么是宽度&＃xff1f;因为垂直方向的可以出滚动条&＃xff0c;而水平方向出现滚动条就有点怪怪的了。

&＃64;charset "utf-8";
//iphone5
&＃64;media screen and (max-width: 374px){html{font-size: 85px;}
}
//iphone6
&＃64;media screen and (min-width: 375px)and(max-width: 413px){html{font-size: 100px;}
}
//iphone6 p标准模式
&＃64;media screen and (min-width: 414px){html{font-size: 110px;}
}


###2.2js查询计算宽高变化比 这种方案是查询设备的宽高并计算出宽高的变化比&＃xff08;相对于你的基准尺寸&＃xff09;&＃xff0c;使用变化小的那个比值来设置根元素字号。

!function() {var count &＃61; 0;/*# 按照宽高比例设定html字体.- baseWidth和baseHeiht是设计稿尺寸- baseFontSize是720设计稿下html的fontsize- 按照当前屏幕宽高比跟设计稿宽高比较小的值作为缩放比例*/function setHtmlFontSize(callback) {var baseWidth &＃61; 720, baseHeiht &＃61; 1280, baseFontSize &＃61; 22.5, newSize &＃61; 22.5,sacle &＃61; 1;//如果此时屏幕宽度不准确&＃xff0c;就尝试再次获取分辨率&＃xff0c;只尝试10次&＃xff0c;否则使用innerWidth计算if(document.body.clientWidth !&＃61;&＃61; window.innerWidth && count <10) {document.body.style.display &＃61; "none";window.setTimeout(setHtmlFontSize, 0);count&＃43;&＃43;;} else {var sacle &＃61; Math.min(window.innerWidth / baseWidth, window.innerHeight / baseHeiht),newSize &＃61; parseInt( sacle * 10000 * baseFontSize ) / 10000;document.body.style.display &＃61; "none";setTimeout(function() {document.body.style.display &＃61; "";if(callback) {callback();}document.documentElement.style.fontSize &＃61; newSize &＃43; "px";}, 0);}}setHtmlFontSize();
}();


我目前采用的就是css方案&＃xff0c;为什么放弃了js这种看起来更人性化的方案&＃xff0c;是因为在测试的时候发现&＃xff0c;有些低版本手机的某些浏览器下面会出现bug&＃xff0c;它会先渲染一个没有计算过页面&＃xff0c;然后再渲染成对的尺寸。反之css效率则很高。而且安卓尺寸千千万万&＃xff0c;就不宠你&＃xff0c;不宠你。其实是它们坑死我们~~

##3.小技巧 ###1.100px 我在写代码时并没有用px转rem插件&＃xff0c;因为并不需要。技巧在于我们以1rem&＃61;100px为基准&＃xff0c;这样在写代码的时候&＃xff0c;我们只需要将px的值移动两位小数就好了&＃xff0c;这应该不用计算器把。。阿门 ###2.以小为标准 这里主要是指我们在用css媒体查询时&＃xff0c;两个端点之间的尺寸使用小屏幕的基准。比如位于iPhone6和iPhone5之间的尺寸&＃xff0c;使用iPhone5的基准。因为小屏幕的东西放大屏幕肯定空间是够的&＃xff0c;但是反之则不一定。因为有时候会写一些笨笨的代码。。。举个例子&＃xff1a; 笨的写法就是按照宽度写罗&＃xff0c;分别指定三个元素的宽度罗。哈哈&＃xff0c;我还是比较喜欢flex。

##4.k e n g坑 之前带给我的烦恼就是雪碧图使用起来就不爽了&＃xff0c;不过现在我们把中小图标全部使用图标字体替换了&＃xff0c;也就ok了。雪碧图使用有哪些不爽呢&＃xff1f;

• 图片之间的留白要尽量大一点&＃xff0c;要不然就会露出旁边的图片
• 不同尺寸手机下会出现图片位置稍稍的错位&＃xff0c;对于小图标而言&＃xff0c;就非常明显了。 不使用雪碧图也有一个坑&＃xff1a;

.box{width:1rem;height:1rem;background-size:100% 100%;//对滴background-size:1rem 1rem;//不对滴
}


background-size请使用100%,100%,而不是1rem,1rem,这种&＃xff0c;因为在浏览器渲染时&＃xff0c;我们的rem转化成px之后&＃xff0c;是会有很多小数位的&＃xff0c;浏览器对width、height的精确度和background-size的精确度是不一样的&＃xff0c;非雪碧图&＃xff0c;我们一般死不留白的&＃xff0c;就会导致有一点点错位。

##5.字号需要使用rem吗 html的字号是用来布局用的&＃xff0c;这里的字号是指整个页面的文字字号&＃xff0c;设置在body中&＃xff0c;其他元素继承。

我是不赞成在大屏手机下字号要变大的&＃xff0c;会给人一种老人机的感觉。而且其他app还有网页都是使用的正常字号&＃xff0c;你偏偏要给加大几个号&＃xff0c;不好。

如果&＃xff0c;如果&＃xff0c;如果你硬是要加大&＃xff0c;我教你一个简单方法&＃xff0c;你千万别去一个个的改。使用sass中的变量&＃xff0c;这样你就只要在媒体查询中修改一个变量的值&＃xff0c;而不用每个元素每个元素去改了。后面我会写一个文章介绍sass的这个用处&＃xff0c;这里不宜再发散了。我怕我止不住。

##6.结合em em&＃xff1a;和rem一样&＃xff0c;它是一个相对单位&＃xff0c;但是它相对的是自身字号。

为什么需要结合em呢&＃xff1f;

以前我们以640为基准时是没有必要使用这个单位&＃xff0c;但是现在我们是以750为基准&＃xff0c;我们就需要这个单位了。看看下面的例子&＃xff0c;你就明白了。

表单的label’单位电话‘&＃xff0c;如果在750下&＃xff0c;它为1rem(这个值是随便指定的)&＃xff0c;它刚好可以容纳四个字&＃xff0c;且两边有稍许留白。在我们切到640的时候&＃xff0c;它的宽度变小了&＃xff0c;但是我们的字号没有变化&＃xff0c;就会出现不够容纳四个字的情况。因此我们这里使用em加rem定义&＃xff1a;

.label-tel{width:4em;padding:0 0.05rem;
}