响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流,让所有人无障碍的获取信息,同时这也是 Web 的初衷。
当我们每天面对缤纷的互联网世界的时候,文字不仅仅传递给我们众多的信息资讯,而且在设计师的手里,文字在网页中的排版承载着一种艺术的直觉。
网页中常用的文字大小单位是 px(Pixels),em,现在新增了 rem 这个单位。
一、那到底什么是 rem 呢?
规范中明确写道:
Equal to the computed value of ‘
font-size
’ on the root element.
「rem」是指根元素(root element,html)的字体大小,好开心的是,从遥远的 IE6 到版本帝 Chrome 他们都约好了,根元素默认的 font-size 都是 16px。这样一个新的单位兼容性如何呢?
太好了,IE9+,Firefox、Chrome、Safari、Opera 的主流版本都支持了,我可以放肆的使用 rem 了。
可是,W3C 那些家伙为什么要闲着下面疼的新增这样一个单位呢?它和 em 有啥区别呢?
我们知道 em 的计算是基于父级元素的,在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人,再也不用担心父级元素的 font-size 了,因为它始终是基于根元素(html) 的。
比如默认的 html font-size=16px,那么我想设置12px 的文字就是:12÷16=0.75(rem)
当然,你可以引入 CSS 预处理工具(Sass、LESS 、Stylus等)自动计算 rem 值,这里就不一一举例了。
但是像我这样的懒人或者团队开发中还没有引入 CSS 预处理工具的该肿么办呢?只能搬个计算器啪啪啪了吗?别急,你还可以变通一下。我们改变一下 html 的默认 font-size=10px 不就好计算了嘛!Like this:
html{font-size:62.5%; /* 10÷16=62.5% */} body{font-size:12px;font-size:1.2rem ; /* 12÷10=1.2 */} p{font-size:14px;font-size:1.4rem;}
需要注意的是,为了兼容不支持 rem 的浏览器,我们需要在 rem 前面写上对应的 px 值,这样不支持的浏览器可以优雅降级。其实不用太纠结是默认的 font-size:100%,还是设置为 font-size:62.5%,如果你引入了 CSS 预处理工具那么自然可以使用默认值,如果由于其他原因使用 font-size:62.5% 也无可厚非,完全可以在 body 中重置回你需要的默认 font-size。
二、为啥要用 rem 呢?
黑夜给了我黑色的眼睛,我将用它寻找关怀。
浏览器中用户都是可以自定义默认的文字大小的,如果使用 px,用户自行在浏览器设置中改变了文字大小后,网页上是不会变化的。我们不能排除视障用户(如近视)、老年用户不会这么做,作为一个具有「人文关怀」的前端,我们完全可以考虑这些情况。由其是在引入了 CSS预处理工具之后,这几乎不会增加什么成本。
也再次印证前面提到的:响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求。
三、什么时候用 rem?
既然 rem 的可用性更好,是不是在所有地方都去使用呢?别捉急,通常在标题,正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景,rem 可能会导致布局错位,比如这样一个回顶部的按钮:
所以,什么时候用 rem,如何用好 rem? 这也需要你拿出 18K的黑色乌金睛来照亮整个页面。让我们一起:
抛开布局,响应文字;抛开成见,响应内心。
相关推荐
移动端网页 rem响应式布局 最佳实践代码 WHAT IS IT 使用rem布局,屏幕越大,对应的“字体、图片、交互按钮”的大小也越大,同时大小能在用户旋转设备方向,或调整窗口大小(桌面端)时自动调整,如图: 使用经典的...
移动端响应式布局解决方案、用 JavaScript 根据屏幕宽度计算 Root 字体大小弥补媒体查询断点断层过大问题,元素单位使用 REM 即可基于 Root 字体大小来改变自身大小。
A Mobile-first type scale 将任何元素设置为任何断点所需的字体大小。 基类名称跨三个断点命名: -ns = 不小(涵盖所有比手机大的东西) -m = 中等 -l = 大 安装 npm install type.css --save-dev 或在 github ...
用于移动设备的rem响应式布局的代码片段,计算屏幕宽度并使用字体大小进行响应 用法 只需将这些代码片段插入到head标签中。 <!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> [removed] ;...
CSS3的rem属性除了设置字体大小,还经常被用来做页面布局中的很多尺寸控制,这里我们就来看一下使用CSS3的rem属性制作响应式页面布局的要点解析
REM用于字体大小,填充和边距。 可用作排版规范化器。 没有依赖关系。 用类.col包裹HTML内容,您就完成了。 npm安装 npm install typeboost.css 用法 <!DOCTYPE html > < ...
Typi帮助您在多个断点处编写字体大小和行高声明,而不会费力。 Typi可以帮助您计算垂直节奏,而无需您自己做数学。 这是两点的快速示例。 对于第1点: // Sass inputh1 { @include typi ( ' h1 ' ); } /* CSS ...
但这种方案也有一个缺点,那就是font-size不为整数的时候一些字体使用rem单位会导致字体显示的大小有问题,对视觉还原要求比较高的项目来说这还是令前端开发挺头疼的一件事的。 解决前端响应式无非就是在不同的设备...
在实现响应式布局的过程中,如何设置字体大小在不同的视窗尺寸以及不同的移动设备的可读性? 需要了解的有: 1.px,em,pt之间的换算关系1em = 16px1px = 1/16 em = 0.0625em ////以下用的比较少//////1em = 12pt1px = ...
最近开发微信小程序,在写样式表的时候发现用PX的...日常开发中,我们常用rem、em来做响应式布局的像素单位,他们都是相对单位。rem相对于文档的根元素,em相对于父元素。 那么问题来了,rpx到底是个啥?又该如何理解
统一请求处理,错误机制,加载机制封装组件启动项目毛线发球h5响应式方案个人电脑媒体查询flex,百分比初步布局移动端h5字体大小元素大小,布局元素边距,内填充rem + flex媒体查询+百分比+ flex 自由灵活rem布局...
通过JS来调整html的字体大小,而在页面中的制作稿则统一使用rem这个单位来制作。关键代码如下: ;(function(win, lib) { var doc = win.document; var docEl = doc.documentElement; var metaEl = doc....