专注WEB开发 分享经验,沉淀知识

不同尺寸的屏幕适配你必须知道rem

 作者:chenxing  时间:2016-10-14 16:08  评论:

最近公司的几个开发项目一直都是移动端项目,接过资深前端写的静态页面,阅读css时,rem抢走我的全部注意力。rem什么鬼?赶紧查资料弥补下。

rem

最近公司的几个开发项目一直都是移动端项目,接过资深前端写的静态页面,阅读css时,rem抢走我的全部注意力。rem什么鬼?赶紧查资料弥补下。

什么是rem

rem:是计算机字体度量单位,英文font size of the root element。指相对于根元素(html)字体大小单位。网页布局中还又两个从常见的单位:px,em。px这个是绝对单位,em也是一个相对单位,它和rem区别是它相对于父级元素的大小。

rem和em都是已倍数方式存在的,怎么理解?比如font-size:2rem指这个元素的字体大小相对应根元素的字体大小是两倍关系,如果我在html定义了font-size:14px,那么这个元素的大小就是25px。

html{
        font-size:14px;
    }
h1{
        font-size:2rem;/**实际大小为28em**/
    }

再举一个最常见的应用就是文章的首行缩进,用em我可以不用关心你这文章用多大的字体,在任何字体下都可以应用一下代码。

p{
    text-indent:2em;
}

rem有哪些优势

上述例子已经彰显了相对单位的优势,但rem的价值可不在这局部的元素上的应用,各个不同尺寸的屏幕上适配这才是其英雄用武的地方。先看一下它的具体引用。

针对rem,通用的媒体查询css代码段:

/*媒体查询*/
html{font-size:11px}
@media screen and (min-width:321px) and (max-width:374px){html{font-size:11px}}
@media screen and (min-width:375px) and (max-width:413px){html{font-size:12px}}
@media screen and (min-width:414px) and (max-width:639px){html{font-size:13px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px){html{font-size:20px;}body {background-color:#eee;}}

等等~,以上代码怎么没有rem!不要急,以上是rem适配不同屏幕的前提,剩下涉及到元素大小,长度,宽度等都用rem定义。注意: 所有屏幕的适配情况只要控制上述这几行代码就可以了

回归到rem优势分析上,对比分析px和em两个单位。px,做一两个大小的屏幕适配还可以,如果移动设备尺寸一多那代码就难以维护了,单靠css做适配,px是行不通的。那em呢?这个貌似可以,但很危险,em随时会叛变,一个稍微大一点的页面其层级关系可复杂了,子元素离根元素html越远越不受控制,有种将在外君命有所不受之意。用em做统筹页面,那自能自讨苦吃。

rem集合了相对和绝对单位的优点。我个人理解这是一个 “可以改变的绝对单位” 或者 “可控制的相对单位” ,绝对单位的一个好处就是可控,忠诚,说一不二;相对单位灵活单不可控。其实从某种角度看px也是相对度量单位,其相对于计算机的分辨率大小,在web开发中中这个计算机分辨率我们无法改变的,所以它就成了web中的绝对单位。rem的相对参照物可以改变的,并且控制的只要我在html定义font-size的大小,那么下面的每一个元素的大小,都是可以确定的,每一个元素的大小都在开发者心中都是可控的。而em就无法做的可控,这也就是为什么em只能做局部元素的应用而不能统筹页面的原因所在。

最后:

不同尺寸的屏幕适配还有很多解决方案,并不一定要用rem。比如说流式布局,通过%定义宽度,也又很多web app采用这种布局,像亚马逊,携程等。但rem在开发效率和维护性上都占居一定的优势,各个尺寸下展现的页面也更贴合设计师的最初设计,有这两者其实足已!

除特别注明外,本站所有文章均为作者原创。 或分享自己的编程经验,或探讨工作中的问题,或聊以人生趣事。 转载请注明出处来自 http://www.qiusuoweb.com/13.html

发布评论

 提交评论
有人回复时邮件通知我

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

个人博客图片免费存放解决方案

 2022-03-21 00:16  92

MySQL中的MVCC总结

 2022-03-19 03:00  94

什么才是高级工程师的第一技能

 2022-03-16 22:04  71

 最新评论

 诚心: 09月29日 23:01
学到了
来源: 如何一次性推送百万级别的消息
 Nick: 04月14日 12:26
网上的资料还是太老,都只是取一个元素,解决了一大难题
来源: redis set集合取出一组数据并删除
 skywalker: 11月03日 18:21
简洁明了
来源: mysql 获取某个日期的前一天或后一天
 lisheng: 05月09日 19:26
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里
 心态炸裂: 03月24日 10:54
No3.blindcomfirm 多了一个l,望改正!!!
来源: 微信小程序获取input值的总结
 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里