移动端适配的几种解决办法
原创
所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示
原则
开发时方便，写代码时设置的值要和标注的 160px 相关
方案要适配大多数手机屏幕，并且无 BUG
用户体验要好，页面看着没有不适感
思路
写页面时，按照设计稿写固定宽度，最后再统一缩放处理，在不同手机上都能用
按照设计稿的标准开发页面，在手机上部分内容根据屏幕宽度等比缩放，部分内容按需要变化，需要缩放的元素使用 rem, vw 相对单位，不需要缩放的使用 px
固定尺寸+弹性布局，不需要缩放
viewport 适配
<meta name="viewport" content="width=750,initial-scale=0.5">
initial-scale = 屏幕的宽度 / 设计稿的宽度。一般设计稿的尺寸是实际开发尺寸的2倍。开发的时候根据设计稿/2即可。
<head>
<script>
const WIDTH = 750
const mobileAdapter = () => {
let scale = screen.width / WIDTH
let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
let meta = document.querySelector('meta[name=viewport]')
if (!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content',content)
}
mobileAdapter()
window.onorientationchange = mobileAdapter //屏幕翻转时再次执行
</script>
</head>
rem 适配
开发者拿到设计稿（假设设计稿尺寸为750px，设计稿的元素标是基于此宽度标注）
开始开发，对设计稿的标注进行转换
对于需要等比缩放的元素，CSS使用转换后的单位
对于不需要缩放的元素，比如边框阴影，使用固定单位px
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750 //设计稿尺寸
const setView = () => {
document.documentElement.style.fontSize = (100 * screen.width / WIDTH) + 'px'
}
window.onorientationchange = setView
setView()
</script>
</head>
header {
font-size: .28rem;
}
假设 html 的 font size = 1px 的话，就可以写 28 rem 了，更方便了，但是浏览器对字体大小有限制，设为 1px 的话，在浏览器中是失效的，会以 12px（或者其他值） 做一个计算 , 就会得到一个很夸张的结果，所以可以把 html 写的大一些。
弹性盒适配（合理布局）
<meta name="viewport" content="width=device-width">
section {
display: flex;
}一般网页中有头图，栅格化等都需要适配，等比例缩放的原则，玩过PS的基本都懂这个原理，不失真，一般宽度可以设置百分比，根据不同的场景适配就好。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读