移动端布局原理
三个视口
1.布局视口，面向开发者，不会随着设备发生变化。一般用width表示
2.视觉视口，面向用户，随着设备发生变化。用device-width表示
3.理想视口。就是移动端和自适应页面。用device-width表示
在理想视口下网页原比例1：1显示，用户在浏览页面时不需要拖动页面来查看完整信息。
在VSCode上自动生成的代码就有<meta name="viewport" content="width=device-width, initial-scale=1.0" />initial-scale=1.0就是原比例1：1显示
值得计算方式
1.vw计算方式
视觉视口的像素375px ,用 100vw 表示 100vw = 375px，1vw = 100vw/100=375px/100= 3.75px，所以1vw=3.75px
2.rem计算方式
当设置html {font-size: 100px}
1rem = 100px
移动端布局
当屏幕小于320px时字体大小为12px@media (max-width:320px) {
body{
font-size: 12px;
}
}
当屏幕大于640时字体大小为16px@media (min-width:640px) {
body{
font-size: 16px;
}
}