rem单位
rem是相对单位，类似于em
但rem的基准是相对于HTML元素的字体大小
rem的优点是可以通过修改HTML文字大小改变页面元素大小，做到整体控制
媒体查询
使用@media查询，可以针对不同的媒体类型定义不同的样式
可以针对不同的屏幕尺寸设置不同样式
语法：
@media mediatype and|not|only (media feature) {
CSS-Code；
}
mediatype 媒体类型
and|not|only关键字
media feature 媒体特征
mediatype 媒体类型
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕平板电脑，手机等
and|not|only关键字
and 可以将多个媒体特性连接到一起作为媒体查询的条件
not 排除某媒体类型
only 指定某媒体类型
media feature 媒体特征
每个媒体特性都具有不同媒体风格：width、min-width、max-width
在屏幕上且最大宽度为800px 设置我们想要的样式
未超800px时：
超800px时：
媒体查询+rem实现动态大小变化
Less基础
（Leaner Style Sheets的缩写，CSS预处理器）
CSS弊端
CSS冗余度较高
不方便维护，不利于复用
没有很好的计算能力
Less在CSS语法上，加入程序式语言特性；引入变量函数等
Less变量
@变量名：值；（大小写敏感，不能以数字开头，不能有特殊字符）
通过改变变量@color，可以减少冗余
less编译easy less插件
需要把less文件编译生成CSS文件，这样html文件才能使用
less嵌套
伪元素、交集或伪类选择器
必须有&，否则会被编译为后代选择器（即内侧选择器前必须加&）
less运算
任何数字、颜色或变量都可以参与运算（+，-，*，/）
注：
除法要加小括号
运算符左右必须隔开
两个数参与运算，如果只有一个单位，以这个单位为准；如果有两个单位且不一样以第一个单位为准
颜色 #666 - #444 = #222
rem适配方案
把页面写死，可以不用width：100%；rem会进行适配（单位rem相当于单元格）
设备尺寸改变，等比例适配
根据不同宽度设置HTML大小，用rem进行缩放
按照设备宽度的比例，动态设置HTML根标签的font-size 大小（媒体查询）
案例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="css/index.css"><link rel="shortcut icon" href=""><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题！*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}</style></head><body><div class="search-content"><a href="#" class="classify"><img src="https://image1.suning.cn/uimg/cms/img/157199320847433454.png" alt=""></a><div class="search"><form action=""><input type="search" placeholder=" 年货到家"></form></div><a href="#" class="login"><img src="https://image2.suning.cn/uimg/cms/img/157199321817918653.png" alt=""></a></div><nav><a href="#"><img src="https://image1.suning.cn/uimg/cms/img/165710989476671143.png?from=mobile" alt=""><span>苏宁家电</span></a><a href="#"><img src="https://image2.suning.cn/uimg/cms/img/161293951076282456.png?from=mobile" alt=""><span>苏宁超市</span></a><a href="#"><img src="https://image2.suning.cn/uimg/cms/img/161293957567317395.png?from=mobile" alt=""><span>手机电脑</span></a><a href="#"><img src="https://image1.suning.cn/uimg/cms/img/165711026680588659.png?from=mobile" alt=""><span>家具家装</span></a><a href="#"><img src="https://image1.suning.cn/uimg/cms/img/165717927411065855.png?from=mobile" alt=""><span>生活家电</span></a><a href="#"><img src="https://image1.suning.cn/uimg/cms/img/168482613923496177.png?from=mobile" alt=""><span>9.9包邮</span></a><a href="#"><img src="https://image2.suning.cn/uimg/cms/img/167721730161114108.png?from=mobile" alt=""><span>场景购</span></a><a href="#"><img src="https://image3.suning.cn/uimg/cms/img/161293963977525820.png?from=mobile" alt=""><span>签到有礼</span></a><a href="#"><img src="https://image2.suning.cn/uimg/cms/img/161293965567020138.png?from=mobile" alt=""><span>领劵中心</span></a><a href="#"><img src="https://image3.suning.cn/uimg/cms/img/161293968063152286.png?from=mobile" alt=""><span>更多频道</span></a></nav><div class="banner"><div class="ad1"><img src="https://image1.suning.cn/uimg/cms/img/170651576715631608.jpg?from=mobile"></div><div class="ad2"><a href=""><img src="https://image2.suning.cn/uimg/cms/img/170651578604208050.gif" alt=""></a><a href=""><img src="https://image2.suning.cn/uimg/cms/img/170651629944150641.gif" alt=""></a><a href=""><img src="https://image1.suning.cn/uimg/cms/img/170651632063833232.gif" alt=""></a></div></div>
</body></html>html {font-size: 50px;
}
@media screen and (min-width: 320px) {html {font-size: 21.33333333px;}
}
@media screen and (min-width: 360px) {html {font-size: 24px;}
}
@media screen and (min-width: 375px) {html {font-size: 25px;}
}
@media screen and (min-width: 400px) {html {font-size: 26.66666667px;}
}
@media screen and (min-width: 480px) {html {font-size: 32px;}
}
@media screen and (min-width: 540px) {html {font-size: 36px;}
}
@media screen and (min-width: 720px) {html {font-size: 48px;}
}
@media screen and (min-width: 750px) {html {font-size: 50px;}
}
body {min-width: 320px;margin: 0 auto;width: 15rem;line-height: 1.5;background-color: #f2f2f2;
}
.search-content {display: flex;width: 15rem;height: 1.76rem;background-color: #ff0101;position: fixed;top: 0;left: auto;
}
.search-content .classify {width: 0.72rem;height: 1.2rem;margin: 0.22rem 0.5rem 0.14rem 0.48rem;line-height: 1.2rem;
}
.search-content .classify img {width: 0.72rem;height: 1.2rem;
}
.search {flex: 1;
}
.search form {height: 100%;display: flex;justify-content: center;align-items: center;
}
.search form input {border: 0;height: 1.2rem;width: 10.44rem;border-radius: 0.66rem;background-color: #fff2cc;
}
.login {width: 0.72rem;height: 1.2rem;margin: 0.22rem 0.5rem 0.14rem 0.48rem;line-height: 1.2rem;
}
.login img {width: 0.72rem;height: 1.2rem;
}
nav {background: url(https://image1.suning.cn/uimg/cms/img/170651574331670820.gif) no-repeat center;background-size: 15rem 6.4rem;width: 15rem;height: 6.4rem;margin-top: 1.76rem;
}
nav a {float: left;width: 3rem;height: 2.84rem;text-align: center;
}
nav a img {display: block;width: 1.68rem;height: 1.68rem;margin: 0.2rem auto 0;
}
nav a span {font-size: 0.5rem;color: #333;
}
.banner {width: 15rem;height: 4.74rem;
}
.banner .ad1 {display: flex;width: 15rem;height: 0.9rem;
}
.banner .ad1 img {flex: 1;width: 100%;height: 100%;
}
.banner .ad2 {display: flex;width: 100%;height: 3.84rem;
}
.banner .ad2 a {height: 100%;flex: 1;
}
.banner .ad2 a img {width: 100%;height: 100%;
}
效果：
