CSS3: 神奇的"rem"自适应布局(WebAPP适配神器)

一.移动web开发与适配

• 跑在手机端的web页面(h5页面)
• 跨平台
• 基于webview
• 告别IE，拥抱webkit

 

1.常见的移动web适配方法：

(1).PC:

• 960px/1000px 居中
• 盒子模型，定高，定宽
• display:inline-block

(2).移动web:

• 定高，宽度百分比
• flex
• Meida Query（媒体查询）

其中flex+Media Query就能达到响应式布局。

(3).Media Query媒体查询：（和css结合使用）

@media 媒体类型 and (媒体特性) {
    /*css样式*/
}

媒体类型：screen,print..

媒体特性：max-width,max-height...

---

二. rem的原理和简介：

rem是(font size of the root element)，即字体单位.和px不同的是，rem的大小会根据root element的大小动态的去变化。也就是说,rem会动态的根据html的根元素的font size的大小去实时的变化。

• 字体单位

值根据html根元素大小而定，同样可以作为宽度、高度等单位。

• 适配原理

将px替换为rem,动态修改html的font-size适配.

• 兼容性

ios6以上和android 2.1以上，基本覆盖所有流行的手机系统。

公式：

1rem = (浏览器默认字体的大小)px

也可以直接给html添加font-size:

html{

    font-size: ??px;

}

 动态的去修改fontsize:

方法1：MediaQuery方式

@media screen and (max-width:360px) and (min-width: 321px) {
    html {
        font-size: 20px;
    }
}

@media screen and (max-width:320px) {
    html {
        font-size: 24px;
    }
}

.......其他尺寸

方法2：采用js设置fontsize:

---

三. rem进阶：

 

• rem基准值的计算
• rem数值计算与构建
• rem与scss结合使用

rem的基准值，就是html的font-size。

如果当前html的font-size为16px,那么16px就是rem基准值。即1rem = 16px.

rem的数值就是换算出的px值的rem的值。

接着上面的举例，如果，1rem =16px;那么170px的rem数值就是170/16.

注意，有些rem的计算会去动态修改我们的viewport。例如对于高清屏，会把initial-scale改为0.5,这是因为对于一般的手机屏幕，能识别的最低的像素就是1px，而对于某些高清屏能识别的比1px还细。

每次去动态计算我们的rem数值的时候都用公式麻烦的去除显得很麻烦，这个时候就可以使用scss工具：

xxx.scss:
@function px2rem($px) {
    $rem: 375/10px;
    @return ($px / $rem) + rem;
}

.hello {
    width : px2rem(100px);
    height :px2rem(100px);
    &.b {
        width: px2rem(50px);
        height: px2rem(50px);
    }
}


编译后scss文件后，就会生成xxx.css:
.hello {
    width:2.66667rem;
    height:2.66667rem;}
    .hello.b{
    width:1.33333rem;
    height:1.33333rem;}

 

---