码迷,mamicode.com
首页 > Web开发 > 详细

CSS3中的vh、vw及其应用场景

时间:2018-12-01 18:44:29      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:分辨率   放大   就是   移动设备   灵活   网页   自身   meta   掌握   

需求:我们项目的需求是

一、vh   vw

vw和vh是相对于视口(viewport)的宽度和高度。由于现在移动设备的屏幕尺寸之差别,如果仍然根据屏幕的物理分辨率来设计网页,效果很难统一,因此html5和css3引入视口的概念来代替显示器的物理尺寸。通过在meta标签上的设置,视口的长宽可以跟设备的物理分辨率相等,也可以不相等(以便手机上可以实现用两个手指来放大会缩小页面),可根据需要灵活掌握。在PC端中,视口的长宽则是跟浏览器窗口的物理分辨率相等的。

   1vw等于视口宽度(viewport width)的百分之一,也就是说100vw就是视口的宽度;

  1vh等于视口高度(viewport height)的百分之一。

  (字体也可以设置)

 二、应用

解决父级无高  ,设置自身固定高值又不能兼容所有设备,设置百分比无效,此时用vw设置可完美解决,兼容各种设备。

CSS3中的vh、vw及其应用场景

标签:分辨率   放大   就是   移动设备   灵活   网页   自身   meta   掌握   

原文地址:https://www.cnblogs.com/DZzzz/p/10049969.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!