rem做移动端适配已经得到广大web开发都的喜爱。其实,简单的做rem非常容易。只需要三处引入即可。
html处引入
meta处做适配声明:
<!-- 名字:视口;内容:宽=设备宽,初始缩放比例=1.0,用户缩放=不,最大缩放比例=1.0--!>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"
/>
<!-- x5(也就是在微信上)满屏,其他浏览器也满屏 --!>
<meta name="x5-fullscreen" content="true" />
<meta name="full-screen" content="yes" />
script引入
在这里我作为除以10的处理,当然也可改为你觉得方便计算的值。
<script>
document.getElementsByTagName('html')[0].style.fontSize =
(document.documentElement.clientWidth || document.body.clientWidth) / 10 + 'px';
</script>
<!-- 其中,document.documentElement.clientWidth返回的是html元素 -->
编辑器引入一个px转换rem的插件
我用的是vscode,在插件入搜素px2rem,安装第一个就可以了。
因为插件默认的html字体大小(root font size)设为16px,由于我用的设计稿都是iphone6的尺寸,所以在这里改为37.5
- 注意:这里是以你引入的script所作的系数来转换的。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。