移动WEB开发之rem适配布局

一、rem 基础

rem单位

rem（root em）是一个相对单位，类似于em，em是父元素字体大小。

不同的是rem的基准是相对于html元素的字体大小

比如，根元素（html）设置font-size =12px；非根元素设置width：2rem；则换成px表示就是24px。

rem的优点是可以通过修改html里面的文字大小来改变页面中元素的大小可以整体控制。

二、媒体查询

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

使用@media 查询，可以针对不同的媒体类型定义不同的样式

@media  可以针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

1、mediatype 查询类型

将不同的终端设备划分为不同的类型，称为媒体类型

2、关键字

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件。

and： 可以将多个媒体特性连接到一起，相当于 “且” 的意思。

not：  排除某个媒体类型，相当于 “非” 的意思，可以省略。

only： 指定，某个特性的媒体类型，可以省略。

3、媒体特性

媒体查询+ rem实现元素动态大小变化。

4、引入资源

当样式比较多时，我们可以针对不同的媒体使用不同的stylesheets（样式表）

原理就是直接在link中判断设备的尺寸，然后引用不同的css文件

三、Less 基础

1、维护css弊端

css是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念

2、Less介绍

Less是一门css预处理语言，他扩展了css的动态特性

3、Less使用

首先新建一个后缀名为less的文件，在这个文件里面书写less语句

4、Less变量

变量是指没有固定的值，可以改变的。因为我们css中的一些颜色和数值等经常使用。

@变量名： 值；

（1）、变量命名规范

必须有@为前缀

不能包含特殊字符

不能以数字开头

大小写敏感

5、Less编译

本质上。less包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成css文件。

所以我们需要把我们的less文件编译生成css文件，这样我们的html页面才能使用。

vocode Less 插件

6、less嵌套

在less文件中可以这样写

less嵌套子元素可以写到直接写到父元素里面

如果遇见（交集、伪类、伪元素选择器）

内层选择器的前面没有 & 符号，则他被解析为父选择器的后代；

如果有 & 符号，他就被解析为父元素自身或父元素的伪类。

7、less运算

任何数字、颜色或者变量都可以参与运算。就是less提供了加减乘除算术运算。

注意：

1、乘号（*）  和   除号（/）的写法

2、运算符中间左右有空格隔开 1px +5

3、对于两个不同单位的值之间的运算，运算结果的值取第一个值的单位

4、如果两个值之间只有一个值有单位，则运算结果就取该单位

四、 rem 适配方案

1、rem实际开发适配方案

按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小（媒体查询）

css中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem为单位的值；

2、rem适配方案技术使用

3、rem实际开发适配方案1

rem+媒体查询+less技术

  1、设计稿常见尺寸宽度

一般情况下，我们以一套或两套效果图适应大部分的屏幕，现在基本以750为准

   2、动态设置html标签font-size大小

3、元素大小取值方法

4、简洁高效的rem实际开发适配方案flexible.js

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

2、、在页面中引入JS文件

<script src="js/flexible.js"></script>

3、VSCode px转化为rem  插件 cssrem

这个插件默认的html文字大小 cssroot  16px

设置html字体大小基准值       750px的页面基准值应改成75

1、打开 设置 快捷键是ctrl + ，

2、打开setting.json

3、找到cssroot 点左边编辑 然后修改

flexible 给我们划分了十等份

如果我们的屏幕超过了750px，那么我们就按照750 设计稿来走  不会让我们的页面超过750px

五、苏宁首页案例制作

      3、生成的index.css  引入到  index.html里面