移动端自适应布局----rem字体

我只是一个虾纸丫 提交于 2019-12-08 03:48:46

一.px,em,rem之间联系与区别

px:像素是相对于显示器屏幕分辨率而言的相对长度单位,不会受屏幕宽度改变

em:继承父级的font-size,与父级的字体大小有关

rem:是em的升级版,rem只会相对html的值,不会受到父级的影响。


二.移动端怎么用rem

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

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

1. 设置页面的rem大小
```css

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

或者(ipone6举例)

html{

font-size:26.67vw;

}

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

2. 替换页面中的单位,把所有的px单位替换成rem,除以100,比如前面的80px,就是0.8rem
这样在iPhone6下,所有元素的尺寸还是和视觉稿的尺寸一样,而iphone5中,因为设备的宽度变小了,100vw/3.75得到的值,会相应的变小,即rem的单位值会变小,页面中所有的尺寸会等比例缩放。

这样就可以做到针对任何分辨率的设备保持视觉一致了。
最后,前面用到vw单位,但是低版本的设备可能不支持,那么就需要js来处理一下:
```javascript

document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'

```

当然,rem也可以用在定宽高等


易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!