vw vh vm CSS长度单位

vw  相对于视口的宽度。视口被均分为100单位的vw(即浏览器可视区) 100vw = 可视区宽度

vh  相对于视口的高度。视口被均分为100单位的vh(即浏览器可视区) 100vh  = 可视区高度

vmin/vm 相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin(即vm)

参考:

视区相关单位vw, vh..简介以及可实际应用场景

结论:vw, vh视区大小相关单位只适用于非定位元素的高度相关属性上! //zxx: 高度相关属性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等

很重要的运用场景是:

1.手机适应屏幕尺寸时,如需订列表缩略图的宽高时,如(1:1)且可自适应,

.img-wrap{
width: 30vw;
height: 30vw;
}

2.活动页,分享等单页面

body{
height:100vh;
}
时间: 2024-08-25 21:47:20

vw vh vm CSS长度单位的相关文章

视区相关单位vw, vh ,vm,CSS/CSS3长度、时间、频率、角度单位大全

一.CSS长度值 em 相对于父元素的字体大小 ex 相对于小写字母"x"的高度 gd 一般用在东亚字体排版上,这个与英文并无关系 rem 相对于根元素字体大小 vw 相对于视窗的宽度:视窗宽度是100vw vh 相对于视窗的高度:视窗高度是100vh vm 相对于视窗的宽度或高度,取决于哪个更小 ch 相对于0尺寸 px 相对于屏幕分辨率而不是视窗大小:通常为1个点或1/72英寸 in inch, 表英寸 cm centimeter, 表厘米 mm millimeter, 表毫米 p

px、em、rem、vh、vw、vm等CSS单位

传统的项目开发中,我们只会用到 px.%.em这几个单位,可以适用于大部分的项目开发,并且拥有比较好的兼容性. 从CSS3开始,浏览器对于逻辑单位的支持已经提升到了另一个境界,新增了 rem.vh.vw.vm等新的长度单位,利用这些新的单位可以开发出比较好的响应式页面,随之覆盖多种不同分辨路的终端.包括移动设备等. 一.相对长度单位 相对长度代表着以其他距离为单位的一种尺寸.是相对的. 1.emem相对单位,基准点为父节点字体大小(继承父元素的字体大小),如果自身定义了 font-size按自身

css中px em rem vw vh vmax vmin等单位的区别--转载

px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. rem:相对单位,可理解为"root em", 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持. (另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem

css中vw,vh单位对于UC的兼容性问题

vw,vh单位在移动端浏览器不兼容,在网上找半天也没找到什么官方的解决方法:我就试了一下在使用到vh的单位之前添加一个用px定义的样式: 如: 当浏览器不是别100vw单位的时候 就会赋给px单位的样式:

CSS长度单位详解

序言 长度单位可以总体的分为绝对长度单位和相对长度单位.CSS中最为大家熟知的无疑是px和em,但与此同时还存在pt, rem, vw, vh等其他计量单位,使用好它们可以大大增长我们的开发效率.本篇文章试图整理在前端开发中用到的CSS单位和其应用场景. px——像素 px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在800×600分辨率下,要占屏幕宽度的1/8,但在1024×768下,则只占约1/10.所以

视区相关单位vw, vh..简介以及可实际应用场景

一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰你”是不一样的.正好,机缘巧合,最近又与这两个单位想见.大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局.想到这里,自己不由得小兴奋了下,于是决定抽时间研究研究(虽然最近整iPad忙得屁股尿流~~). 然而…… //zxx: 先卖个关子,一点一点唠叨来~~ vw, vh这

视区相关单位vw, vh..简介以及可实际应用场景——张鑫旭

一.N多的唠哩唠叨 CSS3中一些新的单位早在去年春暖花开的时候就介绍了,参见:CSS长度值及时间.频率.角度单位.显然,其中就提到了本文要感叹的单位vw, vh,见下图: 不过“我看见你”和“我触碰你”是不一样的.正好,机缘巧合,最近又与这两个单位想见.大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局.想到这里,自己不由得小兴奋了下,于是决定抽时间研究研究(虽然最近整iPad忙得屁股尿流~~). 然而…… //zxx: 先卖个关子,一点一点唠叨来~~ vw, vh这

CSS3自适应字体大小(vw vh)

viewpoint css3提供了一些与当前viewpoint相关的元素,vw,vh,vmin, vmax等. “viewpoint” = window size vw = 1% of viewport width 1vh = 1% of viewport height 1vmin = 1vw or 1vh, 最小 1vmax = 1vw or 1vh, 最大 兼容性:chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+ DEMO地址:http://qi

还在用rem做移动端适配?最新移动端适配方案vw,vh了解一下!

vw,vh都是相对于屏幕视口的单位. vw:相对于视口的宽度.视口被均分为100单位的vw: vh:相对于视口的高度.视口被均分为100单位的vh: vmax:相对于视口的宽度或高度中较大的那个.其中最大的那个被均分为100单位的vmax: vmin:相对于视口的宽度或高度中较小的那个.其中最小的那个被均分为100单位的vmin: 解释完相关观念,下面就来说说具体的适配方案: 一般UI给的设计稿都是采用750X1334的,因此可以使用sass来编写一个函数: 1 $containerWidth: