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

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

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

最近公司的几个开发项目一直都是移动端项目,接过资深前端写的静态页面,阅读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在开发效率和维护性上都占居一定的优势,各个尺寸下展现的页面也更贴合设计师的最初设计,有这两者其实足已!

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

发布评论

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

 评论(0)

站长头像
chenxing(PHP攻城狮)

运营天数

总访问量

文章数量

-

-

-

交流群:157451741

新浪微博:草莽兴

 近期文章

一年时间又回到这里

 2019-07-27 16:54  88

PHP字符串转数组的三种场景

 2018-05-05 01:32  181

PHP如何遍历字符串?

 2018-05-04 00:56  913

api接口常见的安全问题和解决方案

 2018-05-03 23:20  811

 最新评论

 666666: 11月08日 13:49
66666
来源: 一年时间又回到这里
 花花草草: 10月14日 14:58
tp5不是已经提前开了吗
来源: _SESSION变量未定义?
 疯了: 10月10日 13:40
你好呀,我使用docker构建的 把整个项目给了777 并把runtime的所有者给了nginx php的运行者还是报错
来源: thinkphp5的mkdir() Permission denied问题探讨
 mesecretme: 09月30日 15:30
有个问题,有没有发现用redis保存session的话,session清空redis的key还没过期,会依然保留的,这是值变成空了
来源: php项目redis实现session共享案例
 旧久: 09月20日 07:24
感谢!
来源: 没备案域名如何在阿里云服务器上使用?
 pagenoname: 08月24日 18:51
兴哥牛B加油哈兴哥成功的道路上你又进了一步 哈哈
来源: 一年时间又回到这里