适配方案
移动端的适配方案：
flex + rem单位 做适配效果
flex + viewport width /vh单位 做适配效果
让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕
rem 单位
rem 是一个相对单位，1rem 就是 html 文字的大小 比如
/* 根html 为 12px */
html {
font-size: 12px;
}
/* 此时 div 的字体大小就是 24px */
div {
font-size: 2rem;
}
rem的优势：父元素文字大小可能不一致， 但是整个页面只有一个html，可以很好来控制整个页面的元素大小。
则此时 1rem 就是 35像素。
媒体查询
使用媒体查询, 可以根据不同的视口宽度, 设置不同的根字号 ，就完成了适配
语法：
@media (width:375px) {
html {
font-size: 40px;
}
}
@media (width:320px) {
html {
font-size: 30px;
}
}
综合：
<div class="box"></div>
/* 需求： iphone 678 375px html文字大小为 12*/
@media (width:375px) {
html {
font-size: 12px;
/*font-size: 37.5px; */
}
}
/* 需求： iphone 678 x 414 html文字大小为 16 */
@media (width:414px) {
html {
font-size: 16px;
/* font-size: 41.4px;*/
}
}
/* 思考一下，如果414屏幕下，一个盒子宽度沾满屏幕，高度和宽度一样大 414*414。
思考一下，如果375屏幕下，一个盒子宽度沾满屏幕，高度和宽度一样大 375 * 375。
html文字大小设置为多少？ */
.box {
width: 10rem;
height: 10rem;
background-color: pink;
}
/*目前rem布局方案中，将网页等分成10份， HTML标签的字号为视口宽度的 1/10 */
媒体查询写起来超级麻烦，而且检测不够精确，因此使用 flexible.js 这个 js文件，通过js 实时检测屏幕窗口的变化实现检测视口宽度。
有了这个js文件，可以自动检测屏幕宽度，自动修改html文字大小，这样就可以让盒子配合rem完成适配。
<div class="box"></div>
<div class="box2"></div>
<!-- 引入flexible.js 文件 检测屏幕大小， 修改html文字大小 都 这个js做了 -->
<!-- 屏幕分成10等份，每一份是 37.5 px 也就是 1rem = 37.5px; -->
<!-- 我有一个 375px 的盒子，那么写 rem 是多少？ 375px / 37.5px = 10rem -->
<!-- 我需要一个 75*75px 一个盒子，那么需要 75 / 37.5 = 2 rem? -->
<script src="./js/flexible.js"></script>
.box {
width: 10rem;
height: 10rem;
background-color: pink;
}
.box2 {
width: 0.8rem;
height: 0.8rem;
background-color: skyblue;
}
如何把设计稿的px转换为rem
less 可以把px单位转换到rem单位
Less是一个CSS预处理器, Less文件后缀是.less
扩充了 CSS 语言, 使 CSS 具备一定的逻辑性、计算能力。
Less插件:Easy Less(less文件保存自动生成css文件)
