摘要：使用伪类选择元素是顶层节点，就是我们需要设置的根元素。使用媒体选择器使用媒体选择器适配不同平台，可让你的网页看起来是响应式的。
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 并非所有地方都使用 remrem 只是你工具箱中的一个，并非所有地方都使用 rem。当你不确定的时候，对 font-size 使用 rem，对 border 使用 px，以及对其他大多数属性使用 em。
3.4 使用媒体选择器使用媒体选择器适配不同平台，可让你的网页看起来是响应式的。
3.5 浏览器默认字体大小参考一般浏览器默认值是 16px。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117006.html
摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。 一、静态布局（static layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...
摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。 一、静态布局（static layout） 即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点 不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...
摘要：当媒介最大宽度为且是横屏时里面的样式生效目前前端开发项目类型可以分为两种方式，和。这样我们的响应式网页才完全生效了。移动端特点移动端特点没有有没有滚动条没有没有因为移动端是没有事件的所以当我们在需要兼容移动端的页面中应该尽量少用事件。鄙人最近才刚刚开始学习一些关于移动端的知识，还只是个小白，文中可能有许多理解错误，望指出，请多多见谅。 响应式 什么是响应式页面呢？ 顾名思义响应式页面就是能做...
阅读 3236·2021-09-22 10:52
阅读 1413·2021-09-09 09:34
阅读 1713·2021-09-09 09:33
阅读 572·2019-08-30 15:54
阅读 2389·2019-08-29 11:15
阅读 610·2019-08-26 13:37
阅读 1544·2019-08-26 12:11
阅读 2849·2019-08-26 12:00
