本文探讨了Web纯移动端适配中的em与rem的区别，详细讲解了两种类型的适配策略。第一种适配使用em单位，根据设计稿高度计算比例，第二种则使用rem，设置html字体大小。在实际应用中，需注意元素布局和定位的单位选择，避免使用可能导致适配问题的position:relative。
关于Web纯移动端适配各种手机型号的心得
em与rem的区别
在讲如何进行适配之前，我觉得很有必要先了解一下em和rem，作为一名前端开发者，不能只停留在px上。
em和rem相对于px来说，它们更加具有灵活性，它们是相对长度单位，也就是说长度不是一成不变的，它们更适用于响应式布局。
- em
- ①如果子元素字体大小是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{
最低0.47元/天 解锁文章
211
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
