移动端rem怎么用?

来源：互联网发布：pageoffice java word 编辑：程序博客网时间：2024/05/01 22:37

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

感觉菜鸟教程介绍的还是比较清晰的，可以去看看：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>

效果是这样的：

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

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

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

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

http://www.bright2017.top/test1/test1-08/

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

阅读全文

0 0