移动端适配和兼容，面试官：你了解过移动端适配吗

关于【移动端适配和兼容】，今天犇涌小编给您分享一下，如果对您有所帮助别忘了关注本站哦。

内容导航：1、移动端适配和兼容：面试官：你了解过移动端适配吗？2、移动端适配和兼容，几种常见的移动端适配总结

1、移动端适配和兼容：面试官：你了解过移动端适配吗？

作者：好学习吧丶

很多人聊起移动端适配都是懵逼状态，都想口吐芬芳。难道移动端还要适配，直接px写死，其他自适应不就完了吗？其实不然，要求严格的公司会要求缩放比例完全相同，简单说就是，在每个手机上的每一行的字数都要一样。接下来，我们就要细说移动端适配的前世今生

一、为什么要移动端适配？

一般情况下设计稿的设计师按照375的尺寸设计，然而，在现在移动终端（就是手机）快速更新的时代，每个品牌的手机都有着不同的物理分辨率，这样就会导致，每台设备的逻辑分辨率也不尽相同，此时357的设计稿，如果想要还原那基本是不可能了，因为如果一个左右布局，左边如果写死，右边自适应的话，每个设备的右边所展示的内容大小就不尽相同，这是移动端适配就显得尤其重要

既然要了解前世今生，我们就从几个概念说起先上一张图

移动端适配和兼容，面试官：你了解过移动端适配吗

下面我们一个个解析

1.1 屏幕尺寸

屏幕尺寸是以屏幕对角线的长度来计量，计量单位为英寸。

如图所示两个对角线的长度就是这个屏幕的尺寸

移动端适配和兼容，面试官：你了解过移动端适配吗

1.2 像素

我们看到上图320x480叫分辨率，而这个所谓的分辨率就是说白了就横向320个像素纵向480个像素组成

1.2.1 什么叫像素呢？

像素（Pel，pixel;pictureelement），为组成一幅图像的全部亮度和色度的最小图像单元。电视的图像是由按一定间隔排列的亮度不同的像点构成的，形成像点的单位也就是像素，组成图像的最小单位就是像素。从计算机技术的角度来解释，像素是硬件和软件所能控制的最小单位。它指显示屏的画面上表示出来的最小单位，不是图画上的最小单位。一幅图像通常包含成千上万个像素，每个像素都有自己的颜色信息，它们紧密地组合在一起。由于人眼的错觉，这些组合在一起的像素被当成一幅完整的图像。当修改图像的某区域，实际上是在修改该区域内的像素。对这些像素修改的好与坏将决定最终图片的质量。单位面积内的像素越多，图像的效果就越好。彩色电视图像是由成千个像素点所组成的，而且每个像素都是由红绿蓝三种颜色并排组成的。(注意每个像素的大小是不固定的，他是根据设备的分辨率决定的，知识点，后面要考)

1.2.2 什么叫分辨率呢?

屏幕分辨率是指纵横向上的像素点数，单位是px。屏幕分辨率确定计算机屏幕上显示多少信息的设置，以水平和垂直像素来衡量。就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。

知道什么叫做分辨率后，有人就会奇怪，我记得苹果的苹果官网上的苹果6的分辨率为750x1334啊，但是设计稿上苹果6的分辨率为375x667啊,而且各个设备的分辨率都比实际分辨率小很多，这就牵扯到一些历史原因了

1.2.3 设备物理分辨率（设备像素）

相信我们所有前端开发者，都是见证了手机这个移动设备发展的过程。从蓝屏手机，到彩屏手机，到诺基亚研发出来触屏手机，再到智能手机一步步发展下来，我们的我们的手越来越清晰，越来越大，所以我们的屏幕发展也越来越迅速。

移动端适配和兼容，面试官：你了解过移动端适配吗

上图可以清楚的看到，不同分辨率所带来的的差距

从最初的颗粒感相当大的屏幕，到720p再到1080p，甚至于现在各家旗舰手机的2k屏幕，我们的物理分辨率在变得越来越大。这样就暴露出来一个问题，我们如果手机分辨率翻倍，我们的图像不就要被缩小一倍，我们难道要在每个设备上就出个设计稿，每个设备的分辨不尽相同啊，其实你担忧的问题，我们的乔帮主在很多年前就想到了。这就是我们的逻辑分辨率

1.2.4 逻辑分辨率（设备独立像素）

如下图所示，虽然设备物理分辨不同，但是他的这个逻辑分辨率却都差不多，这就要感谢乔帮主了

