移动端入门知识（2）

一、单位（续集）

我们大家都知道盒子的宽度可以设置为100%，并且会生效；如果我们高度设置为100%会生效吗？这个我们大家可以去尝试一下，答案是不能的。

想把盒子的高度设置为100%有两种方法：

1.就要用绝对定位和固定定位中的一个

position: fixed;

/* position: absolute; */

width: 100%;

height: 100%;

2.用vw和vh单位

width: 100vw;
height: 100vh;

下面就让我来介绍一下vw和vh吧！

二、vw和vh

1.移动端布局

• 移动端布局---flex布局
• 为了实现可以适配移动端，页面元素可以宽度和高度等比例缩放
• 需要移动端适配一下方案：

        rem

        市场比较常见

1. 需要不断修改html文字的大小
2. 需要媒体查询media
3. 需要flexible.js

        将来趋势

1. 省去各种判断和修改

        代表：B站，小米等官网

2.vw和vh是什么？

vw和vh是一个相对单位（类似em和rem相对单位）

vw是：viewport width        视口宽度单位

vh是：viewport height        视口高度单位

相对视口的尺寸计算结果

1vw=1/100视口宽度

1vh=1/100视口高度

例如：网页的视口是750px，

750px<==>100vw

7.5px<==>1vw

1px<==>0.13333333vw

100px<==>13.3333vw

当我们把font-size的值写成13.3333vw时非常不美观和不方便，因此我们可以优化一下：

html{ font-size：calc ( 100vw / 750 * 100);}这样就美观很多了，calc是自动运算哦

这是写移动端的一种方式；