用rem实现自适应

586 阅读2分钟

什么是rem

rem(font size of the root element)是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素,一个是依赖父元素计算。

rem强大的自适应特点

大部分页面在页面布局的时候都是通过百分比来定义宽度,但是高度大都是用px来固定住,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度还是和原来一样,实际显示非常的不协调,

这就是流式布局的最致命的缺点,往往只有几个尺寸的手机下看到的效果是令人满意的,其实很多视觉设计师应该无法接受这种效果,所以rem应运而生,它拥有强大的自适应特点,便于自适应页面。

实现rem设计的基本方案

1.首先以rem为单位进行设计

不要管是否适配,确定字号,然后进行量稿设计

2.然后通过媒体查询来进行适配

媒体查询拥有换算公式,可以通过换算进行适配。便于实现自适应。

媒体查询也有优缺点: 优点:比较灵活,可以进行不同的设备换算 缺点:需要对不同设备进行换算,过程繁琐

改良方案-通过Js+rem来进行设计

1.此方案与直接使用rem设计相似,首先以rem为单位设计

2.然后就是使用js进行匹配设计,代码量小

优缺点: 优点:代码量小,适配简单,理论上可以适配所有设备 缺点:换算非常单一,不能针对单独设备进行设计