博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
手机移动端 用 rem 作单位时要注意的问题
阅读量:6815 次
发布时间:2019-06-26

本文共 954 字,大约阅读时间需要 3 分钟。

rem是什么意思呢?CSS手册上的说明:相对长度单位,相对于根元素(即html元素)font-size计算值的倍数。

rem用法很简单,就是根标签html设置文字大小后(不设置的话,大部份浏览器默认为16px),其他标签设置rem都是html大小的倍数。

html{    font-size: 10px; /* 设置html为10px */}h1{    font-size: 2rem; /* 10px*2=20px */}

PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧。目前大部份设备,包括但不限于iOS 5+、Android 2.3+、Window Phone 8+ 都是可以兼容的。

那为什么移动端要使用em作为单位?一是我开始提到的,移动端大部份都支持,不需要考虑兼容问题;二是修改起来灵活。如果你要整个网页字体都变大两倍,直接修改html{font-size:20px}即可。当然还有人提到适合网页缩放,我从未用过这个功能。。。

你肯定会说,百度Google搜出来的文章,大部份是让设置为html{font-size:62.5%}。他的作用也是把html设置成10px,但万一哪个浏览器2b升级成默认文字大小不是16px怎么办?而且可以直接设置成10px,为什么要去用62.5%算成10px?这不是脱裤子放屁吗?所以我都是直接设置10px。

手机移动端 用 rem 作单位时要注意的问题

1:例如reset里并没有设置 网站中的文字字号,所以我会在body里直接写font-size:1.2rem,让整个网页字号为12px。但在Android的Chrome里无效,还是按照16px来计算而不是我手动设置10px计算。所以要想给整个网页设置默认字号,最粗暴的办法就是直接在body里设置em或者px字号,例如body{font-size:1.2em}或者12px,推荐em。body直接继承html的字号,可以间接实现rem的功能。然后其他地方用rem是没问题的。

2:因为Chrome设置了最小字号为12px,导致如果在宽高、行高、边距等地方用rem,虽然在html那设置了10px,但默认还是会按照12px来计算,所以实际会偏大。建议rem只是在字号上用比较好。

转载地址:http://nvdzl.baihongyu.com/

你可能感兴趣的文章
CCNA第3次课程
查看>>
Gson详解:Java对象与JSON相互转换的利器
查看>>
U-mail邮件系统又一getshell
查看>>
Spring Boot 入门
查看>>
路由交换调试(CCNA)零基础到专家 二
查看>>
我的友情链接
查看>>
.Net组件程序设计之序列化
查看>>
Web Api 的 路由机制
查看>>
Java编程规则
查看>>
java学习路线图-----java基础学习路线图(J2SE学习路线图)
查看>>
js对象属性两种调用bug
查看>>
spark启动简单脚本
查看>>
centos6.5中安装htop进程管理监控工具
查看>>
juniper基本配置命令 自用
查看>>
hadoop学习笔记之--- HDFS原理学习
查看>>
ThinkPHP 学习笔记(四) ThinkPHP的配置
查看>>
win32 UNICODE 支持
查看>>
MySQL+DRBD+Corosync+Pacemaker CentOS6.5版
查看>>
在CentOS 6.5上安装和配Xen
查看>>
重载类的 new,delete,new[],delete[] 运算符成员函数
查看>>