俄罗斯贵宾会-俄罗斯贵宾会官网
做最好的网站

REM : Web App适配的秘密武器

REM : Web App适配的秘密武器

2016/06/19 · 基础技术 · 2 评论 · rem, 适配

本文作者: 伯乐在线 - 昱见 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者

最近看到这样一个提问:

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

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

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

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

问题: 设计师给了一个适配iphone6 plus的设计图。做好页面之后适配iphone4、5、6很困难,这个间距调好了,那个又不好了。很纠结也很苦恼。最开始的办法是用css3的media来查询,然后设置相应的值。这样的做法也不是很好。毕竟屏幕尺寸太多,根本适配不过来。有没有一种方法可以随着屏幕大小而变化呢?

REM是什么?

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

CSS

html { font-size: 100px; }

1
html { font-size: 100px; }

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

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

CSS

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

1
.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方式

CSS

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

1
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是最好的。

JavaScript

document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px'; $(window).on('resize', function() { document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px'; })

1
2
3
4
document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
$(window).on('resize', function() {
   document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})

在移动端可以做到适配不同的手机分辨率,如果保持整体缩放,没有设计上的差异可以不需要用到`media query`”

需要注意的地方

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

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

CSS

html { max-width: 580px; min-height: 320px; }

1
2
3
4
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关注我!

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

打赏作者

假设设计师的视觉稿是按照iPhone6的宽度来设计的,即375px (如果是高清的视觉稿750/2=375)

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

任选一种支付方式

俄罗斯贵宾会 1 俄罗斯贵宾会 2

1 赞 5 收藏 2 评论

那么,我们可以完全按照视觉稿上的尺寸来赋值给元素的样式,比如视觉稿上的尺寸是80px,那么在css中就可以直接定义width:80px;  页面中所有的尺寸都这样来设置。

俄罗斯贵宾会,关于作者:昱见

俄罗斯贵宾会 3

平时会将自己学习总结在我的公众号isreact上分享,欢迎大家搜索关注! 个人主页 · 我的文章 · 15 ·    

俄罗斯贵宾会 4

当所有的网站所有的页面样式都设置好之后。

我们需要做两件事情:

```css

html {

font-size: calc(100vw/3.75);  (vw是css3的一个单位,相对于视口的宽度,视口被均分为100单位的vw)

}

```

100vw是设备的宽度,除以3.75可以让1rem的大小在iPhone6下等于100px

2. 替换页面中的单位,把所有的px单位替换成rem,除以100,比如前面的80px,就是0.8rem

本文由俄罗斯贵宾会发布于Web前端,转载请注明出处:REM : Web App适配的秘密武器

您可能还会对下面的文章感兴趣: