vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关，取决于哪个更大和更小

例如，如果浏览器设置为1100px宽、700px高，1vmin会是较小的7px，而1vmax将是较大的11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会是较小的8px，而1vmax将会是较大的10.8px

实例1：设想你需要一个总是在屏幕上可见的元素

实例2：如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax

CSS之vmin和vmax相关推荐

深度解析使用CSS单位px、em、rem、vh、vw、vmin、vmax实现页面布局
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
CSS单位之vw、vh、vmin、vmax、%
CSS单位之vw.vh.vmin.vmax.% vm/vh:相对于视窗(Viewport)的高度和宽度. 1vh 等于1/100的视窗高度,1vw 等于1/100的视窗宽度. 视窗(Viewport) ...
弄清楚CSS单位px、em、rem、vh、vw、vmin、vmax的应用场景
1.px:绝对单位,页面按精确像素展示 2.em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值. em ...
-CSS3长度单位rem、vh、vw、vmin、vmax、ex、ch
用这几个单位就可以做自适应布局了,尤其是下面的vh,解决了高度不能使用百分比的问题,很爽. 另外,自适应除去用下面这些单位之外,还可以用width的一些新属性,fill-available.fit-c ...
CSS3新单位vw，vh，vmin，vmax详解
1,vw,vh,vmin,vmax是由视窗Viewport大小来决定的,单位1,代表1%,是一种相对单位,只要是为响应式适配视窗的一种解决方案: vw:view width(视窗宽度)的百分比,1vw ...
CSS3视窗单位vw、vh、vmin、vmax说明
vw.vh做为CSS3中的新单位,已经出来挺久的了,这里也我个人也做一下详细的总结. 说明 vw.vh.vmin和vmax是CSS3中的新单位,是一种视窗单位,也是相对单位.它们的大小都是由视窗大小来 ...
CSS3的新单位vw、vh、vmin、vmax
原文链接一.基本说明 vw.vh.vmin.vmax的含义 (1)vw.vh.vmin.vmax是一种视窗单位,也是一种相对单位.它们相对的不是父节点或者页面的根节点,而是由视窗(Viewport) ...
px,em,rem,%，vmin，vmax,vh ,vw
传统的项目开发中,我们只会用到px.%.em这几个单位,它可以适用于大部分的项目开发,并且拥有比较良好的兼容性.但是你知道吗?从css3开始,浏览器对逻辑单位的支持又提升到了另外一个境界,增加了rem ...
calc()函数及vmin，vmax，vh，vw的认识，在family里的实战运用
css的calc()函数用于动态计算长度值: 比如下面这个, font-size: calc(10px + 2vmin); 控制字体缩放. 这里的vmin(相对于视口的宽度或高度中较小的那个.其中最小 ...
#名词区别篇：px、em、rem、rpx、vh、vw、vmin 、vmax、%用法与区别
px 像素,相对长度单位,相对于显示器屏幕分辨率而言 em 相对长度单位,相对于当前对象内文本的字体尺寸. 如果当前文本字体尺寸没有设置,则相对浏览器默认字体尺寸. 特点: 1.值不是固定的 2.会继 ...

CSS之vmin和vmax

vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关，取决于哪个更大和更小

例如，如果浏览器设置为1100px宽、700px高，1vmin会是较小的7px，而1vmax将是较大的11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会是较小的8px，而1vmax将会是较大的10.8px

实例1：设想你需要一个总是在屏幕上可见的元素

实例2：如果你需要一个总是覆盖可视窗口的正方形(一直接触屏幕的四条边),使用相同的规则只是把单位换成vmax

CSS之vmin和vmax相关推荐

最新文章

热门文章