移动端适配和兼容，面试官：你了解过移动端适配吗

乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念，在iPhone4使用的视网膜屏幕中，把2x2个像素当1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。从此以后高分辨率的设备，多了一个逻辑像素。这些设备逻辑像素的差别虽然不会跨度很大，但是仍然有点差别，于是便诞生了移动端页面需要适配这个问题，既然逻辑像素由物理像素得来，那他们就会有一个像素比值

1.2.5 设备像素比

设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值。为什么要知道设备像素比呢？因为这个像素比会产生一个非常经典的问题，1像素边框的问题。

1px边框问题

当我们css里写的1px的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为2px，或者3px，由于每个设备的屏幕尺寸不一样，就导致每个物理像素渲染出来的大小也不同（记得上面的知识点吗，设备的像素大小是不固定的），这样如果在尺寸比较大的设备上，1px渲染出来的样子相当的粗矿，这就是经典的一像素边框问题

如何解决

核心思路，就是在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr：我们根据这个像素比，来算出他对应应该有的大小,但是暴露个非常大的兼容问题

移动端适配和兼容，面试官：你了解过移动端适配吗

其中Chrome把0.5px四舍五入变成了1px，而firefox/safari能够画出半个像素的边，并且Chrome会把小于0.5px的当成0，而Firefox会把不小于0.55px当成1px，Safari是把不小于0.75px当成1px，进一步在手机上观察iOS的Chrome会画出0.5px的边，而安卓(5.0)原生浏览器是不行的。所以直接设置0.5px不同浏览器的差异比较大，并且我们看到不同系统的不同浏览器对小数点的px有不同的处理。所以如果我们把单位设置成小数的px包括宽高等，其实不太可靠，因为不同浏览器表现不一样。

至于其他解决一像素边框问题网上有一堆答案，在这里我推荐一种非常好用，并且没有副作用的解决方案

transform: scale(0.5) 方案

