移动端适配方案
1、媒体查询
媒体查询的使用还能节省开发时间和成本，因为开发人员只需编写一次代码，就可以适应多种设备。同时，它还可以根据设备的特性选择最适合的图片、字体和其他资源，从而减少页面加载时间，提高网站的性能。响应式设计是一种现代网页设计方法，它可以使网页在不同的设备和屏幕大小上呈现出合适的布局和样式。总之，媒体查询对于现代网页开发来说至关重要。它提供了一种简单而有效的方式来创建自适应布局，提高用户体验，并使网页设计更加灵活和现代化。
2、flexible 方案（动态 rem 方案）
动态rem适配方案的流程：
- meta 标签设置 viewport 宽度为屏幕宽度；
- 根据不同屏幕修改根元素 font-size 大小，一般设置为屏幕宽度的十分之一（可引入 lib-flexible 库，或者自己写相应逻辑）；
- 开发环境配置 postcss-px2rem 或者类似插件；
- 根据设计稿写样式，元素宽高直接取设计稿宽高即可，单位为 px，插件会将其转换为 rem；
- 段落文本也按照设计稿写，单位为px，不需要转换为 rem；
lib-flexible 其核心代码如下：
(function flexible (window, document) {
var docEl = document.documentElement
// 根据屏幕宽度设置根元素字体大小，set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
}(window, document))
if (!dpr && !scale) {
var isAndroid = win.navigator.appVersion.match(/android/gi);
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
var devicePixelRatio = win.devicePixelRatio;
if (isIPhone) {
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
dpr = 3;
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
dpr = 2;
} else {
dpr = 1;
}
} else {
// 其他设备下，仍旧使用1倍的方案
dpr = 1;
}
scale = 1 / dpr;
}
3、Viewport 方案
即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份。1vw 等于视口宽度的1%
vw 适配方案的流程：
- meta 标签设置 viewport 宽度为屏幕宽度；
- 开发环境配置 postcss-px-to-viewport 或者类似插件；
- 根据设计稿写样式，元素宽高直接取设计稿宽高即可，单位为 px，插件会将其转换为 vw；
- 段落文本也按照设计稿写，单位为px，不需要转换为 vw；
当然，没有一种方案是十全十美的，vw同样有一定的缺陷：
px转换成vw不一定能完全整除，因此有一定的像素差。- 比如当容器使用
vw，margin采用px时，很容易造成整体宽度超过100vw，从而影响布局效果。当然我们也是可以避免的，例如使用padding代替margin，结合calc()函数使用等等...