移动端适配_移动端分辨率-CSDN博客

本文链接：https://blog.csdn.net/m0_73265535/article/details/130737146

文章讨论了移动端开发时对兼容性的处理，重点在于webkit的使用。提到了不同Android版本和浏览器的差异，并指出只需关注Chrome调试。文章还介绍了屏幕尺寸、分辨率、像素密度(DPR)的概念，以及如何利用REM和VW单位进行响应式设计，解决不同设备显示效果的问题。最后，提出了通过计算vw来动态设置html的font-size，以实现更灵活的适配策略。

摘要由CSDN通过智能技术生成

不用考虑兼容性

移动端开发主要对象是手持设备，其中绝大部分是IOS和Android系统，所以在开发此类页面时不必纠结IE和其他一些奇葩浏览器的兼容性，webkit是本次开发重点。

当然，不同版本的Android是存在一些问题的，还有就是不同浏览器的版本也存在一些差别，IOS在这方面表现甚好。

所以在开发时我们只需使用Chrome进行调试即可

移动端相关概念

屏幕尺寸

屏幕尺寸是指屏幕对角线的长度，单位为英寸，1英寸=2.54厘米

常见移动端设备尺寸：

iphone6,7,8 4.7英寸

iphone6,7,8（plus） 5.5英寸

iphone4 3.5英寸

2.屏幕分辨率

屏幕分辨率是指横纵方向上的像素点数，1px=1个像素点

常见移动端设备屏幕分辨率：

iphone6,7,8 1334*750

iphone6,7,8(plus) 1920*1080

iphone5 1136*640

iphone4 960*640

3.屏幕像素密度

屏幕像素密度是指屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度，单位为ppi (pixels per inch)

尝试完成下基本页面效果

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.con>div:nth-child(1){

width: 186px;

height: 186px;

background-color: red;

float: left;

}

.con>div:nth-child(2){

width: 186px;

height: 186px;

background-color: pink;

float: left;

}

.con>div:nth-child(3){

width: 186px;

height: 186px;

background-color: gold;

float: left;

}

</style>

</head>

<body>

</div>

</body>

</html>

pc效果

但是到移动端

发现效果不对了所以传统开发方式不能很好的支持移动端开发

4.DPR

DPR是指设备像素比，即

DPR = 物理像素（又称为———设备像素）/逻辑像素或 DPR = 屏幕分辨率/实际设备尺寸

常见移动端设备DPR值

iphone4,5,6,7,8 DPR=2

iphone6,7,8plus DPR=3

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* 通过计算当前页面的DPR设备像素比来得到对应的大小重新运行 */

.con>div:nth-child(1){

width: 93px;

height: 93px;

background-color: red;

float: left;

}

.con>div:nth-child(2){

width: 93px;

height: 93px;

background-color: pink;

float: left;

}

.con>div:nth-child(3){

width: 93px;

height: 93px;

background-color: gold;

float: left;

}

</style>

</head>

<body>

</div>

</body>

</html>

但是非常的麻烦总不可能每次都要计算用这么大的工作量

rem是相对于页面根元素<html>的字体大小倍数来进行改变的（过个浏览器html节点默认大小是16px）

但是注意由于默认是16px 在计算大小的时候很不方便例如想要100的大小那必须通过100/16=6.25rem。再比如想要88大小的时候必须是88/16=5.5 计算非常的不方便所以为了简化那么我们可以给HTML页面大小设置成100px 那么在计算的时候非常方便了例如

100大小 100/100=1 50大小100/50=0.5 24大小 100/24=0.24这样一来就非常方便了

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html{

font-size:100px;

}

/* 但是注意这里使用的还是DPR之后的大小 */

.con>div:nth-child(1){

width: 0.83rem;

height: 0.83rem;

background-color: red;

float: left;

}

.con>div:nth-child(2){

width: 0.83rem;

height: 0.83rem;

background-color: pink;

float: left;

}

.con>div:nth-child(3){

width: 0.83rem;

height: 0.83rem;

background-color: gold;

float: left;

}

</style>

</head>

<body>

</div>

</body>

</html>

但是这里发现一个问题就是在当前手机可以实现换个手机就不行了

怎么办呢？

这个时候需要根据不同大小的窗口来改变html根节点的font-size即可来完成移动端索要的效果

6.vw是视口（viewport units）单位，何谓视口，就是根据你浏览器窗口的大小的单位，不受显示器分辨率的影响，这就代表了，我们不需要顾虑到现在那么多不同电脑有关分辨率的自适应问题。

vw是可视窗口的宽度单位，和百分比有点一样，1vw = 可视窗口的宽度的百分之一。比如窗口宽度大小是1800px，那么1vw = 18px。和百分比不一样的是，vw始终相对于可视窗口的宽度，而百分比和其父元素的宽度有关。

在比如常见的iphone6 他的逻辑像素是375 那么1vw=可视窗口的宽度的百分之一（3.75px）

那么在这个时候为了方便rem的计算刚才我们是把html根节点的大小设置成为100px那么多少vw等于100px呢？

就是用100/刚才换算出来的3.75=26.67

所以html的font-size设置成为26.67vw;

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

html{

font-size:26.67vw;;

/*1vw = 视窗宽度1% 得到1vw*/

/*1vw = 3.75px */

/*?vw = 100px 为了方便计算rem所以把100px转换成vw*/

/*? = 100/3.75 = 26.67 得到当前100px是多少vw*/

}

.con>div:nth-child(1){

width: 0.83rem;

height: 0.83rem;

background-color: red;

float: left;

}

.con>div:nth-child(2){

width: 0.83rem;

height: 0.83rem;

background-color: pink;

float: left;

}

.con>div:nth-child(3){

width: 0.83rem;

height: 0.83rem;

background-color: gold;

float: left;

}

</style>

</head>

<body>

</div>

</body>

</html>

工作中或者写项目的时候具体流程是什么

拿到设计图

看看图片的大小就是那个ps中选择图像------>图像大小（通常美工给我们的设计图都是750/640的设计图）那么在这个时候iphone6的分辨率刚好符合750 如果给我640那么我就是用iphone5 640的分辨率

确定dpr值都 2

因为我们要使用rem 但是rem 是根据html根节点的font-size来走的所以我们需要在不同设备下改变这个值使用vw这个单位就可以 1vw=当前设备的大小的百分之1

我们需要计算当前的页面需要多少vw才完成100px（100px的原因是好计算）

这是固定的记住就好

我要先计算出1vw

根据设计图我们幻想就是750的设计图那么使用的就是iphone6 375 1vw=375*1% =3.75

我们现在已经计算出了1vw=3.75px 那么100px是多少vw呢 100/3.75=26.67vw

如果美工给我们的设计图是750 那么就可以使用上面计算出来的26.67vw 设置给html的font-size：26.67vw;
在写项目的时候就把原来的px全部替换成为rem 1rem=100px；