【CSS】移动端适配
移动端适配怎么做？
适配的目的是在屏幕大小不同的终端设备拥有统一的界面，让拥有更大屏幕的终端展示更多的内容。
meta viewport (视口)
移动端初始视口的大小默认是980px，因为世界上绝大多数PC网页的版心宽度为980px ，如果网页没有专门做移动端适配，此时用手机访问网页旁边刚好没有留白，不过页面缩放后文字会变得非常小。
为了解决页面缩放的体验问题，在网页代码的头部，加入一行viewport元标签。这里的device-width告诉浏览器，将视口的宽度设置为设备宽度(这个宽度是人为预设的,不设的话就是980px)。
属性含义：
- initial-scale：第一次进入页面的初始比例
- minimum-scale：允许缩小最小比例
- maximum-scale：允许放大最大比例
- user-scalable：允许使用者缩放， 1 or 0 (yes or no)
<metaname="viewport"content="width=device-width, initial-scale=1.0"
>
图片适配
img {max-width: 100%;}此时图片会自动缩放,同时图片最大显示为其自身的100% (即最大只可以显示为自身那么大)。
为什么不用 img{width: 100%;}？当容器大于图片宽度时，图片会拉伸变形变模糊。
媒体查询
针对不用的设备提前为网页设定各种CSS样式。CSS3中的Media Query模块，自动检测屏幕宽度，然后加载相应的CSS文件语法举例@media screen and (min-width:1200px){ body{background-color: red;}当屏幕宽度大于1200px时，背景色变为红色。
动态 rem 方案
和媒体查询配合，实现响应式布局。
px、em、rem 有什么不同？
px是pixel (像素) ，是屏幕上显示数据的最基本的点，在HTML中，默认的单位就是px。
em是一个相对大小。相对于父元素font-size的百分比大小。
rem是相对于根元素的font-size。
<style>* {padding: 0;margin: 0;}.w-550px {width: 550rem;height: 100px;background-color: rgb(113, 230, 191);}.w-750px {width: 750rem;height: 100px;background-color: rgb(239, 198, 94);}
</style><body><div class="w-550px"></div><div class="w-750px"></div><script>function setRem() {const scale = document.documentElement.clientWidth / 750document.documentElement.style.fontSize = scale + 'px'}setRem()window.onresize = setRem</script>
</body>
