vw+vh+rem响应式布局

科普下：

平时很少用的css单位:

1.长度单位：

rem:相对长度单位。相对于根元素(即html元素)font-size计算值的倍数;

vw:相对于视口的宽度。视口被均分为100单位的vw;

vh:相对于视口的高度。视口被均分为100单位的vh;

vmax:相对于视口的宽度或高度中较大的那个。其中最大的那个被均分为100单位的vmax;

vmin:相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vmin;

ch:数字0的宽度;

2.角度单位（transform用到的比较多）

deg:度（Degress）。一个圆共360度;

grad:梯度（Gradians）。一个圆共400梯度;

rad:弧度（Radians）。一个圆共2π弧度;

turn:90deg = 100grad = 0.25turn ≈ 1.570796326794897rad,即1turn=1圈=360deg=400grad=2π;

视口布局的优点：宽度和高度全部自动适应！再加上rem布局的字体适应，可以解决各种屏幕适配问题！

vw、vh是基于视口的布局方案，故这个meta元素的视口必须声明。（解决宽高自动适配）

vw + vh + rem布局首先还是

<meta name="viewport" content="width=device-width,initial-scale=1.0">

其次：直接上代码

<template>

  <div class="mobile_box">

    <h1>移动端测试布局使用vw+vh+rem</h1>

    <div class="test_port">

        <p>测试视口</p>

    </div>

  </div>

</template>

<script>

export default {

  data() {

    return {

    }

  },

  methods: {

  }

}

</script>

<style scoped>

.test_port {

  width: 30vw;

  height: 50vh;

  line-height: 50vh;/*讲白了就是可视窗口宽高单位 + 字体用rem等比缩放*/

  font-size: 1rem;

  text-align: center;

  font-weight: bold;

  border:1px dashed #ccc;

  background-color: rgba(255, 255, 255, 0.8);

}

h1 {

  text-align: center;

}

</style>

总结：代码这样的东西没必要完全按照别人的来，怎么合适怎么方便怎么效率好怎么来咯。

另外附上媒体查询@media

@media only screen and (max-width: 1600px) and (min-width: 1280px){

    html{

      font-size: 14px;

    }

  }

  @media only screen and (max-width: 1280px) and (min-width: 960px){

    html{

      font-size: 12px;

    }

  }

  @media only screen and (max-width: 960px){

    html{

      font-size: 10px;

    }

转自：https://www.cnblogs.com/lhl66/p/9475531.html

巴特西

vw+vh+rem响应式布局

最新文章

热门文章