使用 rem 设计网页

Posted webshare2020

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用 rem 设计网页相关的知识,希望对你有一定的参考价值。

rem 是根 em (root em)的缩写。rem 是和根元素关联的,不依赖当前元素。例如,不管你在文档什么地方使用这个单位,1.2rem 的计算值都是相等的,等于 1.2倍的根元素字号的大小。

1 如何声明根元素字号大小

对于设置根元素字号大小,这里提供两种方式,选择任意一种即可。

1.1 使用伪类

:root {
    font-size: 1em;
}

1.2 选择 html 元素

html 是顶层节点,html 就是我们需要设置的根元素。如下所示,使用标签选择器:

html {
    font-size: 1em;
}

或者是如果 html 元素有 id 或者 class 等属性,使用其他的选择器也是等同的。

总而言之,我们需要设置的是 html 元素的字体大小,选择的方式不限定。

2 使用原生 js 查看根元素字号

/* currentStyle 针对IE浏览器 */
function getStyle (obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[sttr];
    } else {
        return getComputedStyle(obj,false)[attr];
    }
}

var rem = getStyle(document.getElementsByTagName("html")[0], "font-size");
console.log("rem:", rem)

3 设计指南

3.1 停止使用像素去思考

我们很容易陷入这样一种思维方式,先把 rem 换算为 px 单位再去思考,其实大可不必,直接使用 rem 思考,不用转化为其他单位。让它成为一种习惯。

3.2 设置一个合理的字号默认值

直接设置 rem 为一个合理的字号默认值,可以省去很多重复的字体样式代码,而不是为了方便换算去设置 rem。

3.3 并非所有地方都使用 rem

rem 只是你工具箱中的一个,并非所有地方都使用 rem。当你不确定的时候,对 font-size 使用 rem,对 border 使用 px,以及对其他大多数属性使用 em。

3.4 使用媒体选择器

使用媒体选择器适配不同平台,可让你的网页看起来是响应式的。

3.5 浏览器默认字体大小参考

一般浏览器默认值是 16px。

以上是关于使用 rem 设计网页的主要内容,如果未能解决你的问题,请参考以下文章

根据设计稿,计算出网页REM的大小,有那么难吗?

HTML5期末大作业:餐饮美食网站设计——咖啡(10页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 咖啡网页设计 美食餐饮网页设计...(代码片段

炫酷 CSS 背景效果的 10 个代码片段

PC端网页rem适配方案

浅谈移动端的自适应问题——响应式rem/em利用Js动态实现移动端自适应

自适应PC端网页制作使用REM