CSS3的REM设置字体大小的变革之路——w3cdream|前端学习-开发

'I'm W3cdream,创造',前·所·未·有
CSS3的REM设置字体大小的变革之路

发布作者:萧强   发布时间:2015-07-17   阅读次数:11676


CSS3新增了一个相对单位rem(root em,根em),这个单位引起了广泛关注。这个单位与em有什么区别呢?区别在于使用rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身,通过它既可以做到只修改根元素就成比例地调整所有字体大小,又可以避免字体大小逐层复合的连锁反应。目前,除了IE8及更早版本外,所有浏览器均已支持rem。对于不支持它的浏览器,应对方法也很简单,就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小。


 rem这是个低调的css单位,近一两年开始崭露头角,有许多同学对rem的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。



rem是什么?

    rem(font size of the root element)是指相对于根元素html的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位,em(font size of the element)是指相对于父元素的字体大小的单位。它们之间其实很相似,只不过一个计算的规则是依赖根元素一个是依赖父元素计算。


em的大小是相对父级元素,而rem则是相对根级元素计算的,所以说只有em的话,所以一级一级计算起来就比较不方便了,所以css3推出rem,所有元素都相对根元素html来计算,这样就方便许多了!如下code演示


2.固定宽度做法

还有一种是固定页面宽度的做法,早期有些网站把页面设置成320的宽度,超出部分留白,这样做视觉,前端都挺开心,视觉在也不用被流式布局限制自己的设计灵感了,前端也不用在搞坑爹的流式布局。但是这种解决方案也是存在一些问题,例如在大屏幕手机下两边是留白的,还有一个就是大屏幕手机下看起来页面会特别小,操作的按钮也很小,手机淘宝首页起初是这么做的,但近期改版了,采用了rem。

首先设置viewport进行缩放


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">



rem能等比例适配所有屏幕,只要改变一个HTML的字体大小就会改变整站字体大小

    

      上面讲了一大堆目前大部分公司主流的一些web app的适配解决方案,接下来讲下rem是如何工作的。

      上面说过rem是通过根元素进行适配的,网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。举个例子:

html{
    font-size:20px;
}
.btn {

    font-size: 1.2rem;   //   等于  20*1.2=24px
 
}

.w3cdream {

    font-size: 3.6rem;   //   等于  20*3.6=70px
 
}


所以根据以上条件我们可以实现响应条件:



html {
    font-size : 10px;  //或者写成62.5%
}
@media only screen and (min-width: 401px){
    html {
        font-size: 1.5rem !important;    //  10px*1.5=15px
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 1.6rem !important;   //  10px*1.6=16px
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 1.8rem !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 2.0rem !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size:2.2rem !important; 
    }
}
所以只要利用@media在不同宽度下改变html的大小,这样就会在不同设备下改变整站字体大小了!



说一下HTML为什么用10px或者是62.5%呢,因为浏览器默认字体是16号不好计算所以我们转换成整数10px方便计算,这样1.5rem*10px就是15px!   这样只改变html字体就能改变整站字体了

下面是详细视频介绍:http://www.ycku.com/html5-26/


注明出处格式:腾讯ISUX (http://isux.tencent.com/web-app-rem.html)

本文由W3C梦想站联合整理

常用昵称:萧强,全端布道者

姓名:“刘晓强”,W3CDream创始人,目前就职于易点付。专注于web前端和移动端方面知识的研究,熟练掌握photoshop和AI,喜爱Flat UI设计和Metro UI风格,熟练掌握CSS3+HTML5技术、LESS CSS和Sass CSS,还有jQuery框架方面及一些前端框架bootstrap响应式设计等。新浪微博
友荐云推荐

CSS3直通车

热点文章

新闻资讯

标签云

友情赞助