html 自适应单位vw,CSS3响应式自适应尺寸视窗单位vw、vh详解

vw、vh、vmin、vmax是CSS3新增的视窗单位，同时也是相对单位，它相对视窗(Viewport)大小的百分比。

什么是视窗？

视窗即Viewport，是浏览器实际显示内容的区域，不包括工具栏、地址栏、书签栏。

视窗单位说明

vw - 视窗宽度的百分比，如1vw即浏览器可视窗口宽度的1%，10vw即窗口宽高的10%

vh - 视窗高度的百分比，如1vh即浏览器可视窗口高度的1%，10vh即窗口高度的10%

vmin - 选择当前 vw 和 vh 中的最小值，最小值被均分为100单位的vmin

vmax - 选择当前 vw 和 vh 中的最大值，最大值被均分为100单位的vmax

示例：

1、vw、vh

浏览器可视窗口宽度1920px，可视窗口高度960px，那么

10vw = 1920 * 10% = 192px

10vh = 960 * 10% = 96px

2、vmin、vmax

CSS代码

h1 {

font-size:1vmax;

}

h2 {

font-size:1vmin;

}

h1：1vmax = 1920 * 1 / 100 = 19.2px

h2：2vmin = 960 * 1 / 100 = 9.6px

意义：

做移动页面开发时，如果使用 vw、wh 设置字体大小会导致字体在手机竖屏和横屏下显示的大小不一样，而由于 vmin 和 vmax 分别是取当前vw、vh中最小的值或最大的值，就可以使得文字大小在横竖屏下保持一致。

除了字体大小，还可以应用在宽度的尺寸上，实现元素的响应式自适应化处理。

浏览器兼容性

PC端浏览器

2013年2月：Chrome 26版本起完美支持

2013年1月：Firefox 19版本起完美支持

2013年10月：Safari 6.1版本起完美支持

2013年7月：Opera 15版本起完美支持

坑货IE10 ~ Edge版本部分支持，不支持 vmax，同时 vm 代替 vmin

移动端浏览器

2013年12月：Android 4.4版本起完美支持

2014年9月：IOS8版本起完美支持

html 自适应单位vw,CSS3响应式自适应尺寸视窗单位vw、vh详解相关推荐

html并列图片自适应后错位,css3响应式图片列表高度不同导致页面错位
响应式图片列表高度不同导致页面错位前端html代码分析由于是响应式布局,不能用css固定图片的宽高,从代码上看,这里每个图文用的是li,而且每4个li是一排,我们只需要对第1个li 第5个li 第 ...
【响应式Web前端设计】CSS 定位详解
文章目录 1 position 属性的作用 2 static 属性值 3 relative,absolute,fixed 3.1 relative 属性值 3.2 absolute 属性值 3.3 f ...
java 自适应屏幕_自适应屏幕的CSS响应式布局设计技巧总结
摘要:这篇CSS教程栏目下的"自适应屏幕的CSS响应式布局设计技巧总结",介绍的技术点是"css响应式.响应式布局.响应式.自适应.CSS.设计",希望对大家开 ...
转自CSDNattilax的专栏：自适应网页设计跟响应式设计的区别跟原理and实践总结...
响应式Web设计(Responsive Web design)的理念是: 1 #-----------自适应布局VS响应式布局 2 设计思路Mobile First 2 #---手机and平板分辨率 ...
wap商城源码php,ecshop商城源码html5手机wap响应式自适应php网站模板带后端dossy
购买须知: (1)因送吗安装费用的调整,故需要安装的用户请先联络我们!无联络硬拍的慎重! (2)联络好了安装的用户请自行备好服务器域名等... (3)素质低下,贪小便宜,追求完美者请绕道! (4)手动 ...
超美响应式自适应引导页带音乐播放器源码
介绍: 超美响应式自适应引导页带音乐播放器源码,纯html源码,右键记事本修改即可~自带音乐播放器,自带自动打字特效,自带网站存活时间,自带随机ACG背景,自适应响应式网页网盘下载地址: http: ...
分享一套响应式自适应公司网站官网源码，带文字搭建教程
分享一套响应式自适应公司网站官网源码,带文字搭建教程.需要源码学习可私信我. 技术架构 PHP7.2 + nginx + mysql5.7 + JS + CSS + HTML cnetos7以上 + ...
最新基于ThinkPHP5.0+BootStrap框架开发的自适应WAP手机端响应式界面博客系统PHP源码
<h2>源码介绍</h2> 分享一款基于ThinkPHP5.0框架开发的自适应WAP手机端响应式界面博客系统PHP源码,前端界面采用BootStrap框架设计,使得博客系统界面 ...
(自适应移动设备)最新响应式个人博客自媒体文章博客资讯类网站源码织梦模板
介绍响应式自适应个人博客自媒体文章资讯类织梦模板,蓝色风格,该模板可作为新闻资讯展示类.个人自媒体网站类.个人博客类网站使用,这套模板使用范围极广,不仅仅局限于一类型的企业,你只需要把图片和产品内容 ...

html 自适应单位vw,CSS3响应式自适应尺寸视窗单位vw、vh详解

html 自适应单位vw,CSS3响应式自适应尺寸视窗单位vw、vh详解相关推荐

最新文章

热门文章