移动端布局原理

移动端布局原理

三个视口

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; } }