本文已参与「新人创作礼」活动，一起开启掘金创作之路
手机屏幕的逻辑像素一般在320px～428px这个范围，手机页面最常见的布局就是水平均分排列和两栏布局。
Flex响应式布局，0适配
科学使用CSS布局，写出来的内容就是适配的。 缺点
- 设计师一般只有一稿，导致在其他大小的屏幕上没有标准设计；
- 某些屏幕上样式出现问题需要实际检测出来后再微调；
- 对于一些非匀分排列和两栏布局的设计风格就无能为力了
等比缩放
屏幕布局、大小固定，在不同设备上进行缩放
<meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >
// 需要在script写上适配的修改viewport的代码才行
<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>
上面使用到了html5屏幕旋转事件： window.onorientationchange
window.orientation属性与onorientationchange事件
window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
window.onorientationchange = orientationChange; //写上对应的函数地址，屏幕旋转后会触发
优缺点： 优点： 开发流程很简单，工程师只需根据设计稿标注还原页面，不需要额外计算。适配范围广。 缺点： 页面整体放大缩小，对于不想缩放的元素无法控制。比如边框在大屏手机下显得很粗，在小屏手机下显得很细。
rem适配
设置根元素的font-size大小为屏幕宽度/设计稿宽度，其他需要用到尺寸的地方都rem
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1">
<script>
const WIDTH = 750 //如果是尺寸的设计稿在这里修改
const setView = () => {
//设置html标签的fontSize
document.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px'
}
window.onorientationchange = setView
setView()
</script>
<style>
div {
width: 3.75rem; /* 需要随屏幕等比缩放，使用rem单位，比如设计稿中标注的32px这里写成0.32rem */
border: 1px solid #ccc; /*不需要缩放的部分用px*/
}
</style>
</head>
<body>
<div>内容</div>
</body>
</html>
