CSS3新单位vw，vh，vmin，vmax详解

1，vw，vh，vmin，vmax是由视窗Viewport大小来决定的，单位1，代表1%，是一种相对单位，只要是为响应式适配视窗的一种解决方案；

vw：view width（视窗宽度）的百分比，1vw代表视窗宽度的1%；

vh：view height（视窗高度）的百分比，1vh代表视窗高度的1%；

vmin：当前视窗宽度vw和视窗高度vh中较小的一个值；

vmax：当前视窗宽度vw和视窗高度vh中较大的一个值；

2，与百分比的区别：

（1）%是相对于父元素的大小设定的，而vw，vh是由视窗大小决定的。

（2）vw，vh优势在于能够直接获取高度，而%则在没有设定body的高度情况下，是无法正确获取可视区域的高度的，所以css3加入新单位是方便开发者的选择。

3，vmin，vmax的用处：

做移动页面开发时，如果使用vw，vh设置字体大小（例如10vw），在竖屏和横屏状态下显示字体大小是不一致的，而vmin，vmax是当前vw和vh中，较小值和较大值，这里就可以使用vmin和vmax，使得文字在横竖屏下面显示一致。

4，浏览器兼容性：

5，应用：

比如，弹出框大小随内容自适应；显示大图石限制其最大尺寸；实现Word文档页面效果（使用vh单位，一屏正好一页，改变浏览器窗口大小，页面大小随之变化）等。

【完】

新年flag2——每天走8000步，一个月走8000*30=24W步，一万步大约7KM，那么24*7=168公里，小米手环/手机打卡。

转载于:https://www.cnblogs.com/tangjiao/p/10362711.html

CSS3新单位vw，vh，vmin，vmax详解相关推荐

单位vw,vh,vmin,vmax的用法
vw:视窗宽度的百分比(1vw 代表视窗的宽度为 1%) vh:视窗高度的百分比 vmin:当前 vw 和 vh 中较小的一个值 vmax:当前 vw 和 vh 中较大的一个值
css新单位 vw , vh
考虑到未来响应式设计的开发,如果你需要,浏览器的高度也可以基于百分比值调整.但使用基于百分比值并不总是相对于浏览器窗口的大小定义的最佳方式,比如字体大小不会随着你窗口改变而改变,如今css3引入的新单 ...
【前端基础】整理常见的单位 px em rem % vw vh vmin vmax rpx
基本单位单位计算方式简介 px 标准像素优点兼容性最好,缺点没有弹性,对于过大过小屏幕显示效果不好 em font-size元素大小 1em等于font-size的大小(font-size默认 ...
20、CSS中单位：【px和%】【em和rem】【vw|vh|vmin|vmax】的区别
CSS中的px 和 % px (pixels) 是固定单位,也可以叫基本单位,代表像素,可以确保元素的大小不受屏幕分辨率的影响. % (percentage) 是相对单位,代表元素大小相对于其父元素或 ...
每日一练：Python爬虫爬取全国新冠肺炎疫情数据实例详解，使用beautifulsoup4库实现
Python 爬虫篇 - 爬取全国新冠肺炎疫情数据实例详解效果图展示第一章:疫情信息的下载与数据提取 ① 爬取页面数据到本地 ② json 字符串正则表达式分析 ③ 提取数据中的 json 字符串 ...
html渐变线条代码,CSS3实现线性渐变用法示例代码详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv { width:400px; height:400px; border ...
《新托业语法和词汇详解及实战试题》
<新托业语法和词汇详解及实战试题>全书PDF[链接已更] http://club.topsage.com/thread-2318192-1-1.html http://club.topsa ...
泛微oa明细表添加按钮_泛微OA 新增能：表单建模详解.doc
泛微OA 新增能:表单建模详解 Weaver Software中国上海耀华支路39弄9号(通耀路济明路路口) Weaver Software 中国上海耀华支路39弄9号(通耀路济明路路口) 邮政编码: ...
CSS3的新单位vw、vh、vmin、vmax
原文链接一.基本说明 vw.vh.vmin.vmax的含义 (1)vw.vh.vmin.vmax是一种视窗单位,也是一种相对单位.它们相对的不是父节点或者页面的根节点,而是由视窗(Viewport) ...

CSS3新单位vw，vh，vmin，vmax详解

CSS3新单位vw，vh，vmin，vmax详解相关推荐

最新文章

热门文章