一般情况下吗，设计稿的设计师按照 375 的尺寸设计，在手机（移动端）快速更新迭代的今天，每个品牌的手机都有着不同的物理分辨率和逻辑分辨率，此时 375 的设计稿，如果想要还原那基本是不可能了，每个设备的右边所展示的内容大小就不尽相同，这个时候就需要web前端工程师进行移动端适配。下面我们详细了解一下。
如何适配
我们先设置一个meta，然后再进行适配。meta的各个属性不在解释，有兴趣的同学可以自行了解。
<meta name='viewport' content='width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;'>
适配方法：
1.单位选择rem
rem是相对长度单位，rem方案中的样式设计为相对于根元素font-size计算值的倍数。根据 屏幕宽度 设置html标签的font-size，在布局时使用 rem 单位布局，达到自适应的目的，是 弹性布局 的一种实现方式。
实现方法： 首先获取文档根元素和设备dpr，设置 rem，在html文档加载和解析完成后调整body字体大小； 在页面缩放 / 回退 / 前进的时候， 获取元素的内部宽度，重新调整 rem 大小。
Js代码(在header添加)
(function() {
function autoRootFontSize() {
document.documentElement.style.fontSize =Math.min(screen.width,document.documentElement.getBoundingClientRect().width) / 750 * 32 + 'px';
// 取screen.width和document.documentElement.getBoundingClientRect().width的最小值；除以750，乘以32，就是原本是750大小的32px;
// 如果屏幕大小变成了375px,那么字体就是16px;也就是根字体fontSize大小和屏幕大小成正比变化！
}
window.addEventListener('resize', autoRootFontSize);
autoRootFontSize();
})();
接下来就可以使用rem作为css单位了
2.vh/vw方案
vh、vw 方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份。 使用sass进行适配
//iPhone 6尺寸作为设计稿基准
$vm_base:375;
@function vw($px){
@return ($px/375)*100vw;
}
设置相应的vw之后就可以使用vw作为css单位，如：
.title{
font-size:vw(16);
}
3.基于媒体查询+rem
@media screen and (min-width:350px){
html{font-size:342%;}}
@media screen and (min-width:360px){
html{font-size:351.56%;}
}@media screen and (min-width:375px){
html{font-size:366.2%;}
}@media screen and (min-width:384px){
html{font-size:375%;}
}@media screen and (min-width:390px){
html{font-size:380.85%;}
}@media screen and (min-width:393px){ /* 小米NOTE */
html{font-size:383.79%;}
}@media screen and (min-width:410px){
html{font-size:400%;}
}@media screen and (min-width:432px){ /* 魅族3 */
html{font-size:421.875%;}
}@media screen and (min-width:480px){
html{font-size:469%;}
}@media screen and (min-width:540px){
html{font-size:527.34%;}
}@media screen and (min-width:640px){
html{font-size: 625%;}
}
@media screen and (width:720px){
html{font-size: 703.125%;}
}
接下来就可以使用rem作为css单位了，而不用编写js，各有优劣。
4.基于媒体查询+rem，这里不做赘述
相关推荐
-
头条、百家号、大鱼号、企鹅号、网易号哪个好（自媒体体验与比较）
我是一个自媒体新手，处于对自媒体平台的摸索阶段，尝试体验了1-3个月。 选择这五大自媒体来做分享，是因为它们有个共同特点：都开通了收益，即使微乎其微。相信这也是许多新手关心的问题。 、百家号和企鹅号是2021...
-
excel如何开方平方（Excel如何开方）
Excel有许多强大功能，这里教大家Excel如何开方1此处以255为例，开5次方2在单元格中输入=255^(1/5)3回车后，单元格中数据即为255开5次方的结果4“^”是一个用来表示第三级运算的数学符号。例如2的5次方通常被表示为2^5...
-
不甘平凡励志的句子（愿你平凡而不平庸精彩句子）
一、不管道路如何曲折，只要是你认为正确的，你肯努力走下去，总比站在原地更接近幸福。二、只有满怀勇气，不畏艰辛，才能获得更大的成功。三、不开心时，做个深呼吸，不过是糟糕的一天而已，又不是糟糕一辈子。四、...
-
淘宝店铺价格区间设置方法（淘宝sku怎么设置不同的价格）
随着淘宝的发展，越来越多的卖家选择在淘宝开店。而有些卖家朋友刚开始的为了让自己的宝贝可以快速的引流，会把商品设置个区间价，但是过段时间又不想用了，就想取消掉。那么淘宝怎么取消区间价?sku区间如何设置?下...
-
我的世界魔法书怎么获得（我的世界怎么获取更多附魔书）
在MC我的世界生存模式中，玩家获取到最高级材料，可以打造最高级的装备。但想要凭此对付末影龙这样的怪物，还是显得有些势单力薄。将装备进行附魔可以强化装备的某些属性，装备的等级也能进一步提升。一般玩家会选择...
-
华为手机哪款性价比高（华为手机哪款性价比高又实惠2023）
第一款我推荐的是华为Mate 40 Pro。 这款手机可以是华为一直发布以来最好的巅峰制作的手机。华为最棒的处理器，麒麟9000处理器，再搭配上它的鸿蒙系统可以说这部手机的流畅度，性能直接拉满。 如果你想换一部华为手...