移动端rem怎么用? 男娘i 2022-06-04 08:17 206阅读 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
还没有评论,来说两句吧...