在面对丰富尺寸的移动端时,Iphone、安卓各种屏幕分辨率,智能手机品牌、机型如此众多的今天,各种不规则的分辨率,即使作为专业团队的我们切版网,也很难寻找到所有的真机一一去测试。

无论我怎么去调试,都会有比例上的不一样的问题。这就会导致不能很好的还原设计。

解决办法当然是有的,那就是使用REM!

首先让我们带您一起理解一下rem

rem是CSS3新增的一个相对单位(root em,根em),使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。

在iphone6上,我们设置了20px=1rem,但是在iphone4上,同样的1rem,就不应该是20px,而是应该大约17px(为(320/375)*20),这样才可以保证对应的1rem和原来的效果相似,否则,在iphone4就变得很大了。所以,在iphone4上我们要修改html的font-size=17px,可是还有Iphone5,iphone6 plus,还有无数的安卓机型呢?!

下面给大家详细介绍一下这两种方法:

第一种是使用媒体查询控制不同分辨率下的根原素大小。方法如下图,要根据项目的实际类型改变媒体查询的值。

第二种方法就是通过JavaScript动态获取屏幕的宽度,然后给HTML设置font-size的值。下面我给大家讲解一下这段JS代码。我主要以手机端为例。

前端开发怎么做移动端的适配值(移动端前端开发不可不知的)(1)

将这做代码打包到一个defineRemSize.js的文件中,在页面里引用。在用下面这这个方法调用。

前端开发怎么做移动端的适配值(移动端前端开发不可不知的)(2)

做完了这这些,我们有了可以自适应的rem的值,接下来我就说一下在实际使用中的一些心得。

Rem不仅可以用在字体大小单,包括容器宽度的值、高度的值、margin的值、padding的值都可以使用rem做为单位大小。实际上rem更像是聪明的百分比数值。如果页面所有远素的值都使用rem,整个面更像是一张图片。缩小时整体都会缩小,放大里整体都会放大。下面我给大家看一下我使用两种方法做的同一个页面的效果图。

前端开发怎么做移动端的适配值(移动端前端开发不可不知的)(3)

前端开发怎么做移动端的适配值(移动端前端开发不可不知的)(4)

能过对比,会发现,使用rem在不同分辨率的设备上整体比例是不变的。并且没有使用任何媒体查询方法。但是使用px %这种方法做出来的页面,在不同的页面上的元素的间距会发生改变,图片会随首设备宽度的变化而变化,但是文字大小以及元素的间距并没有发生变化。

由以上可以得出,在使用rem做为页面元素单位时,在适配时会更加简便,并且页面在不同尺寸的终端设备上页面整体比例不会改变。不需要我们再通过Media query 来适配不同的分辨率。并且做出来的页面会更加的接近设计图。

h5、响应式切图,找切版网( www.qieban.cn ),是国内较早专注网页切图服务的团体,由人均3年的前端开发者构成,坚持以高性价比的服务为宗旨,普通页平均80一页,拥有超过200多客户建立至今。超过1500多个项目。长期致力于致力于h5、响应式前端外包服务整体解决方案。

前端开发怎么做移动端的适配值(移动端前端开发不可不知的)(5)

,