2015年12月22日

超适应性手机网站核心rem详解


切图网 www.qietu.com 今年的项目统计,手机app网页前端和 pc网页切图项目,应该各站50%,从这个数据来看,手机网站已经占了非常大的比重,而作为一个称职的前端开发工程师来讲,了解一个适应性非常好的手机网页原理是非常有必要的,而它的核心所在就是rem,rem是继px,em之后的一个神一样的单位。

我们在使用rem做单位以前,都是用px和em为单位,手机网站前端制作,通常是固定宽度和100%流式布局两种方式,但是现在都采用rem做单位,网页可固定宽可不固定宽,非常灵活,切图网通过rem做单位的项目有:

http://www4.qietu.com/html/ntv2rem/

http://www4.qietu.com/html/mayi/

如果你想知道rem具体是什么东西,下面摘自的文章可以很详细的告诉你:

————————————

在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用“em”来定义Web页面的字体。

一般都是body的font-size为基准

常用写法:

body {

font-size: 62.5%;

/*10 ÷ 16 × 100% = 62.5%*/

}

h1 {

font-size: 2.4em;

/*2.4em × 10 = 24px */

}

p {

font-size: 1.4em;

/*1.4em × 10 = 14px */

}

li {

font-size: 1.4em;

/*1.4 × ? = 14px ? */

}

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,

计算公式:1 ÷ 父元素的font-size × 需要转换的像素值 = em值

这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。

rem:W3C官网描述是“font size of the root element”,即rem是相对于根元素。

我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图:

pxtoem

嫌换算麻烦的同学,也可以去http://pxtoem.com/这个网站去设置

常用写法:

html {

font-size: 62.5%;

/*10 ÷ 16 × 100% = 62.5%*/

}

body {

font-size: 1.4rem;

/*1.4 × 10px = 14px */

}

h1 {

font-size: 2.4rem;

/*2.4 × 10px = 24px*/

}

在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。

注:在Chrome下,默认最下字体为12px,可以设置font-size: 625%,其他以此类推

浏览器兼容性

 

IE9以上等支持CSS3的浏览器是肯定可以支持的,如果想要兼容IE低版本,那可以考虑针对IE9以下低版本浏览器,用px来实现。

在页面中设置字体,我们知道有常见的两种,px 和 em.

px

在Web页面制作中,我们一般使用“px”来设置我们的文本,因为他比较稳定和精确。但是这种方法存在一个问题,当用户在浏览器中浏览我们制作的 Web页面时,他改变了浏览器的字体大小(虽然一般人不会去改变浏览器字体大小),这时会使用我们的Web页面布局被打破,这时就提出了使用“em”来定 义Web页面的字体。

em

一般都是bodyfont-size为基准
常用写法:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
body {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
h1 {
    font-size: 2.4em;
    /*2.4em × 10 = 24px */
}
p {
    font-size: 1.4em;
    /*1.4em × 10 = 14px */
}
li {
    font-size: 1.4em;
    /*1.4 × ? = 14px ? */
}

为什么“li”的“1.4em”是不是“14px”将是一个问号呢?在使用“em”作单位时,一定需要知道其父元素的设置,因为“em”就是一个相对值,而且是一个相对于父元素的值,
计算公式:1 ÷ 父元素的font-size × 需要转换的像素值 = em值
这样的情况下“1.4em”可以是“14px”,也可以是“20px”,或者说是“24px”,总之是一个不确定值,那么解决这样的问题,要么你知道其父元素的值,要么呢在任何子元素中都使用“1em”。

rem

rem:W3C官网描述是“font size of the root element”,即rem是相对于根元素。
我们只需要在根元素确定一个参考值,在根元素中设置多大的字体,这完全可以根据您自己的需,大家也可以参考下图:
pxtoem
嫌换算麻烦的同学,也可以去http://pxtoem.com/这个网站去设置
常用写法:

01
02
03
04
05
06
07
08
09
10
11
12
html {
    font-size: 62.5%;
    /*10 ÷ 16 × 100% = 62.5%*/
}
body {
    font-size: 1.4rem;
    /*1.4 × 10px = 14px */
}
h1 {
    font-size: 2.4rem;
    /*2.4 × 10px = 24px*/
}

在根元素中定义了一个基本字体大小为62.5%(也就是10px。设置这个值主要方便计算,如果没有设置,将是以“16px”为基准 )。从上面的计算结果,我们使用“rem”就像使用“px”一样的方便,而且同时解决了“px”和“em”两者不同之处。
注:在Chrome下,默认最下字体为12px,可以设置font-size: 625%,其他以此类推

浏览器兼容性

IE9以上等支持CSS3的浏览器是肯定可以支持的,如果想要兼容IE低版本,那可以考虑针对IE9以下低版本浏览器,用px来实现。

标签:,

微信扫一扫二维码访问


16年前端经验
加微信好友直接沟通
了解《我的十年》