移动端rem怎么用?

男娘i 2022-06-04 08:17 256阅读 0赞

简单说明下，一般字体有4种，px,pt,em,rem,这里简单介绍两个px和rem。

![Center][]

![Center 1][]

感觉菜鸟教程介绍的还是比较清晰的，可以去看看：[http://www.runoob.com/w3cnote/px-em-rem-different.html][http_www.runoob.com_w3cnote_px-em-rem-different.html]

在做移动端项目当中呢推荐大家使用rem来当单位，因为真的很方便，可以根据比例适配不同的屏幕大小。

使用rem的方式其实很简单，这里不得不向大家推荐下阿里巴巴团队提供的插件。

只需要三个步骤：

1.添加<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2.设置默认的：<meta name="flexible" content="initial-dpr=2" />

3.引入阿里的cdn：<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible\_css.js,flexible.js"></script>

下面是简单的例子，可以复制看看，用谷歌浏览器模拟移动端不同型号查看效果。

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="flexible" content="initial-dpr=2" /> <title>移动端字体适配</title> <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script> <style type="text/css"> *{ margin: 0; padding: 0; } .test2,.test3,.test4,.test5,.test6{ width: 4.9rem; height: 5rem; line-height: 5rem; font-size: 1rem; text-align: center; display: inline-block; } .test2{ background-color: orange; } .test3{ background-color: #0000FF; } .test4{ background-color: #FF0000; } .test5{ background-color: aqua; } </style> </head> <body> <div class="test2">111111</div> <div class="test3">222222</div> <div class="test4">333333</div> <div class="test5">444444</div> </body> </html>

效果是这样的：

![Center 2][]

![Center 3][]

细心地朋友已经看到了，在iphone5和iphone6的屏幕宽度下，html的size的大小是不同的，但是也有朋友会问，

body为什么都是12px呢？我之前也很疑惑，咨询了一位大牛后豁然开朗，怎么能没有默认全体字体大小呢？

如果没有默认大小的话，body就会继承html的大小。

这是我自己用rem写的一个移动端练习，模拟的手机淘宝，写的不是很好，可以看看：

[http://www.bright2017.top/test1/test1-08/][http_www.bright2017.top_test1_test1-08]

这里写的也很清楚，推荐大家去看看：[https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html][https_www.w3cplus.com_mobile_lib-flexible-for-html5-layout.html]

[Center]: /images/20220604/77e7188fd42245e2ae24d5af1a0f9831.png
[Center 1]: /images/20220604/479cff7b82414a8f84915f17f1d0a809.png
[http_www.runoob.com_w3cnote_px-em-rem-different.html]: http://www.runoob.com/w3cnote/px-em-rem-different.html
[Center 2]: /images/20220604/44bc29529f0b4c828dd095328dbfbf8e.png
[Center 3]: /images/20220604/fa512cd69c184ca193b66a81585b08fb.png
[http_www.bright2017.top_test1_test1-08]: http://www.bright2017.top/test1/test1-08/
[https_www.w3cplus.com_mobile_lib-flexible-for-html5-layout.html]: https://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html