rem + vw 移动端适配

首先，关于移动端适配，很多种方式如：媒体查询，媒体查询media+rem,js+rem等都可以完成适配，个人最近写移动端demo的时候发现rem+vw的适配真的很好用，特此来简单总结一下基本的用法

1、先介绍一下rem和vw两个单位以及和他们相近单位em，vh（此处为个人理解）

        1）rem是一个动态单位，它的大小跟随html的font-size大小改变而改变，它与em不同，em是跟随父级元素的font-size大小而改变的，而rem不跟随父级元素的font-size大小而改变的

        例如：

html{
    font-size:100px;
}

p{
    font-size:0.2rem;//此处的0.2rem等于0.2*100 = 20px
}

        2) vw和vh也是一个动态单位，他们相对的是一个网页可视窗口的单位；1:100的关系，如果我们设置1vw也就是可视窗口宽的百分之一，1vh是可视窗口高度的百分之一，这就像是百分比布局，但它们不同的是，百分比相对于的是父级，而vw,vh相对的只是浏览器的可视窗口

        例如：

div{
    width:100vw;
    height:100vh;
    background:red;
    // 这样设置毫无疑问div充满的整个窗口
}

2、利用rem+vw的移动端适配

        我们直接看案例：

        

由于100vw = 整个可视窗口的宽度 也就是等于390px，所以运算之后1px=0.2564102564102564vw

而我们想要的是设置html的font-size为100px，也就转换成了25.64102564102564vwv

html{
    // font-size: 100px;
    font-size: 25.64102564vw;// 相当于100px
}

之后的无论我们切换哪个手机的尺寸大小，我们的宽度不再是390，但font-size依旧是25.64102564102564vw，也就说明 25.64102564102564 = 100/当前宽度 * 100 当宽度变小或变大，那么25.64102564102564vw代表的大小也将变大或变小，对应的也就不是100px了，这就是我常用的移动端适配方案，觉得很好用，在元素中设置大小都使用用rem单位，才能有自适应大小哦

分享一个移动端项目常用的防止横屏的操作

@media only screen and (orientation: landscape) { // 横屏
    html {
      //可以在这里边设置横屏想要的效果，比如防止手机横屏或浏览器大图查看
    }
}