移动WEB开发的rem布局、Less使用

移动WEB开发的rem布局

目标（目录）

1. 能够使用rem单位

2. 能够使用媒体查询的基本语法

3. 能够使用Less的基本语法

4. 能够使用Less中的嵌套

5. 能够使用Less中的运算

6. 能够使用2种rem适配方案

思考：1、页面布局文字能够随着屏幕大小的变化而变化？

2、流式布局和flex布局主要针对于宽度布局，那高度如何设置？

3、怎么样让屏幕发生变化的时候元素高度和宽度等比例缩放？

一、rem的基础？

rem（root em）是一个相对单位，

类似于em，em是父元素字体大小 ，2em 相当于将父元素字体放大两倍

代码演示：

div{

font-size: 12px;

}

p {

width: 5em;

height: 5em;

/* 运行 width: 60px、height:60px */

background-color: aqua;

}

​

        

 

​

 

有图为证

 

 

 

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

比如根元素（html）设置font-size = 12px,非根元素设置width:2em则换成px表示就是24px

代码演示：

html{

font-size: 12px;

}

p {

width: 6rem;

height: 6rem;

/* 运行 width: 72px、height:72px */

background-color: aqua;

}

​

        

 

​

有图为证：

 

 

 

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

二、媒体查询

什么是媒体查询

媒体查询（Media Query）是CSS3新语法

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

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

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

媒体查询最好从小到大宽度的书写

语法规范

@media mediatype and|not|only (media feature){

CSS-Code;

}

• 用@media开头 注意“@”符号 声明媒体查询

• mediatype 媒体类型 属于哪一种类型，打印机还是手机屏幕

• 关键字 and not only

• media feature 媒体特征 必须要有小括号包裹

1、mediatype 查询类型

属性值：

（1）all：适用于所有设备

（2）print：用于打印机和打印预览

（3）screen：用于电脑屏幕，平板电脑，智能手机等

2、关键字 and|not|only

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

• and：可以将多个媒体特性连接在一起，相当于“且”

• not：排除某个媒体类型，相当于“非”

• only：指定某个特定的媒体类型

3、媒体特性

每个媒体类型都包含各自不同的特性，根据不同的媒体类型的媒体特性设置不同的展示风格

属性值：

width：定义输出设备中页面可见区域的宽度

min-width：定义输出设备中页面最小可见区域宽度

max-width：定义输出设备中页面最大可见区域宽度

代码演示：

@media screen and (max-width: 600px){

/* 设置css样式 */

body{

background-color: green;

}

}

意思：在屏幕上，最大的宽度是600px ，设置body的背景颜色为绿色

max-width: 600px 小于等于600px的意思。

多个条件加and连接

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

媒体查询+rem实现不同设备宽度，实现页面元素大小的动态变化

案例：当屏幕变小时，页面宽高变小，字体变小；当屏幕变大时，页面宽高变大，字体变大

@media screen and (min-width: 320px){{

html{

font-size: 50px;

}

}

@media screen and (min-width: 640px){

html{

font-size: 100px;

}

}

.top{

height: 1rem;

font-size: 0.5rem;

background-color: rgb(33, 192, 179);

color: grey;

}

​

        购物车

​

 

引入资源

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

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

语法规范

<link rel="stylesheets" href="index.css" media="mediatype and|not|only (media feature)">

<link rel="stylesheets" href="index.css" media="screen and (min-width:640px)">

三、Less基础

Less介绍

Less（Learner Style Sheets）是一门CSS扩展语言，也称CSS预处理器

Less是一门CSS预处理语言，它扩展了CSS的动态特性。

它的CSS的语言基础之上，引入变量、Mixin（混入）、运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本。

Less中文网址：http://lesscss.cn/

常见的CSS预处理器：Sass、Less、Stylus

Less安装

1. 安装node.js，网址：http://nodejs.cn/download/

   安装就是一直点next

2. 检查是否安装成功，使用cmd命令（win10：window+r 打开运行输入cmd）——输入“node -v”查看版本即可

3. 基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

4. 检查是否安装成功，使用cmd命令“lessc -v”查看版本

 

 

 

 

Less的使用

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

1. Less变量

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

@变量名:值;

命名规则

• 必须要@为前缀

• 不能包含特殊字符

• 不能以数字开头

• 区分大小写

例如：错误的变量名：@2color、@color~@#

先定义变量，然后下方某个元素使用变量

2、Less编译

Less包含一套自定义的语法及一个解析器，用户根据这个语法定义自己的样式规则，这些规则最终通过解析器，编译生成相应的CSS文件

将less文件，编译成css文件。

利用vscode less插件，插件名为Easy LESS。

在vxcode商店里面搜索Easy LESS，安装，然后重新加载vscode，只要保存一下less文件，会自动生成CSS文件。