首页
Javascript
Html
Css
Node.js
Electron
移动开发
小程序
工具类
服务端
浏览器相关
前端收藏
其他
关于
公司注册

视窗单位vm,vh,vmin,vmax

2019年01月09日 发布 阅读(2273) 作者:Jerman

视窗单位其实出来好多好多年了,不过用的场景比较少,现在也是越来越多的浏览器支持了。electron使用vh,vw就不用担心了,chrome内核完全支持它

视窗单位

视窗(Viewport)是指浏览器实际显示内容的区域,单位主要包含4个:

  • vw : 1vw 等于视口宽度的1%
  • vh : 1vh 等于视口高度的1%
  • vmin : 选取 vw 和 vh 中最小的那个
  • vmax : 选取 vw 和 vh 中最大的那个

浏览器支持

https://www.caniuse.com/#search=vw

参考

https://drafts.csswg.org/css-values-3/#viewport-relative-lengths
http://caibaojian.com/vw-vh.html
https://www.w3cplus.com/css/simplify-your-stylesheets-with-the-magical-css-viewport-units.html

版权声明:本站文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议,如需转载,请注明出处
  • 移动端为什么要用box-sizing:border-box?

    提到Box-sizing,先前的一篇文章也提到过,其实在布局的时候很好用,可以省去很多多余的代码,至于兼容性,目前还只能在移动端应用多,因为它是CSS3的属性。大家看几个例子,应该就一目了然了。

    发布:2020-12-10 阅读(2319)

  • 使用 media query 进行 IE 的 CSS Hack

    通过 media query 进行 CSS 的 hack。在 IE 中它们可以识别出这些特殊的符号 \0,\, 以及 \9,然后结合 media query 可以更好进行样式的区分

    发布:2019-08-07 阅读(2020)

  • css3 自定义浏览器滚动条(scrollbar)

    通过-webkit-scrollbar自定义浏览器滚动条,支持webkit的浏览器可正常显示(如chrome,safari,QQ浏览器,360极速等)

    发布:2019-01-28 阅读(3167)

  • 视窗单位vm,vh,vmin,vmax

    记录下响应式布局单位(视窗单位:viewport units)的应用,最近用electron开发桌面应用,用到vh,vw还是蛮方便的.

    发布:2019-01-09 阅读(2273)

  • 妙法攻略:渐变虚框及边框滚动动画的纯CSS实现

    CSS3实现滚动边框,渐变边框

    发布:2018-12-07 来源:张鑫旭

  • CSS3 手册

    CSS3 是层叠样式表(Cascading Style Sheets)语言的最新版本,旨在扩展CSS2.1。它带来了许多期待已久的新特性, 例如圆角、阴影、gradients(渐变) 、transitions(过渡) 与 animations(动画) 。以及新的布局方式,如 multi-columns 、 flexible box 与 grid layouts。实验性特性以浏览器引擎为前缀(vendor-prefixed),应避免在生产环境中使用,或极其谨慎地使用,因为将来它们的语法和语义都有可能被更改。

    发布:2018-11-06 来源:mozilla