转载

rem : web app适配的秘密武器

最近看到这样一个提问: 我有一个750 x 1500尺寸的设计稿,设计稿上有一个150 x 50的按钮,那么在写页面布局的时候,应该如何确定按钮的尺寸呢? 。大多数同学在回答的时候提到了rem。这让我对rem这个单位充满了好奇。好吧,暂时不太熟。

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

建议大家在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还有一点点别的特性。

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出设计稿。

rem : web app适配的秘密武器

原文  http://hao.jser.com/archive/10500/
正文到此结束
Loading...