一、rem
rem（root em）是一个相对单位，类似于em,em是父元素字体大小
1em=父元素的font-size的px值
不同的是rem是相对于html元素的字体大小
1rem=html元素的font-size的px值
html{
font-size:24px
}
div{
font-size:12px
}
p {
width: 1em;(等于12px)
height: 1em;(等于12px)
width: 1rem;(等于24px)
height: 1rem;(等于24px)
}
一个页面中只能有一个rem，在html中，可以整体控制大小，尽行整体缩放
浏览器默认是1rem= 24px
二、媒体查询：
2.1、是CSS3 的新语法
@media可以针对不同的屏幕尺寸设置不同的样式
/* 在屏幕上，并且最大的宽度是800像素，设置我们想要的样式 */
@media screen and (max-width:750px){
body{
font-size:25px ;
}
}
mediatype查询类型
将不同的终端设备划分成不同的类型，称为媒体类型
all:用于所有设备
print:用于打印机和打印预览
scree：用于电脑屏幕，平板电脑，手机等
关键字:
and：可以将多个媒体特性连接到一起作为媒体查询的条件。
not：排除某个媒体类型，相当于“非”的意思，可以省略
only：指定某个媒体类型，可以省略
媒体特性：
width:定义输出设备中页面可见区域的宽度
min-width:定义输出设备中页面最小可见区域的宽度
max-width:定义输出设备中页面最大可见区域的宽度
2.2、引入资源：
当样式比较多的时候，我们可以针对不同的媒体使用不同的style文件
<link rel="stylesheet" type="text/css" href="./320.css" media="screen and (min-width:320px)"/>
<link rel="stylesheet" type="text/css" href="./640.css" media="screen and (min-width:640px)"/>
三 、less
css缺点:
冗余度比较高，不方便扩展，不利于复用，没有很好的计算能力
less依赖于node.js(首先安装less)
less安装:
npm install -g less
命名规则： @变量名:值；
变量名区分大小写
less编译
下载css插件
@bg_color:yellow;
@font14:14px;
@spDivH: 600px / 2;
@spDivW:300px + 400;
@spDivW1:(100px + 100) * 2;
@a_bg:red;
@a_hbg:blue;
div.test{
background-color: @bg_color;
width: @spDivW1;
height: @spDivH;
a{
font-size: @font14;
background-color: @a_bg;
// a:hover{} 伪类选择器前面添加 &
&:hover{
background-color: @a_hbg;
}
}
}
使用，如果有伪类、交集、伪元素选择器，内层选择器的前面加上&符号
div{
&:hover{
}
}
运算符（+ - * /），左右两侧必须有两个空格
两个数参与运算，如果只有一个数有单位，则最后的结果就以这个单位为准
两个参数与运算，如果2个数都有单位，而且单位不一样，最后的结果以第一个单位为准
四、移动端适配搭建
适配方案一：rem+ 媒体查询 + less
1、根据“媒体查询”动态设置font-size 字体大小
2、元素取值方式rem: 1rem就是html中font-size的大小
适配方式二： flexible.js + rem 是一个库，不需要再写媒体查询了
1、引入视口
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
2、使用一
（1）去git官网下载下载 压缩文件找里面的flexible.js
（2）引入 flexible-2.0.min.js文件
<script src="flexible-2.0.min.js"></script>
使用二
//下载
npm i -S amfe-flexible
//引入
<script src="./node_modules/amfe-flexible/index.js"></script>
3、默认把当前屏幕划分为10等分即10rem；
4、创建全局的base.css 设置最大的宽度比例:
[
](javascript:void(0)