首先，关于移动端适配，很多种方式如：媒体查询，媒体查询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 {//可以在这里边设置横屏想要的效果，比如防止手机横屏或浏览器大图查看}}
如果觉得《rem + vw 移动端适配》对你有帮助，请点赞、收藏，并留下你的观点哦！
