H5页面移动端背景图以及文字适配方法

H5页面适配的方法

背景的适配
给页面设置背景图，因为适配不同的设备（设备屏幕分辨率不同），所以再给背景图宽高的时候不能全部给100%
背景图（ui设计图）的比例是固定的，这里举例750px*1468px,如果给背景图设置为

background-size: 100% 100%;

那么背景图就会完全填充到整个屏幕，当屏幕的比例不同于你设计图的比例的时候，你的背景图就会有拉伸现象（背景变形）
为了让背景不变形有两种方法
固定宽填充整个屏幕，让高自适应

background-size: 100% auto;

固定高填充整个屏幕，让宽自适应

background-size: auto 100%;

这两种方法可以保证图片是不变形的，但是根据屏幕的比例不同，背景图会有不同程度的裁切或者背景不能完全覆盖整个屏幕的现象，所以一般会采用固定宽，让高自适应的方法（背景上下的内容一般会比较少，裁切的情况不至于裁到背景的主要内容）

同样的，背景图里切出来的独立的元素用一样的方法操作，固定宽或者固定高，记得和背景图保持一致

当你要固定一个独立元素到背景图的特定位置的时候

.featherLeftTop {
        width: 11.47%;
        //height: 9.75%;
        position: relative;
        //top:55px;
        //top: calc(55 * 100vw / 750 );
        top:calc(200 * 100vw / 750);
        left: 13.33%;
        animation: fly1 3s infinite linear;

这里用到calc属性根据你图片的裁切情况，移动某个独立元素的位置，比如下图，不论图片怎么裁切，我就要固定到这个位置，仅仅用top: px 或者
top:% 无法实现，所以用到calc属性
这里100vw是你屏幕的宽度，750是设计图的宽度 100vw / 750就是你设计图随屏幕缩放的比例了，200是你在屏幕宽度750下，调整元素到合适位置的距离，这个距离* 缩放比例就可以将元素死死的固定在你想要的位置了，当然这是背景图位置为

 	background-position: top;
    background-size:100% auto;

的情况，也可以设置为bottom 需要另外的计算公式，千万不要设置为center
计算起来跟麻烦很麻烦

再来看下字体的适配
我这次用到的是媒体查询配合rem使用即

@media screen and (min-width:300px){
    html{
        font-size: 12.24px;
    }
}

rem是相对于根元素的字体大小的单位，也就是我设置根元素大小为12px,那么当我在页面中使用1rem，就相当于12px 2rem = 24px，所以当你给不同的屏幕设置不同的根元素大小的时候，你的字体也就会相应的变化了

@media screen and (min-width:300px){
    html{
        font-size: 12.24px;
    }
}

@media screen and (min-width:330px){
    html{
        font-size: 13.47px;
    }
}
@media screen and (min-width:360px){
    html{
        font-size: 14.7px;
    }
}
@media screen and (min-width:390px){
    html{
        font-size: 16px;
    }
}
@media screen and (min-width:420px){
    html{
        font-size: 17.14px;
    }
}
@media screen and (min-width:450px){
    html{
        font-size: 18.36px;
    }
}
@media screen and (min-width:480px){
    html{
        font-size: 19.6px;
    }
}
@media screen and (min-width:510px){
    html{
        font-size: 20.8px;
    }
}
@media screen and (min-width:540px){
    html{
        font-size: 22px;
    }
}
@media screen and (min-width:570px){
    html{
        font-size: 23.26px;
    }
}
@media screen and (min-width:600px){
    html{
        font-size: 24.5px;
    }
}
@media screen and (min-width:630px){
    html{
        font-size: 25.7px;
    }
}
@media screen and (min-width:660px){
    html{
        font-size: 26.9px;
    }
}
@media screen and (min-width:690px){
    html{
        font-size: 28.16px;
    }
}
@media screen and (min-width:720px) {
    html {
        font-size: 29.38px;
    }
}
@media screen and (min-width:750px){
    html{
        font-size: 30.56px;
    }
}

上面的是我在这个项目中设置的档位，这个档位要根据你们设计图设计的来设置，设计图设置750px，整行可以放下24个字
那么设置根元素为750 / 24 = 31.25 px，写页面直接给字体设置1rem就可以了 这是满足屏幕是750px的情况，剩下的你想设置的档位依次类推就好了
最低我设置了屏幕尺寸为300px，一共16个档位，最后一档300 / 24 = 12.5px
中间的用计算器自己算吧，这样设置好后，字体就可以根据你的屏幕尺寸变换大小了

大概的关于适配的就这样了，我还做给一个简单的h5，里面适配字体我直接根据100vw / 每行占据的字体个数 好像也可以 用在上面就是100vw / 24 = 4.16vw

note:calc属性是带单位计算的，你计算完后的单位需要是px,否则会不生效。