微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

REM : Web App适配的秘密武器

2016-06-29 20:12 伯乐专栏\/昱见

(点击上方公众号,可快速关注)

作者:伯乐在线专栏作者 - 昱见

链接:http://web.jobbole.com/86405/

点击 → 了解如何加入专栏作者

最近看到这样一个提问:


我有一个750 x 1500尺寸的设计稿,设计稿上有一个150 x 50的按钮,那么在写页面布局的时候,应该如何确定按钮的尺寸呢?


大多数同学在回答的时候提到了rem。


于是问题来了,rem到底是什么?rem是为了解决什么问题而存在的?rem能够给我们带来什么样的便利?带着这样的问题,我去学习了很多rem的文章,然后刚好工作中有一个移动端页面的需求要做,就尝试使用rem完成了一个小小的页面适配。大家可以点击这里,查看rem适配demo(http://yangbo5207.github.io/static/pages/hk-market-pay/)


建议大家在chrome的device module下打开,通过切换不同手机的模拟器来查看不同尺寸下的区别。


REM是什么?


rem是一个相对于根元素字体大小的css单位。与px一样,他可以用来设置字体大小,也可以用来设置长度单位。相对于根元素字体大小是什么意思?举个栗子。在页面中,html元素是根元素,因此我们首先给html设置一个字体大小


html { font-size: 100px; }


于是,在整个页面中,就有这样的换算公式 : 1rem = 100px


所以如果一个按钮,有如下的css样式,就等同于他的宽为100px,高50px.


.btn { width: 1rem; height: 0.5rem; }


好像这就是rem所有的真相了。 !!!什么?这就完了?这和px有什么区别?对啊,这和px本来就没有特别的区别,不就是一个度量单位嘛!所以提问的那个同学拿着750×1500设计图来问,150×50的按钮应该在页面里面写什么尺寸,用px就应该写 75×25,用rem就是 0.75 x 0.25.


rem是为了解决什么问题而存在的?


以iphone各种手机的尺寸来说,iPhone4,5 宽度320px,iPhone6 375px,iPhone6 plus 414px. 如果一个按钮,固定一个75×25的尺寸,那么就必然会导致在不同尺寸下的相对大小不一样。这带来的问题就在于会直接影响到设计的美观,可能在iPhone6下,一个完美的设计图,到了iPhone5,就变得low很多。 因为,为了让页面元素的尺寸能够在设备宽度变化的时候也跟着变化,rem就出现了。


我们已经知道,rem的相对大小跟html元素的字体大小有关系。使用rem适配的原理就是我们只需要在设备宽度大小变化的时候,调整html的字体大小,那么页面上所有使用rem单位的元素都会相应的变化。 这也是rem与px最大的区别。


有css与js两种方式来调整html元素大小的值。


css方式


html { font-size: calc(100vw / 3.75) }


100vw表示设备宽度,除以3.75这里是以iphone6 的宽度375px为标准,为了保证html的字体大小为100px。这样我们在换算的时候,1px 就是0.01rem,就很容易计算。


因为chrome下最小字体大小为12px,所以不能把html的font-size设置成1px或者10px,100px是我们最好的选择。


js方式, 原理与css一样,不过为了避免在一些老旧一点的手机浏览器上不支持calc,vm这些属性,在实际应用中使用js是最好的。


document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';

$(window).on('resize', function() {

   document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';

})


需要注意的地方


一、rem的适用性很有局限,仅仅只能够用于只在移动端展示的页面。如果你的页面还需要适配到pc端,那么就老老实实的使用px吧。


二、自己只是用来放在移动端的页面,别人却在pc上打开了,因此可以设置一个html的最大宽度与最小宽度。580px就是手机上浏览器的最大宽度。


html {

   max-width: 580px;

   min-height: 320px;

}


三、有的同学可能对web的适配有点误解。web中做适配并不需要考虑什么物理像素啊,dpi等等概念。这些应该仅仅只是Android或者ios原生app才会考虑的问题。这些误会导致许多搞设计的同学在给web app做设计的时候,也丢一张1080 x 1920 的设计稿过来,真是愁死人了。


那么回到这个问题中来,设计稿是750×1500的应该怎么办?其实这个还好,750刚好就是375的2倍,iPhone6的宽度。因此量出来的尺寸直接除以2就行了。如果是1080×1920等很大很大的尺寸呢?1.首先保存整张设计稿.jpg 2.新建一个psd,宽度375px,高度1000px(高度可以高一点,无所谓) 3.将保存的设计稿.jpg丢进去。这样量出来的页面元素的尺寸,就是你需要的尺寸。


ps:最好的方法,就是让设计师用sketch出设计稿。

专栏作者简介 ( 点击 → 加入专栏作者 


昱见:平时会将自己学习总结在我的公众号isreact上分享,欢迎大家搜索关注!

打赏支持作者写出更多好文章,谢谢!



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!


 
前端大全 更多文章 前端工程师面试题汇总 那些年,我们追过的经典前端技术书 44 个 Javascript 变态题解析 (上) 不容错过的 10 篇前端技术热文 44个 Javascript 变态题解析 (下)
猜您喜欢 在浏览器中快速探测IP端口是否开放 Vysor——用电脑操作你的 Android 手机 再谈「搜索已死,推荐上位」 升级.Net Core RC1的类库项目 AndFix简单使用教程