最佳设计:可以让用户自由控制任何页面的文字大小。
浏览器中用户都是可以自定义默认的文字大小的,如果使用 px,用户自行在浏览器设置中改变了文字大小后,网页上是不会变化的。我们不能排除视障用户(如近视)、老年用户不会这么做.
利用CSS3的rem单位,避免了em相对父元素比例的嵌套问题,为了兼容IE低版本的需要添加px单位.
html { font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/ } body { font-size:14px; /*兼容IE*/ font-size: 1.4rem;/*1.4 × 10px = 14px */ } h1 { font-size:24px; /*兼容IE*/ font-size: 2.4rem;/*2.4 × 10px = 24px*/ }
既然 rem 的可用性更好,是不是在所有地方都去使用呢?
通常在标题,正文等大面积文字的位置可以使用 rem。
但是在一些特殊的设计场景,rem 可能会导致布局错位,比如这样一个回顶部的按钮:
可以看到”回顶部”三个字通过放大已经改变的样式,这是不希望看到的,这了最好只用px