移动端适配方案总结
一、媒体查询
步骤
检测屏幕尺寸变化，指定范围内指定布局，较为灵活，自由度高
适配代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
ul {
list-style: none;
padding: 0;
color: #fff;
text-align: center;
}
li {
width: 200px;
padding: 10px;
background-color: blue;
margin: 2px;
}
/* 当屏幕尺寸小于等于500px时，li会从默认的竖向排列转变成横向排列 */
@media (max-width:500px) {
ul {
display: flex;
}
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
二、viewport缩放
步骤
1.直接按照设计稿的标注进行开发，一切都写死
2.在html的head里加上
<meta name="vieport" content="width={设计稿宽度},initial-scale={屏幕逻辑像素宽度/设计稿宽度}"
其中屏幕逻辑像素宽度，即要适配的屏幕宽度，需要自己通过js获取
适配代码
<head>
<meta charset="utf-8">
<script>
// 设计稿尺寸
const WIDTH = 750
const mobileAdapter = () => {
// 获取到要缩放比例
let scale = screen.width / WIDTH
// 创建meta的内容
let content = `width=${WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`
// 获取到name为viewport的meta标签
let meta = document.querySelector('meta[name=viewport]')
// 向meta标签插入内容
if (!meta) {
meta = document.createElement('meta')
meta.setAttribute('name', 'viewport')
document.head.appendChild(meta)
}
meta.setAttribute('content', content)
}
mobileAdapter()
// 当设备的纵横方向改变时触发mobileAdapter
window.onorientationchange = mobileAdapter
</script>
</head>
优劣
1.开发简单，只需遵循设计稿的标注即可
2.页面是整体放大或缩小的，页面上的所有元素也会如此，这样的话对一些不该进行缩放的元素没法控制。比如，边框在大屏幕下显得很粗，在小屏又显得很细
三、动态rem适配
步骤
1.设置 html的font-size 是 100*屏幕宽度/实际稿宽度
2.在写css时，所有需要等比缩放的元素设置他们的单位为rem,值为 设计稿的标注值/100，而对于不需要等比缩放的元素直接写死px
适配代码
<!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>
四、vw适配
步骤
1.对于需要适配屏幕等比缩放大小的元素的单位采用vw，不需要等比缩放的用px
适配代码
:root{
// 这里的750指代的是设计稿尺寸，可任意修改
--ratio: calc(100vw / 750) //注意：calc里的运算符两边都要保留一个空格
}
.el{
font-size:calc(28 * var(--ratio))
}
