基本概念

1 像素

屏幕尺寸：对角线的长度（厘米）
屏幕分辨率：横纵向上物理像素的个数（物理像素）

物理像素：设备能控制显示的最小单位，是屏幕上显示数据的最基本的点。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素。也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点。在普通屏幕下1个CSS像素对应1个物理像素，而在二倍Retina屏幕下，1个CSS像素对应4个物理像素。
css像素：是web开发者使用的最小单位，也就是我们经常写的width=多少px中的px

一个css像素最终一定会转成物理像素去屏幕上呈像
一个css像素占据多少个物理像素与屏幕特性（高清）和用户的缩放行为（将屏幕内容放大或缩小）有关

注意：CSS样式里面的px和物理像素并不是相等的。
CSS中的像素只是一个抽象的单位，在不同的设备或不同的环境中，CSS中的1px所代表的物理像素是不同的。
在PC端，CSS的1px一般对应着电脑屏幕的1个物理像素；但在移动端，CSS的1px等于几个物理像素是和屏幕像素密度有关的。

2 设备独立像素

设备独立像素是我们写CSS时所用的像素，它是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。

3 设备像素比（device pixel ratio）

设备像素比简称为dpr，设备物理像素与设备独立像素的比例。
当比例为1:1时，使用1个物理像素显示1个css像素。当这个比率为2:1=2时，使用4(2-2)个物理像素显示1个css像素。当这个比率为3:1=3，使用9(3-3)个物理像素显示1个css像素。

CSS的1px等于几个物理像素，除了和屏幕像素密度dpr有关，还和用户缩放有关系。例如，当用户把页面放大一倍，那么CSS中1px所代表的物理像素也会增加一倍；把页面缩小一倍，CSS中1px所代表的物理像素也会减少一倍。

4 分辨率

屏幕分辨率是指纵横向上的像素点数（指物理分辨率）
就相同大小的屏幕而言，当屏幕分辨率低时（例如 640 x 480），在屏幕上显示的像素少，单个像素尺寸比较大。屏幕分辨率高时（例如 1600 x 1200），在屏幕上显示的像素多，单个像素尺寸比较小。

显示分辨率就是屏幕上显示的像素个数，分辨率160×128的意思是水平方向含有像素数为160个，垂直方向像素数128个。屏幕尺寸一样的情况下，分辨率越高，显示效果就越精细和细腻。

5 viewport（视口）

viewport就是设备上用来显示网页的那一块区域。

三种视口

visual viewport 视觉视口，指屏幕宽度（用户当前看到的区域）
layout viewport 布局视口，指网页的宽度
ideal viewport 理想适口，使布局视口等于视觉视口（屏幕宽度）即为理想视口

设置理想视口：

<meta name = "viewport" content = "width = device-width， initial-scale = 1.0">

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

该meta标签的作用是让布局视口的宽度等于视觉视口的宽度，同时不允许用户手动缩放，从而达到理想视口。

width：设置布局视口的宽度。（width = device-width：使布局视口等于视觉视口（屏幕宽度））
initial-scale：设置页面的初始缩放值（0.0 ~ 10.0）
minimum-scale：允许用户的最小缩放值（0.0 ~ 10.0）
maximum-scale：允许用户的最大缩放值（0.0 ~ 10.0）
height：设置视口高度（这个属性对我们并不重要，很少使用）
user-scalable：是否允许用户进行缩放，值为“no”或“yes”

适配方案

1 百分比

使用百分比% 定义宽度，高度用px固定，根据可视区域实时尺寸进行调整，尽可能适应各种分辨率，通常使用**max-width/min-width **控制尺寸范围。一般可用于列表。

优点：原理简单，不存在兼容性问题。

缺点：

如果屏幕尺寸跨度太大，过小的屏幕不能正常显示
字体大小无法随屏幕大小发生变化
设置盒模型的不同属性时，其百分比设置的参考元素不唯一，容易使布局问题变得复杂

