移动web开发之rem、媒体查询、less

前言：

• 页面布局文字随着屏幕大小变化而变化
• 流式布局和flex布局主要针对于宽度布局，rem布局针对高度设置
• rem布局能在屏幕发生变化时，元素的高度和宽度等比例缩放

1.rem基础

rem单位

• rem是一个相对单位，类似于em，em是父元素字体大小
• 不同的是rem的基准是相对于html元素的字体大小
• 比如，根元素（html）设置font-size：12px；非根元素设置width：2rem；则换成px表示就是24px（即非根元素的width：24px）。
• rem的优点：可以通过修改html里面的文字来改变页面中元素的大小，可以做到整体控制。

 2. 媒体查询

2.1 什么是媒体查询

媒体查询（media query）是css3新语法。

• 使用@media查询，可以针对不同的媒体类型定义不同的样式
• @media可以针对不同的屏幕尺寸设定不同的样式
• 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
• 目前针对很多苹果手机、安卓手机、平板等设备都用得到多媒体查询

 2.2 语法

1.mediatype 查询类型

2 关键字

3.媒体特性

可以根据不同的屏幕尺寸改变不同的样式

    <style>
        /* 在屏幕上 并且最大宽度是500像素，可以设置想要的样式 */
        @media screen and (max-width: 500px) {
            /* 当屏幕的宽度大于500像素时，下面的代码不起作用 */
            body {
                background-color: lightblue;
            }
        }
    </style>

2.3 引入资源

语法

3 less基础

3.1 css的弊端

• css冗余度高
• 不方便维护及扩展，不利于复用
• 没有很好的计算能力

3.2 less介绍

• less是一门css扩展语言，也称为css预处理器，在css现有的语法上，加入了程序式语言特性。引入了变量、Mixin（混入）、运算以及函数功能
• less中文网址：http://lesscss.cn/
• 常见的css预处理器：Sass，Less，Stylus

3.3 less安装

3.4 less变量

后缀名为 .less 的文件

//定义变量

@变量名：值；

变量命名规范

1. 必须有@为前缀
2. 不能包含特殊字符
3. 不能以数字开头
4. 区分大小写

//定义变量
@color: blue;
//使用变量
body {
    background-color: @color;
}

 

3.5 less编译

 vscode插件：Easy LESS【该插件用来吧less文件编译为css文件,保存less文件后，会自动生成一个css文件，link引用】

3.6 less嵌套

.less文件
//嵌套1 子元素直接嵌套在父元素里面
div{
    width:200px;
    a {
        color:#000;
        // 加 & ，被解析为父元素自身或父元素的伪类
        &:hover {
            color: #fff;
    }
}
.nav{
    .logo {
        color: #000;
    }
}

3.7 less运算

• 颜色、数字和变量都能参与运算。
• 运算符左右有个空格隔开1px + 5
• 两个数参与运算 如果只有一个数有单位，则最后的结果就以这个单位为准
• 两个数的单位不同，结果以第一个单位为准

 3.8 rem适配方案

3.8.1 实际开发适配方案

1. 按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小；（媒体查询）
2. CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；

3.8.2 技术方案

1.  less+媒体查询+rem
2. flexible.js+rem（推荐）

 技术方案1：

        元素大小取值方式

技术方案2： flexible.js是由手机淘宝团队出的

flexible.js 下载地址：https://github.com/amfe/lib-flexible