css移动端适配最佳实践

news2024/11/16 23:44:25

移动端适配，在移动端里经常有遇到，在不同分辨率移动端设备精确还原UI设计稿，这是一个令人抓狂的问题，好在有flex，box布局解决了自适应很大一部分问题。

在开始本文之前主要介绍几种笔者常用的适配方案

1、设置meta标签的initial-scale,mininum-scale,maxinum-scale缩放比

2、rem适配，利用根设置基础单位

3、vw+calc,结合rem适配

正文开始

meta缩放比

(function () {let timer = null;function flexable() {const deviceWidth = window.screen.width;// 根据当前设计稿，如果是设计稿640，那么targetWidth就是320,设计稿实际1px,页面也是1px// 如果设计稿是750，那么targetWidth就是375const targetWidth = 320;const scale = deviceWidth / targetWidth;let meta = document.querySelector('meta[name="viewport"]');if (!meta) {const meta = document.createElement("meta");meta.setAttribute("name", "viewport");meta.setAttribute("content",`width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`);document.getElementsByTagName("head")[0].appendChild(meta);}if (meta) {meta.setAttribute("content",`width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`);}}window.addEventListener("resize",() => {if (timer) {clearTimeout(timer);}timer = setTimeout(() => {flexable();}, 80);},false);flexable();
 })();

主要是设置根据window.screen.width与设计稿实际尺寸targetWidth计算出scale,将这个scale动态设置meta的content,width=device-width,initial-scale=scale,minimum-scale=scale,maximun-scale=scale

当我们动态设置meta后，我们不同分辨率下的字体大小就会动态的发生变化

640x960

注意targetWidth是你设计稿尺寸，如果是750的设计稿，那么就是375,在设计稿中量的是多少尺寸，就是多少固定尺寸

rem适配

因为默认浏览器字体的大小就是16px,所以我们在一些项目中会看到font-size:62.5%

这62.5%到底怎么计算来的呢，如果我们根html设置font-size: 16px

1rem = 16px;

换算成百分比就是1/16就是6.25%,现在我们扩大10倍就是62.5%,所以1rem = 10px,也就1px=0.1rem

在我们根据UI设计稿实际尺寸中，如果量得尺寸是16px那么就是1.6rem,只需要在原单位基础上/10即可

注意我们meta标签上同样要默认设置<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>rem</title><style> * {padding: 0;margin: 0;}html {font-size: 62.5%;}.title {font-size: 2rem;}.box {max-width: 64rem;height: 10rem;background-color: red;} </style></head><body><div id="app"><div class="title">rem适配</div><div class="box"></div></div></body>
</html>

vw适配

vw是视口单位，通常来讲会将可视区域分成100vw

在利用vw与calc来设置根html的font-size，然后用rem单位

然后我们看下代码

 * {padding: 0;margin: 0;
}
html {font-size: calc(100vw / 320 * 10);
}

100vw瓜分了320分辨率，然后我们需要扩大10倍

1rem = 10vw = 10px

所以当我们实际量得UI上20px时，我们直接计算得出2rem即可

 #app {position: relative;}.title {font-size: 2rem;}.box {max-width: 32rem;height: 10rem;background-color: red;}.content {font-size: 2rem;position: absolute;top: 0px;z-index: 1;background-color: rgb(255, 0, 0, 0.1);}.row-present .col {/* width: calc(100% / 3); */width: 20%;height: 100px;float: left;color: green;font-size: 20px;}:root {--background-color: #111;}.row-present .col:nth-of-type(2n + 1) {background-color: var(--background-color);}p.title {clear: both;}.row-vw .col {float: left;height: 100px;width: 20vw;color: green;font-size: 2rem;}.row-vw .col:nth-of-type(2n + 1) {background-color: var(--background-color);}

最后的结果就是下面

总结

可以动态设置meta的initial-scale的缩放比，主要是根据screen.width设备宽度与目标设计稿targetWidth形成像素比scale，假设设计稿是750的，那么我们的targetWidth就是375,设计稿量的尺寸就是10px,网页上所写的元素也是10px,因为scale=1,随着不同分辨率scale的值也会发生变化* rem适配，浏览器默认font-size:16px，当我们根font-size:62.5%时，我们利用rem单位设置元素单位，1rem=10px,所以当设计稿750像素时，量尺寸20px,那么你实际单位换成rem时，就是2rem,原有尺寸缩小10倍即可，这种方案会有一定误差，但也基本满足移动端自适应* vw+calc+rem方案，同样是设置根html的单位，主要是font-size: calc(100vw / targetWidth * 10),我们把vw视口单位，如果你的设计稿是640,100vw就是targetWidth=320像素,如果你的设计稿是750，那么targetWidth=375，1rem = 10vw = 10px,所以当你750的设计稿20像素时，那么在实际网页的单位只需要缩小10倍即可，也就是2rem，这种方式精确度高，简单，基本不需要第三方什么适配js* 本文code example