css中,vmin和vmax的用法。
vmin和vmax详解
vmin:表示选择视窗最小的那一个;
vmax:选择视窗最大的那一个;
和vw与vh一样支持calc的各种单位和运算符
如上图所示,div {height:100vmin;width:100vmin;},宽和高均选择最小的那一个视窗,可以看到这是一个以手机屏幕的宽(最小)来设定div的宽高。
同样的道理,如果需要选择最大的那一个视窗作为宽或高,那么就使用vmax即可,如下图所示。
代码为div {height:100vmax;width:100vmax;},选择设备视窗最大的那一个作为我们的宽或高,也支持calc运算。
使用vmin或vmax的好处是可以对各种不同屏幕设置相对宽高,这对于视觉效果很好,而且不会导致排版混乱,减少很多@media判断屏幕宽度的代码。例如下面的代码
lytit{max-width: calc(100vw / 3) !important;max-height: calc(100vw / 3) !important;}
这个是我的一张图片响应式代码,最大宽度和高度都设置为视窗宽度的三分之一,对于从手机屏幕320到768px的屏幕上显示很良好。
上一篇:css3中的animation和transition的不同点是?
栏 目:CSS
本文标题:css中,vmin和vmax的用法。
本文地址:http://www.wangzhanteacher.com/?m=home&c=View&a=index&aid=251
您可能感兴趣的文章
- 05-13精灵图
- 05-13flex布局
- 05-05css盒子模型详解
- 05-05flex布局中,align-content和align-items居中的区别
- 10-13flex中的align-content和align-items的区别
- 10-13animation steps属性的解释说明
- 10-06perspective用在父元素和子元素上的区别
- 10-06perspective和perspective-3d的区别详解
- 10-06transform-origin详解
- 10-05css中,vmin和vmax的用法。


阅读排行
推荐教程
- 10-06transform-origin详解
- 09-11animation打字效果案例
- 09-04css如何实现文字分散对齐
- 10-13flex中的align-content和align-items的区别
- 05-05css盒子模型详解
- 08-13网页常用配色方案
- 10-06perspective用在父元素和子元素上的区别
- 09-15css中的inherit用法详解
- 09-11animation地图案例
- 10-05css中,vmin和vmax的用法。