2 rem

rem是相对于根元素字体大小的单位，也就是html的font-size大小，浏览器默认的字体大小是16px，所以默认的1rem=16px，我们可以根据设备宽度动态设置根元素的font-size，使得以rem为单位的元素在不同终端上以相对一致的视觉效果呈现。

注：em相对于父元素，rem相对于根元素。

事实上 rem 是把屏幕等分成指定的份数，以20份为例，每份为 1rem，1rem 对应的大小就是 rem基准值，然后把这个基准值给<html>的 font-size。
如果设备的物理像素宽为 640px，分成20份，那么 1rem=640px/20=32px，<html>的 font-size就为32px。

//这段代码放在head标签里面
(function () {var html = document.documentElement;function onWindowResize() {html.style.fontSize = html.getBoundingClientRect().width / 20 + 'px'; // 1rem的值}window.addEventListener('resize', onWindowResize);onWindowResize();
})();

优点：

兼容性好，大部分主流浏览器都支持
相较于百分比方案，页面不会因为伸缩发生变形，自适应效果更佳

缺点：

不是纯css移动适配方案，需要引入js脚本。在头部内嵌一段 js脚本，监听分辨率的变化来动态改变根元素的字体大小，css样式和 js 代码有一定耦合性。
小数像素问题：通过 rem 计算后可能会出现小数像素，浏览器会对这部分小数四舍五入，按照整数渲染，造成显示误差。（解决办法：指定最小转换像素，对于比较小的像素，不转换为 rem）。

3 vh/vw

视口是浏览器中用于呈现网页的区域。

1vw 等于视口宽度的 1%
1vh 等于视口高度的 1%
vmin : 选取 vw 和 vh 中最小的那个
vmax : 选取 vw 和 vh 中最大的那个

例如，在PC浏览器视口尺寸为750px，那么 1vw = 750 * 1% = 7.5px，1px = 0.1333333vw。

优点：纯 css 移动端适配方案，不存在脚本依赖问题

缺点：存在一些兼容性问题，Android4.4以下不支持

4 rem+vw/vh

vw/vh 方案能够实现宽度和高度的自适应，并且逻辑清晰，但是存在一定的兼容性问题。将 vw/vh 方案与 rem 方案相结合，给根元素设置随视口变化的vw单位：

例：以设计稿为750px为基准

第一步：设置meta标签

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

第二步：设置html的font-size大小（给根元素设置随视口变化的vw单位）

html{font-size:13.33333333vw
}

vw表示1%的屏幕宽度，而我们的设计稿通常是750px，屏幕一共是100vw，所以1px就是0.1333333vw。

为了方便计算，我们取html的font-size为100px（1rem = 100px），所以html的font-size为100px，也就是1rem=100px=13.333333vw。

例如一个div的大小为 width: 200px; height: 137px 时，像素直接除以100，计算小数很方便：

div {width: 2rem;height:1.37rem;
}

相对于前面的rem适配来说，就不用去计算小数了。

5 媒体查询@media

通过给不同分辨率的设备编写不同的样式实现响应式布局，用于解决不同设备不同分辨率之间兼容问题，一般是指PC、平板、手机设备之间较大的分辨率差异。

@media screen and (min-width: 375px) {   样式1    /* 当屏幕大于等于375时显示样式1 */
}
@media screen and (max-width: 750) {  样式2    /* 当屏幕小于等于等于750时显示样式2 */
}

优点：能够使网页在不同设备、不同分辨率屏幕上呈现合理布局，不仅仅是样式伸缩变换

缺点：

要匹配足够多的设备与屏幕，一个web页面需要多个设计方案，工作量比较大
通过媒体查询技术需要设置一定量的断点，到达某个断点前后的页面发生显著变化，用户体验不太友好

APP应用

我们日常使用的APP应用主要分为以下几类：

原生APP（Native APP），一般依托于操作系统，有很强的交互，是一个完整的应用，可拓展性强。需要下载安装。
H5页面（web APP），采用HTML语言写出的APP，一般依托于浏览器，有一定的交互，类似于现在的轻应用，是网页版。不需要下载安装。
混合页面（Hybrid APP），结合了原生和网页两种形式，很多应用采用原生App的框架，Web的内容。比如58同城的帖子、天猫的活动页面都是内嵌网页的实现。
小程序，寄居于原生APP微信中。

H5页面

H5页面具有移动端自适应能力，简单来说就是H5页面会根据不同的手机屏幕尺寸进行适配，以达到不同屏幕的最佳显示效果。
优点：

支持跨平台，安卓、ios不需要单独开发，只需要开发一套即可
用户无需下载，打开网址即可访问
开发简单，开发、维护成本低

缺点：

每次打开页面，都需重新加载获取数据
过分依赖网络，访问速度无法保证

原生APP

优点：直接依托于操作系统，交互性强，性能好，用户体验较好

缺点：

开发、维护成本高，无法跨平台
不同平台（Android和iOS）需要各自独立开发
开发人员入门门槛较高
app发布审核流程麻烦，维护成本高

移动端适配多种方案详细分析相关推荐

java sofa rpc_sofa-rpc服务端源码的详细分析（附流程图）
本篇文章给大家带来的内容是关于sofa-rpc服务端源码的详细分析(附流程图),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. sofa-rpc是阿里开源的一款高性能的rpc框架,这篇 ...
手淘移动端适配的方案学习和相关思考
flexible方案是手淘经过多年的摸索和实战,总结出来的一套移动端适配方案.这个方案在多屏幕适配以及相关bug修复上做的还是不错的.这也是在读了源码之后才有了更深一层的理解,后面会详细解读. 项目回 ...
移动端适配方案以及面试总结（初学者看出来）
移动端适配的方案概念: 所谓移动端适配,就是WebApp在不同尺寸的屏幕上等比显示方法一:JS动态修改配合CSS预处理器(less) // 计算屏幕宽度 var screen = document ...
使用vw或者rem进行移动端适配
安装插件进行移动端适配 VW方案适配先把vue脚手架升级到最新 npm i -g @vue/cli@latest 安装 postcss-px2vp npm i -D postcss-px2vp 插件 ...
小小Mac:Web移动端适配方案
一.前言在过去的几年时间里,移动端web野蛮生长,智能机的Android阵营和IOS阵营分庭抗礼,随之产生了多个系统版本(系统版本多样);五花八门的屏幕尺寸.屏幕展示技术(如大名鼎鼎的Retina技 ...
h5响应式布局、PC和移动端适配方案
前言春招真的是太卷了,让我怀疑春招到底在招谁(是我太菜惹qaq).总之还是不能松懈下来,总结一下在实习期间遇到的h5的响应式布局.PC和移动端适配方案的选择以及一些问题.本文部分文案由chat-gp ...
移动端适配方案 flexible.js
前言移动端适配一直以来都是前端开发中不可或缺的重要组成部分,如果没有了它,那么你做出来的页面极有可能会出现各种意外(写出来的页面与设计稿之间的差别).所有我们得找到一种相对来说让人比较满意的解决方案 ...
layui移动端适配_web前端-移动端适配方案
三微授渔,授你以渔一般情况下吗,设计稿的设计师按照 375 的尺寸设计,在手机(移动端)快速更新迭代的今天,每个品牌的手机都有着不同的物理分辨率和逻辑分辨率,此时 375 的设计稿,如果想要还原那基 ...
flex 移动开发 html5,[ html5 ] 移动端适配方案 flex布局+rem布局
viewport视口 viewport是严格的等于浏览器的窗口.viewport与跟viewport有关的meta标签的关系,详细建议读一读这篇文章:移动前端开发之viewport的深刻理解,view ...

移动端适配多种方案详细分析

目录