layui移动端适配_web前端-移动端适配方案分析

一般情况下吗，设计稿的设计师按照 375 的尺寸设计，在手机(移动端)快速更新迭代的今天，每个品牌的手机都有着不同的物理分辨率和逻辑分辨率，此时 375 的设计稿，如果想要还原那基本是不可能了，每个设备的右边所展示的内容大小就不尽相同，这个时候就需要web前端工程师进行移动端适配。下面我们详细了解一下。

如何适配

我们先设置一个meta，然后再进行适配。meta的各个属性不在解释，有兴趣的同学可以自行了解。

适配方法：

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，这里不做赘述