当前位置: 首页 > Web前端 > CSS

用rem设计网页

时间:2023-03-30 14:51:54 CSS

rem是词根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查看根元素字体大小/*currentStyleforIEbrowser*/functiongetStyle(obj,attr){if(obj.currentStyle){returnobj.currentStyle[sttr];}else{returngetComputedStyle(obj,false)[attr];}}varrem=getStyle(document.getElementsByTagName("html")[0],"字体大小");console.log("rem:",rem)3设计指南3.1停止以像素为单位思考我们很容易陷入这样的思维方式,先将rem转换为px单位再思考。其实不用换算成其他单位,直接用rem思考是没有必要的。养成习惯。3.2设置合理的字号默认值直接设置rem为合理的字号默认值,可以省去很多重复的字体样式代码,而不是为了转换方便而设置rem。3.3不是所有的东西都使用remrem只是你工具箱中的一件,不是所有的东西都使用rem。当您不确定时,使用rem表示字体大小,使用px表示边框,使用em表示大多数其他属性。3.4使用媒体选择器来适应不同的平台通过使用媒体选择器使您的网页看起来具有响应性。3.5浏览器默认字号参考一般浏览器默认值为16px。