关于Web纯移动端适配各种手机型号的心得

em与rem的区别
Web纯移动端适配类型
第一种类型的适配
第二种类型的适配
第一次写博客，不喜勿喷，请见谅！！！

em与rem的区别

在讲如何进行适配之前，我觉得很有必要先了解一下em和rem，作为一名前端开发者，不能只停留在px上。
em和rem相对于px来说，它们更加具有灵活性，它们是相对长度单位，也就是说长度不是一成不变的，它们更适用于响应式布局。

①如果子元素字体大小是em，那么它是相对于父元素的font-size的。
②如果元素的width、height、padding、margin、top、left、bottom、right使用的是em的话，那么它是相对于本元素的font-size。

rem

rem是全部元素的长度都相对于根元素html的fon-size的。

Web纯移动端适配类型

第一种是手机屏幕必须显示完整个页面，无滚动条，height和width都是100%。
第二种是width是100%、height超过屏幕高度的页面，有滚动条。

关于 本文章里的所有代码，都是基于Vue.js的。

第一种类型的适配

对于这种类型的适配，使用的单位是em。
需要根据设计稿的高度与屏幕的高度得出比例，然后乘以预先设好的font-size。话不多说，直接上代码…

html的head头设置

//index.html
//设置head
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no">
</head>

设置初始font-size

//App.vue
//设置id为app的div的初始font-size为100px
<style lang="scss">
*{
    padding: 0;
    margin: 0;
    touch-action: pan-y;
    #app{
        font-size: 100px;
    }
}
</style>

获取屏幕与设计稿的高度比例，然后修改初始font-size

//App.vue
//假设设计稿为750*1340
<template>
    <div id="app" ref="app">
        <router-view></router-view>
    </div>
</template>
<script>
import Footer from "./components/Footer/Footer";
export default {
    data() {
        return {
            beishuH: 1, //初始比例为1
            scrollH: 1340 //初始屏幕高度为1340px
        };
    },
    mounted(){
    	//页面加载完成时获取屏幕高度scrollH
        if (document.compatMode == "BackCompat"){
            this.scrollH=Math.max(document.body.scrollHeight,document.body.clientHeight);
        }else{　　　
            this.scrollH=Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight);
        }
        //获取比例
        this.beishuH=this.scrollH/1340;
        //获取元素
        var app=this.$refs.app;
        //获取font-size
        //app.style.fontSize这种获取方式只适用于获取内联样式的css
        var text=window.getComputedStyle(app,null)["font-size"]; //100px
        var val=text.replace("px","");
        app.style.fontSize=(val*this.beishuH)+"px";
    },
    components:{
        "footer-container":Footer
    }
}
</script>

子组件Footer的样式
在样式的设置上，height需要通过em作为单位来设置，比如2.2em就是2.2乘以当前元素的font-size来得出具体的px。
至于width需要分两种情况：

①元素处于居中或者两边的位置
这种情况可以该元素的宽度单位可以为em，也可以设置为百分比
②元素需要自适应、铺满
这种情况只能使用百分比了
下面这个例子是第②种里包含了第①种

//Footer.vue
//通过em作为单位来设置height，width一般通过百分比来设置。
<template>
    <div class="footer-container">
        <div class="dingdan">
            <router-link to="/order" tag="div"><div></div>订单页面</router-link>
        </div>
        <div class="me">
            <router-link to="/me" tag="div"><div></div>我的页面</router-link>
        </div>
    </div>
</template>
<script>
export default {
   
};
</script>
<style lang="scss" scoped>
.footer-container{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 0.98em;
    display: flex;
    justify-content: space-around;
    div{
        width: 50%;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        div{
            font-size: 0.24em;
            color: #888;
        }
        .router-link-active{
            color: #008aff;
        }
    }
    .dingdan{
        div{
            div{
                background: url(../../assets/images/goupiao.png) no-repeat;
                background-size: 100% 100%;
                width: 2em;
                height: 2em;
            }
        }
        .router-link-active{
            div{
                background: url(../../assets/images/goupiao-action.png) no-repeat;
                background-size: 100% 100%;
            }
        }
    }
    .me{
        div{
            div{
                background: url(../../assets/images/me.png) no-repeat;
                background-size: 100% 100%;
                width: 2em;
                height: 2em;
            }
        }
        .router-link-active{
            div{
                background: url(../../assets/images/me-action.png) no-repeat;
                background-size: 100% 100%;
            }
        }
    }
}
</style>

第二种类型的适配

这种类型的适配是最好做的，使用的单位是rem。
只需要设置html字体大小就可以了。
rem单位是相对于html的字体大小来计算的。

window在onload时设置html的font-size

//index.html
//设置html的font-size
//假设设计稿的宽度为750px，屏幕宽度为750px，那么1rem=100px
<script type="text/javascript">
	window.onload=function(){
		document.documentElement.style.fontSize=(document.documentElement.clientWidth/750)*100+"px";
	};
</script>

组件样式的设置
根据设计稿，以rem为单位设置元素的height和width，如果元素的宽度是需要整个屏幕的宽度，则只需要设为100%就好了。
对于position为absolute的，它的top和left也是用rem来控制。

//main.vue
<template>
    <div class="main-container" id="wrapper">
        <span class="total">{{total|numFilter}}</span>
        <span class="money">{{money}}</span>
    </div>
</template>
<script>
export default {
    data(){
        return{
            total:1234.5678,
            money:100,
        }
    },
    filters: {
        numFilter(value) {
            return parseFloat(value).toFixed(2);
        }
    }
}
</script>

<style lang="scss">
.main-container{
    background: url(../assets/bg.png) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 33.86rem;
    position: relative;
    overflow-x: hidden;
    .total{
        font-family: "宋体";
        color: #e56362;
        font-size: 1.03rem;
        font-weight: 700;
        position: absolute;
        top: 9.7rem;
        left: 0.4rem;
    }
    .money{
        font-family: "楷体";
        color: #da5e5c;
        font-size: 0.74rem;
        font-weight: 700;
        position: absolute;
        top: 9.7rem;
        left: 4.8rem;
        display: block;
        width: 1.3rem;
        text-align: center;
    }
}
</style>

在这里需要注意的一点就是，尽量不要使用position:relative，有可能导致适配出错、布局错乱。因为相对定位在相对的时候元素已经存在距离，这部分的距离的单位是px而不是em或者rem，所以会有问题。

第一次写博客，不喜勿喷，请见谅！！！

来源：CSDN

作者：yaozitong

链接：https://blog.csdn.net/yaozitong/article/details/89737528

标签

移动互联网终端

软件

font-size