前端大屏展示框架搭建（四）

和rem类似。通过一个px转vw、vh的换算方法，实现动态响应式大屏页面。有点类似iOS的autoLayout了。

换算方法

具体要根据设计图定，宽高值而已

1
2
3
4
5
6
7
8
9
10
11
$ui-width: 1920; //设计图的基准宽
$ui-height: 1092; //设计图的基准高

@function vw($px) {
  @return $px / $ui-width * 100vw;
}

@function vh($px) {
  @return $px / $ui-height * 100vh;
}

使用

1
2
3
4
5
6
.app-head {
  height: vh($headHeight);
  line-height: vh($headHeight);
  width: 100%;
  background-color: $headBg;
}

直接在scss中调用vw、vh方法就行，这里有个地方要注意的，就是用到这2方法的地方，定义的变量后面不需要跟单位了，直接数字就行，例如上面的 $headHeight ，写法如下就行：

1
$headHeight: 72;

缺点

  • 每次都要引入vw、vh方法，就算封装在一个文件里面了，也需要在对应页面的scss里面引入
  • 页面布局里所有的px都需要用vw、vh替换
  • 支持IE10以上

工程代码

整个项目的代码在下面地址，详见 layout 里面的 vwLayout

大屏开发框架工程代码