rem在网页布局中的应用

在做网页的时候经常要考虑到屏幕的尺寸，以往我们都是使用百分比来适应屏幕的大小，但是这样经常用于改变盒子的宽度，而盒子的高度是保持不变的，看起来就极不协调，那么有没有根据屏幕大小进行等比缩小的方法呢？答案是有的。说下我在一个VUE项目中的解决办法吧，样式是使用scss来编码的，浏览器的默认字体大小是16px,所以综上所述可得：

@function w2h($size) {
  @return $size/16*1rem;
}

我们可以把上面这段换算代码写在base.scss文件中，这样可以方便在其他页面中引用。列如：width :w2h(200);height:w2h(400);

这样就将宽高换算成以rem为单位的值，当屏幕大小改变的时候也能宽高也能适应屏幕。