css的视口单位vw、vh的使用

html-css08

css的视口单位vw、vh的使用,第1张

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

根据CSS3规范，视口单位主要包括以下4个：

移动端的网页应该设置viewport（视口或者视区），比如：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

把它放到head区即可。具体的意思你可以自己搜viewport。

电脑端的浏览器会自动忽略这个。

范围一般就分手机端，平板和电脑显示器，

手机端不管多少寸的都套用一个范围，平板套用一个范围，然后显示器套用一个范围就好。

响应式布局已经有现成的框架，比如bootstrap，可以直接拿来套用