【JavaWeb学习】CSS (移动端开发 视口)

移动端的默认视口大小：980 CSS像素 $⟶$ 默认情况下，移动端的像素比就是 980/移动端宽度。
如果直接在网页中编写移动端代码，在980的视口下，会导致网页中的内容非常小 $⟶$ 编写移动端页面时，必须确保合理的像素比：1 CSS像素 = ？物理像素 通过改变视口的大小来改变像素比

利用 meta 标签设置视口大小
每款移动设备都有一个最佳像素比，设为这个值就好了。此时的视口大小为最佳视口。<meta name="viewport" content="width=device-width, initial-scale=1.0">

vw单位

不同的设备，完美视口的大小不同，像素比不同，所以同样个数的像素在不同设备中的显示情况不同。 $⟶$ 在移动端开发时，不能用 px 来进行布局，而是使用视口宽度 vw 。vw永远参照视口宽度计算。
100vw = 一个视口宽度，1vw = 1%视口宽度。
常见移动端设计图的宽度是 750px 或者 1125px。

vw适配

网页中的字体大小最小是12px
可以先换算好 1 font-size = ？vw，由于 1rem = 1 font-size = ？vw = ？？px，其他地方的值可以用 rem 进行换算。