CSS设置动态宽度的方法

网上找到三种方法：\

一、使用cumputed

首先你务必看Vue的官方文档。涉及到的基础知识有：
绑定内联样式的使用
computed的使用

文档写的都是基础使用。那么在项目实战中如何使用，两步就能实现，下面提供一个参考方案：
需求场景：获取当前手机屏幕高度，设置container div的可滚动区域范围。

step1: 添加样式绑定

<div class="container" :style="{height: scrollerHeight}"></div>

step2: 添加属性计算

在computed里添加属性计算。记住 scrollerHeight 不需在data进行声明。
computed是啥？请看看computed的使用

computed: {
    // 滚动区高度
    // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
    scrollerHeight: function() {
      return (window.innerHeight - 46 - 50) + 'px';
    }
  }

参考：Vue如何设置动态宽度高度或者动态样式\

二、根据父容器设置宽度

如果根据父容器设置宽度，则可以将高度设置为0，并将填充-底部设置为百分比，该百分比将根据当前宽度计算：

.img-div {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    img {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
}

这在所有主要浏览器中都能很好地工作。

参考：设置高度等于动态宽度（CSS方法）

三、calc()

css 中可以使用 calc() 来动态设置宽高，但是，在表达式中运算符的前后必须要有空格

height:calc(100vh - 80px)

css3提供了calc（）方法。calc()能让你给元素的做计算，你可以给一个div元素，使用百分比、em、px和rem单位值计算出其宽度或者高度

其次,使用 rem 充当基本单位，calc() 函数能够用来创建一个基于视口的栅格。我们可以设置根元素的字体大小为视口宽度的一部分。

html {
    font-size: calc(100vw / 30);
}

这就使得 1rem 为视口宽度的 1/30。在页面上的任何文本，将会根据你的视口自动缩放.从而到达窗口自适应。