div { height:1px; background:#000; -webkit-transform: scaleY(0.5); -webkit-transform-origin:0 0; overflow: hidden;}

css根据设备像素比媒体查询后的解决方案

@media only screen and (-webkit-min-device-pixel-ratio: 2.0) { .border-bottom::after { -webkit-transform: scaleY(0.5); transform: scaleY(0.5); }}@media only screen and (-webkit-min-device-pixel-ratio: 3.0) { .border-bottom::after { -webkit-transform: scaleY(0.33); transform: scaleY(0.33); }}

如此，完美的解决一像素看着粗的问题

二、如何适配

2.1 viewport

视口(viewport)代表当前可见的计算机图形区域。在Web浏览器术语中，通常与浏览器窗口相同，但不包括浏览器的UI，菜单栏等——即指你正在浏览的文档的那一部分。

那么在移动端如何配置视口呢？简单的一个meta标签即可！

他们分别什么含义呢？

移动端适配和兼容，面试官：你了解过移动端适配吗

我们在移动端视口要想视觉效果和体验好，那么我们的视口宽度必须无限接近理想视口

理想视口：一般来讲，这个视口其实不是真是存在的，它对设备来说是一个最理想布局视口尺寸，在用户不进行手动缩放的情况下，可以将页面理想地展示。那么所谓的理想宽度就是浏览器（屏幕）的宽度了。

于是上述的meta设置，就是我们的理想设置，他规定了我们的视口宽度为屏幕宽度，初始缩放比例为1，就是初始时候我们的视觉视口就是理想视口！

其中user-scalable设置为no 可以解决移动端点击事件延迟问题（拓展）

2.2 解决适配方法

2.2.1 rem适配

rem是CSS3新增的一个相对单位，这个单位引起了广泛关注。这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。目前，除了IE8及更早版本外，所有浏览器均已支持rem。对于不支持它的浏览器，应对方法也很简单，就是多写一个绝对单位的声明。这些浏览器会忽略用rem设定的字体大小

举个例子：

//假设我给根元素的大小设置为14pxhtml{ font-size：14px}//那么我底下的p标签如果想要也是14像素p{ font-size:1rem}//如此即可

rem的布局不得不提flexible，flexible方案是阿里早期开源的一个移动端适配解决方案，引用flexible后，我们在页面上统一使用rem来布局。

他的原理非常简单

// set 1rem = viewWidth / 10function setRemUnit () { var rem = docEl.clientWidth / 10 docEl.style.fontSize = rem + 'px'}setRemUnit();

rem 是相对于html节点的font-size来做计算的。所以在页面初始话的时候给根元素设置一个font-size，接下来的元素就根据rem来布局，这样就可以保证在页面大小变化时，布局可以自适应，

如此我们只需要给设计稿的px转换成对应的rem单位即可

当然，这个方案只是个过渡方案，为什么说是过渡方案

因为当年viewport在低版本安卓设备上还有兼容问题，而vw，vh还没能实现所有浏览器兼容，所以flexible方案用rem来模拟vmin来实现在不同设备等比缩放的“通用”方案，之所以说是通用方案,是因为他这个方案是根据设备大小去判断页面的展示空间大小即屏幕大小，然后根据屏幕大小去百分百还原设计稿，从而让人看到的效果(展示范围)是一样的，这样一来，苹果5 和苹果6p屏幕如果你按照设计稿还原的话，字体大小实际上不一样，而人们在一样的距离上希望看到的大小其实是一样的，本质上，用户使用更大的屏幕，是想看到更多的内容，而不是更大的字。

so，这个用缩放来解决问题的方案是个过渡方案，注定时代所淘汰

2.2.2 vw，vh布局

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。

移动端适配和兼容，面试官：你了解过移动端适配吗

vh和vw方案和rem类似也是相当麻烦需要做单位转化，而且px转换成vw不一定能完全整除，因此有一定的像素差。

不过在工程化的今天，webpack解析css 的时候用postcss-loader 有个postcss-px-to-viewport能自动实现px到vw的转化

{ loader: 'postcss-loader', options: { plugins: ()=>[ require('autoprefixer')({ browsers: ['last 5 versions'] }), require('postcss-px-to-viewport')({ viewportWidth: 375, //视口宽度（数字) viewportHeight: 1334, //视口高度（数字） unitPrecision: 3, //设置的保留小数位数（数字） viewportUnit: 'vw', //设置要转换的单位（字符串） selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组） minPixelValue: 1, //设置要替换的最小像素值（数字） mediaQuery: false //允许在媒体查询中转换px（true/false） }) ]}

2.2.3 px为主，vx和vxxx（vw/vh/vmax/vmin）为辅，搭配一些flex（推荐）

之所以推荐使用此种方案，是由于我们要去考虑用户的需求，用户之所以去买大屏手机，不是为了看到更大的字，而是为了看到更多的内容，这样直接使用px是最明智的方案，使用vw，rem等布局手段无可厚非，但是，flex这种弹性布局大行其道的今天，如果如果还用这种传统的思维去想问题显然是有两个原因（个人认为px是最好的，可能有大佬，能用vw，或者rem写出精妙的布局，也说不准）：

为了偷懒，不愿意去做每个手机的适不愿意去学习新的布局方式，让flex等先进的布局和你擦肩而过

2.3 移动端适配流程

在head 设置width=device-width的viewport‘在css中使用px在适当的场景使用flex布局，或者配合vw进行自适应在跨设备类型的时候（pc <-> 手机 <-> 平板）使用媒体查询在跨设备类型如果交互差异太大的情况，考虑分开项目开发

最后

在这里就还分享一份由大佬亲自收录整理的学习PDF+架构视频+面试文档+源码笔记，高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料

这些都是我现在闲暇时还会反复翻阅的精品资料。里面对近几年的大厂面试高频知识点都有详细的讲解。相信可以有效地帮助大家掌握知识、理解原理，帮助大家在未来取得一份不错的答卷。

当然，你也可以拿去查漏补缺，提升自身的竞争力。

真心希望可以帮助到大家，Android路漫漫，共勉！

2、移动端适配和兼容，几种常见的移动端适配总结

一、为什么要做适配为了适应各种移动端设备，完美呈现应有的布局效果各个移动端设备，分辨率大小不一致，网页想铺满整个屏幕，并在各种分辨下等比缩放二、适配方案固定高度，宽度百分比适配-布局非常均匀，适合百分比布局固定宽度，改变缩放比例适配-什么情况都可以Rem适配像素比适配三、单位em根据元素自身的字体大小计算,元素自身 16px 1em=16pxRem R -> root 根节点( html ) 根据html的字体大小计算其他元素尺寸四、百分比适配(常用)

固定高度，宽度百分比适配

根据设置的大小去设置高度，单位可以用px 百分比 auto常用Flex布局百分比宽度

以640设计稿为例，在外层容器上设置最大以及最小的宽

#wrapper { max-width: 640px; min-width: 300px; margin: 0 auto;}

后面的区块布局都用百分比，具体元素大小用px计算

也就是宽度用百分比，高度用px高度以及图片不要定死，让它自动撑开五、Rem适配(常用)根据屏幕的分辨率动态设置html的文字大小，达到等比缩放的功能保证html最终算出来的字体大小，不能小于12px在不同的移动端显示不同的元素比例效果如果html的font-size:20px的时候，那么此时的1rem = 20px把设计图的宽度分成多少分之一，根据实际情况rem做盒子的宽度，viewport缩放

head加入常见的meta属性

把这段代码加入head中的script预先加载

// rem适配用这段代码动态计算html的font-size大小(function(win) { var docEl = win.document.documentElement; var timer = ''; function changeRem() { var width = docEl.getBoundingClientRect().width; if (width > 750) { // 750是设计稿大小 width = 750; } var fontS = width / 10; // 把设备宽度十等分 1rem=10px docEl.style.fontSize = fontS "px"; } win.addEventListener("resize", function() { clearTimeout(timer); timer = setTimeout(changeRem, 30); }, false); win.addEventListener("pageshow", function(e) { if (e.persisted) { //清除缓存 clearTimeout(timer); timer = setTimeout(changeRem, 30); } }, false); changeRem();})(window)

或者使用淘宝提供的库 https://github.com/amfe/lib-flexible

布局细节

结构用section区块划分更语义化然后在body设置宽度

body { width: 10rem; margin: auto;}

后面的区块都以百分比布局

section,header { width: 100%;}

把视觉稿中的 px 转换成 rem

首先，目前日常工作当中，视觉设计师给到前端开发人员手中的视觉稿尺寸一般是基于 640px 、 750px 以及 1125px 宽度为准。甚至为什么？大家应该懂的（考虑Retina屏）

假定设计稿的大小为750，那么我们则将整个图分成10等份来看。<html> 对应的 font-size为75px

html{ font-size: 75px;}

这样一来，对于视觉稿上的元素尺寸换算，只需要原始的 px值除以 rem基准值即可

那么，我们现在就可以比对设计稿，比如设计稿中，有一个div元素，宽度，高度都为20px,那么我们这样写即可（可以用 markman标准设计稿的元素大小）

div { height: 0.27rem; width: 0.27rem;}

动态计算的rem最后会帮我们动态计算元素在不同屏幕下的宽高对于设计稿上的每个元素的尺寸在设计稿大小已知的时候，我们需要测量出，然后在用测量的宽高除以设计稿750的十分之一也就是75,得到我们想要的rem。而rem是根据屏幕动态变化的，也就达到了适配的效果。也就是同一套设计稿运用在不同的设备上。

比如当我们切换到320设备大小的时候，这时候1rem=32px; div的像素实际是0.27*32=8.64px 0.27是我们在已知设计稿是750的情况下计算出来的，rem用来动态计算而已

对于margin padding line-height width height使用rem计算

如何快速计算

在实际生产当中，如果每一次计算 px 转换 rem ，或许会觉得非常麻烦

`CSSREM` 是一个CSS的 px 值转 rem 值的Sublime Text3自动完成插件插件效果

[图片上传失败…(image-4f244b-1545535128364)]

插件使用方法

安装下载本项目，比如：git clone https://github.com/flashlizi/cssrem进入packages目录：Sublime Text -> Preferences -> Browse Packages…复制下载的cssrem目录到刚才的packges目录里。重启Sublime Text配置参数参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrempx_to_rem - px转rem的单位比例，默认为40【根据设计稿来设置，如设计稿750，我们取十分之一即75】。max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。available_file_types - 启用此插件的文件类型。默认为：[".css", ".less", ".sass"]。

文字适配的解决方案

对于一些标题性的文字，我们依然可以用rem。让他随着屏幕来进行缩放，因为标题性文字一般较大，而较大的文字，点阵对其影响就越小。这样，即使出现奇怪的尺寸，也能够让字体得到很好的渲染。对于一些正文内容的文字（即站在使用者的角度，你不希望他进行缩放的文字）。我们采用px来进行处理六、缩放比适配

固定宽度，改变缩放比例适配

本文关键词：移动端适配和兼容的区别，适配移动端和pc端，移动端适配和兼容哪个好，移动端怎么适配各种机型，移动端和pc端兼容。这就是关于《移动端适配和兼容，面试官：你了解过移动端适配吗》的所有内容，希望对您能有所帮助！更多的知识请继续关注《犇涌向乾》百科知识网站：！

首页