移动端适配方案以及面试总结（初学者看出来）

移动端适配的方案

概念：
所谓移动端适配，就是WebApp在不同尺寸的屏幕上等比显示

方法一：JS动态修改配合CSS预处理器（less）

 // 计算屏幕宽度
var screen = document.documentElement.clientWidth;// 计算字体大小，取屏幕宽度的16分之一
var size = screen / 16;// 设置根元素字体大小
document.documentElement.style.fontSize = size + 'px';

js获取当前屏幕的宽度，将屏幕宽度的16分之一设置给html的font-size

// 此时设计稿的宽度为375，定义一个less变量等于16分之一的设计稿宽度
@rem: 375/16rem;

如果此时设计稿中的16可以为任意值，你设置多少，js中屏幕宽度就除于多少再赋值给html的font-size。

若设计稿中的某元素设置宽高为500px

.box{width：500px;height:500px;
}

此时可以替换为：

.box{width：200/@rem;height:200/@rem;
}

分析：

设计稿中的元素尺寸都是基于设计稿的宽度而定，如上述，200px的宽度是基于设计稿375px而定的，但当js中获取的宽度发生改变时，需要解决适配问题。假设js中获取的此时屏幕宽度为750px，那么此时html的font-size值为750/16
px；

此时计算box的width为400px

注：1rem = 1 html的font-size

此方法不需要进行单位数值的计算，只需要定义一个less变量，再查找替换将单位px换成 /@rem 即可。

方法二：JS动态修改配合rem适配

此方法跟方法一大同小异，但不需要再在less中定义变量，只需要进行js获取配合查找替换px即可。

 // 计算屏幕宽度
var screen = document.documentElement.clientWidth;// 设置根元素字体大小
document.documentElement.style.fontSize = screen + 'px';

.box{width：200px;height:200px;
}

.box{width：200/375rem;height:200/375rem;
}

分析：

这种方法是js动态获取屏幕宽度，直接将html的font-size设置为屏幕的宽度，再在less中进行换算。
若此时js获取的屏幕宽度为750px，html的font-size值设置为750px后，此时计算box的width为400px

200/375rem = 200/375*750 px = 400px

方法三：viewport适配

原理：通过设置 initial-scale , 将所有设备布局视口的宽度调整为设计图的宽度.

//获取meta节点
var metaNode = document.querySelector('meta[name=viewport]');//定义设计稿宽度为375
var designWidth = 375;//计算当前屏幕的宽度与设计稿比例
var scale = document.documentElement.clientWidth/designWidth;//通过设置meta元素中content的initial-scale值达到移动端适配
meta.content="initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+",user-scalable=no";

方法四：rem单位方式（当前像素除以100）

1、拿到设计图，计算出页面的总宽，为了好计算，取100px的font-size，如果设计图是iPhone6的那么计算出的就是7.5rem，如果页面是iPhone5的那么计算出的结果就是6.4rem。

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no"/>

2、动态设置html标签的font-size值：

 document.documentElement.style.fontSize = document.documentElement.clientWidth / 以rem为单位的页面总宽 + 'px';

3、做页面是测量设计图的px尺寸除以100得到rem尺寸（200px换算成2rem）。

4、注意，文字字体大小不要使用rem换算。

移动端前端适配方案（总结）

首先，谈一下目前为止出现的一些关于移动端适配的技术方案：

（1）通过媒体查询的方式即CSS3的meida queries
（2）以天猫首页为代表的 flex 弹性布局
（3）以淘宝首页为代表的 rem+viewport缩放
（4）rem 方式

适应响应式布局来做，用媒体查询，具体的可以参考bootstrap

弊端:冗余代码较多，要做多个分辨率的适配，css代码写的较多。除非用成熟的bootstrap框架节省一些工作量。

使用自适应百分比

这种方法比较古老，做出来的界面在各个分辨率的适配上比较不好，例如一个div在分辨率为320*568是320px * 100px 在375 * 667 的分辨率显示就是 375px * 100px 效果不是等比拉升

总结：使用rem比较多，当然也可以借助bootstrap也是比较常用的。至于其他的看情况具体使用

今天就先给大家总结到这里我还有工作要忙哦如果能此文章能帮助到小伙伴你记得给作者大赞评论哦创作不易多多支持加油。

移动端适配方案以及面试总结（初学者看出来）相关推荐

一些常见的移动端适配方案，你了解吗？
前言移动端设备的尺寸很多,而 UI 设计稿一般只会基于一个尺寸(一般是 375px 或 750px )进行设计. 目前移动端适配方案有多种,本文将介绍一些具有代表性的适配方案. 媒体查询 @medi ...
小小Mac:Web移动端适配方案
一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...
H5移动端适配方案rem/vw
前言在讲解适配方案之前,我们聊聊为什么要做适配? 因为视口.逻辑像素.分辨率这些变量的不同,在每个设备展示都不一样,需要一种方案来统一. 物理像素:也就是分辨率,一个物理像素是显示器上的最小的物理显 ...
h5响应式布局、PC和移动端适配方案
前言春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
移动端适配方案px2rem
移动端的适配方案 React 暴露webpack配置,即 react-scripts 包 npm run eject ⚠️ 在运行该命令的时候,要先将已经修改的文件提交到本地仓库中,否则会报错! 安装 ...
CSS移动端适配方案
文章目录移动端适配移动端适配介绍视口的介绍布局视口和视觉视口理想视口移动端适配方案 rem适配方案基本介绍单位换算 vw适配方案移动端适配移动端适配介绍移动互联网的快速发展,让人 ...
移动端适配方案有哪几种？
虽然我们课程明确的区分各种移动端适配方案,但依然有很多同学搞不清楚移动端等比适配和响应式,这里对移动端主流适配方案给大家做一个分析. 移动端适配是指同一个页面可以在不同的移动端设备上都有合理的布局.主 ...
移动端适配方案(rem和vw vh适配)(css预处理器-less)
适配方案: 目前移动端适配方案有两种: 1.flex+rem单位当前市面上用的比较多相对主流(比如小米和淘宝移动端) 2.flex+viewport width/viewport height(v ...

移动端适配方案以及面试总结（初学者看出来）

移动端适配方案以及面试总结（初学者看出来）相关推荐

最新文章

热门文章