美文网首页
自适应布局 — VW、VH

自适应布局 — VW、VH

作者: 柚子硕 | 来源:发表于2020-04-16 11:33 被阅读0次
vh vw 是css一种新的长度单位

vh -- 视口高度被均分为100单位的vh,即 1vh == 1%视口高度。100vh == 视口的高度
vw -- 视口宽度度被均分为100单位的vw,即 1vw == 1%视口宽度。100vw == 视口的宽度
vmin -- 取vw或vh中较小的那一个
vmax -- 取vw或vh中较大的那一个

计算公式

和使用rem单位一样,vh vw也可以通过计算函数使用,这样更加方便。
Sass函数:
以移动端PSD设计稿 宽为750px,高为1250px为例。拿dom在设计稿内的尺寸比例 乘以 100vh/vw ,得到了在当前视口的尺寸占比。

@function vw($px) {
  @return ($px / 750) * 100vw;
}
//有特殊要求也可以高度自适应,一般宽度自适应就可以了
@function vh($px) {
  @return ($px / 1250) * 100vh;
}

使用:
只要输入在设计稿内的尺寸就好,个人认为比rem操作根字体大小实现自适应要好。

div {
    height:vh(250);
    width:vw(350);
}
使用工具 postcss-px-to-viewport

安装 npm install postcss-px-to-viewport --save

在postcss.config.js添加配置:

"postcss-px-to-viewport": {
  viewportWidth: 375,   // 视窗的宽度,对应的是我们设计稿的宽度,Iphone6的一般是375 (xx/375*100vw)
  viewportHeight: 667, // 视窗的高度,Iphone6的一般是667
  unitPrecision: 3,     // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
  viewportUnit: "vw",   // 指定需要转换成的视窗单位,建议使用vw
  selectorBlackList: ['.ignore', '.hairlines'],// 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
  minPixelValue: 1,     // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
  mediaQuery: false     // 允许在媒体查询中转换`px`
}

配置完成后可以在项目组直接使用 px 单位,postcss-px-to-viewport 会转换为 vh、vw

相关文章

  • 移动端rem单位计算

    参照 移动前端自适应适配布局解决方案和比较纯css3使用vw和vh实现自适应的方法

  • 自适应布局 — VW、VH

    vh vw 是css一种新的长度单位 vh -- 视口高度被均分为100单位的vh,即 1vh == 1%视口高度...

  • css3种的vw和vh

    这里记录下css3中自适应布局单位VH,VW 1.vm: 1vm等于视口宽度的1%。 2.vh: 1vh等于视口高...

  • vue项目中使用vw/vh

    vw/vh这个单位可以根据电脑浏览器自适应vw —— 视口宽度的 1/100;vh —— 视口高度的 1/100 ...

  • vw 单位 android 4.4 下的一个小bug

    CSS3 vw 单位 100vw = 100% 视窗宽度100vh = 100% 视窗高度 这样实现自适应正方形(...

  • 大屏自适应

    一、用vw、vh 实现大屏自适应 视口单位中的“视口”,PC端指的是浏览器的可视区域。 vw:1vw 等于视口宽度...

  • css3 vw/vh rem em

    1. vw/vh vw:1vw等于视口宽度的1%vh:1vh等于视口高度的1%vh和vw是相对于适口的高度和宽度,...

  • CSS新增单位

    CSS3 新增的单位:**vh、vw、vmin、vmax** * vw 和 vh 1、1vw 等于1/100的...

  • rem + vw,vh布局

    前言首先你要知道 vw 和 rem 是什么?怎么使用?①:简单来说 vw 是视口单位,相当于把视口等分成了100,...

  • CSS实现自适应正方形

    情况1:实现固定宽高的正方形 情况2:实现自适应的正方形 方式一:vw vh1vw === 1%的宽度 方式二:将...

网友评论

      本文标题:自适应布局 — VW、VH

      本文链接:https://www.haomeiwen.com/subject/dkkayhtx.html