单位
rem：相对于html元素的字体大小；
em：相对于父元素的字体大小。
总结：rem可以通过修改html里面的文字大小来改变页面中元素的大小，达到整体控制。
媒体查询
/* 屏幕上宽度在540-969像素之间的显示为粉红色 */@media screen and (min-width: 540px) and (max-width: 969px) {body {background-color: pink;}}/* 正常从小到大写 可以优化 */@media screen and (min-width: 540px) {body {background-color: pink;}}
1、mediataype查询类型
2、关键字
3、媒体特性
总结：可以根据不同的屏幕尺寸来改变不同的样式（从小到大写可以优化代码）
4、引入资源
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">eg:/* 针对不同的屏幕尺寸 调用不同的css文件 */<link rel="stylesheet" media="srceen and (min-width: 320px)" href="style320.css"><link rel="stylesheet" media="srceen and (min-width: 640px)" href="style640.css">
Less（css预处理器）
引入了变量，Mixin（混入)，运算以及函数等功能，降低了CSS的维护成本。（常见的预处理器：Sass、Less、Stylus）
安装npm install -g less
查看版本less -v
1、定义变量@(区分大小写)
@color: pink;body {backgrounk-color: @color}div {color: @color}
2、Vscode插件 (Easy LESS)
自动编译成css文件
3、嵌套
遇到伪类、交集选择器，我们内层选择器的前面需要加&
a {color: red;&:hover {color: blue; }&::before {content: "";}}
4、运算
乘号（*）和除号（/）运算符中间左右要有个空格隔开1px + 5对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位如果两个值之间只有一个值有单位，则运算结果就取该单位rem适配方案
1、less+媒体查询+rem
1.1 常见设计稿尺寸宽度
1.2 实际开发方案逻辑
首先我们选一套标准尺寸（750为准）；我们用屏幕尺寸，除以，我们划分的份数，得到了html里面的文字大小，但是我们知道不同屏幕下得到的文字大小是不一样的；页面元素的rem值 = 页面元素在750像素下的px值 / html 里面的文字大小2、lib-flexible+rem
2.1、安装插件 lib-flexible
npm i lib-flexible --save
2.3、在main.js中引入lib-flexible
import 'lib-flexible/flexible'
2.4、安装px2rem loader
npm install px2rem-loader
2.5、配置px2rem-loader
在build文件中找到util.js，将px2rem-loader添加到cssLoaders中，如：
const cssLoader = {loader: 'css-loader',options: {minimize: process.env.NODE_ENV === 'production',sourceMap: options.sourceMap}}const px2remLoader = {loader: 'px2rem-loader',options: {remUnit: 75}}
同时，在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {const loaders = [cssLoader,px2remLoader]if (loader) {loaders.push({loader: loader + '-loader',options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}
2.6、在vue的项目的根目录中打开 /src/HelloWorld.vue 文件，把template里面的东西全干掉，写上以下这些代码：
<template><div class="hello">适配移动端</div></template><script>export default {name: 'HelloWorld',data () {return {msg: 'Welcome to Your Vue.js App'}}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.hello {width: 200px;height: 200px;font-size: 36px;margin: 0 auto;box-sizing: border-box;border: 1px solid green;}</style>
