移动端的适配

1.什么是移动端适配

移动端适配就是为了让页面可以在不同的屏幕尺寸下兼容运行，使内容大小这些能够动态的改变

2.适配原理

动态修改html的font-size的大小，而页面元素大小以rem为单位(rem是相对于html的font-size大小，若font-size:16px ,则1rem=16px ) ,这样我们只要动态的修改html的font-size的值，就可以实现移动端的适配了

3.适配的方案

方案一:使用vw或者vh单位，100vw代表整个屏幕的宽度，100vh代表整个屏幕的高度

平常开发都是基于谷歌chorme开发的，chrome并不支持font-size小于12的字体。所以可以让font-size大于12,在以上基础上将结果放大100倍，然后写样式的时候再除以100。

// 当需要适配的高度是272px,设计图的宽度是320px的，默认html的font-size为16px
// 使用less 可以计算height是多少rem
height: 272 / 16 / 100 rem;

// 接下来我们需要将font-size单位转化为vw，使得在不同屏幕下都可以适配

html{
    // 这里先计算了1vw是多少px，然后得到16px占了多少vw
    font-size: 16px / (320 / 100vw) * 100;
}

要在head标签中写入一个meta标签

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

作用是让layout viewport = visual viewport,用户也不可缩放页面

方案二: 使用css的媒体查询

<style>
// 在我们屏幕上 并且最大的宽度是800px 设置我们想要的样式
// 小于等于800px
// 以下为一个例子，意思是 当屏幕大小小于等于800px，则将html的font-size修改
@media screen and (max-width:800px){
    html{
        font-size: 50px;
    }
    
}
// 下面的则是表示大于等于800px 才会执行里面代码
@media screen and (min-width:800px){
    html{
        font-size: 50px;
    }
    
}
</style>