众所周知，前端的移动端适配题目是个老生常谈的题目，口试中也是常常被问到，口试官常常是一句“你是怎么做移动端适配的”大概“谈谈你对移动端适配的明白”就让口试者感觉不知道该从什么地方动手去答复这个题目。手机市场日渐丰富的同时，给我们前端开辟职员带来的网页内容自顺应屏幕尺寸举行表现的题目也日渐凸显出来。
本文将针对移动端适配题目举行总结，总结一下各主流适配方案以及在主流框架中是怎么做适配的，盼望通过本文能让读者在碰到移动端适配的口试题目时不再不知所措。
相干概念
要搞明白移动端适配题目，就要先搞明白屏幕、像素和视口三个概念。
一、屏幕
1屏幕巨细
屏幕巨细指屏幕的对角线的长度，单位一样平常是英寸。常见的手机屏幕巨细3.5、4、4.7、5.0、5.5、6.0等。
常见手机屏幕查察网址：http://screensiz.es/。
留意:
英寸的英文为inch,英尺的英文是foot
1foot=12inch
1inch=2.54cm
02屏幕分辨率
屏幕分辨率是指屏幕横纵向上的像素点数。一样平常表现情势x*y大概y*x表现。比方IPhone6的屏幕分辨率为750*1334，华为P30的分辨率为2340*1080。
留意:
屏幕分辨率是一个固定值，生产出来就固定了，无论手机屏幕还是电脑屏幕。
屏幕分辨率与表现分辨率差别。盘算机可以修改表现分辨率，信号转达给屏幕，在屏幕上表现。
1080P的分辨率是1920x1080720P1280*720。
2K屏幕是单一方向分辨率具有约2000像素的表现装备。最标准的2K分辨率为2048×1024。
几款手机的屏幕分辨率：
二、像素
01物理像素
装备像素/物理像素是一个长度单位。1物理像素对应表现装备中一个微小的物理部件。
装备像素是手机屏幕的一个参数，由手机制造商决定。比方IPhone6的物理像素为750*1334。
02装备独立像素
装备独立像素，简称DIP（device-independentpixel）,又称为装备无关像素，是一个长度计量单位。
装备独立像素也是手机屏幕的一个参数，由手机制造商决定。比方IPhone6的装备独立像素为375*667。
1个装备独立像素可以以为是盘算机坐标体系中的一个点，代表可以通过程序控制利用的假造像素。
平凡屏幕下1装备独立像素便是1物理像素。
高清屏幕下1装备独立像素便是N物理像素。
装备独立像素的出现，使得纵然在高分辨率的屏幕下，也可以正常尺寸的表现元素，代码不受到装备的影响。
比如Retina屏幕：
Retina是苹果公司2010年推出的一种表现标准，是把更多的像素点压缩至一块屏幕里，从而到达更高的分辨率并进步屏幕表现的精致程度。
几款手机的屏幕像素参数，更多请查察https://uiiiuiii.com/screen/。
03CSS像素
CSS像素又称为假造像素，是一个相对单位，单位为px。
CSS像素不能直接跟实际中的长度单位换算。
CSS像素重要用在CSS与JS中控制元素的巨细与位置。
04位图像素
位图图像亦称为点阵图像或栅格图像，是由单个的像素点构成的。放大后会失真。(pngjpegjpggif)
矢量图，也称为面向对象的图像或画图图像，在数学上界说为一系列由线毗连的点。放大后不会失真。软件有AdobeIllustrator，Sketch(svg)。
位图像素也是一个长度单位。位图像素是栅格图像（如：png，jpg，gif等）最小的数据单位。
1个位图像素对应于1个物理像素，图片才华得到美满清楚的展示（马赛克）。
05像素之间的关系
页面不缩放的环境下，CSS像素==独立装备像素==逻辑像素==DIP==位图像素。
在一个标准的表现密度下(平凡屏)，一个CSS像素对应着一个装备像素，高清屏幕下一个CSS像素便是N个物理像素。
06像素密度
屏幕上每英寸可以表现的像素点的数量，单位是ppi（pixelsperinch），这里尚有另一个单位dpi（dotsperinch），两个值的盘算方式都一样，只是利用的场景差别。PPI重要用来衡量屏幕，DPI用来衡量打印机，鼠标等装备。
苹果曾经给出一个标准：手机屏幕到达300PPI、平板屏幕到达220PPI、条记本电脑屏幕到达200PPI即可以为是Retina屏幕。
07像素比
像素比（DPRdpr）：单一方向上装备物理像素和装备独立像素的比例。
window.devicePixelRatio
像素比的作用：
程序可以根据像素比来表现差别的图片，到达清楚表现网页的结果。
@mediascreenand(-webkit-min-device-pixel-ratio:2){
.logo{background-image:url('./image/logo@2x.png');}
}
并不是全部的图片都如许处理惩罚，只必要处理惩罚那些页面布局必要的图片和图标即可。
三、视口
01PC端
在PC端，视口指的是欣赏器的可视地区。其宽度和欣赏器窗口的宽度保持同等。在CSS标准文档中，视口也被称为初始包罗块，它是全部CSS百分比宽度推算的根源。
02移动端
移动端的视口与PC端差别，有三个视口：
布局视口
视觉视口
抱负视口
布局视口：布局视口是用来放置网页内容的地区。
一样平常移动装备的欣赏器都默认界说一个假造的布局视口（layoutviewport），用于办理早期的页面在手机上表现的题目。视口巨细由欣赏器厂商决定，大多数移动装备的布局视口巨细为980px。
获取方式：
document.documentElement.clientWidth
document.documentElement.clientHeight
b.视觉视口：视觉视口就是用户可见的地区。
获取方式：
window.innerWidth
window.innerHeight
注：不缩放的环境下，视觉视口宽度==布局视口宽度。
c.抱负视口：宽度与屏幕同宽(装备独立像素)的布局视口称为抱负视口。
抱负视口的长处：
用户不必要缩放和滚动条就能看到网站的全部内容。
针对移动端的计划稿更轻易开辟。
留意：抱负视口不是真实存在的视口
设置抱负视口的方法：
metaname="viewport"content="width=device-width"///大概
metaname="viewport"content="initial-scale=1.0"///合体
metaname="viewport"content="width=device-width,initial-scale=1.0"/
移动端适配
相识了上面这些相干概念后，咱们来进入主题，看看移动端适配。
移动端装备的屏幕尺寸繁多，要想让页面的出现同一，必要对差别尺寸的装备举行适配。适配的方式通常有4种：
媒体查询（meidaqueries）
viewport+rem适配
Flex布局
vm/vh
01媒体查询
meidaqueries的方式可以说是我早期采取的布局方式，它重要是通过查询装备的宽度来实行差别的css代码，终极到达界面的设置。核心语法是：
@mediascreenadd(max-width:768px){
/*当屏幕尺寸小于768px时，应用下面的css样式*/
}
02viewport+rem适配
em和rem都是CSS中的长度单位。而且两个都是相对长度单位，不外两个有点区别：
em相对的是父级元素的字体巨细，
rem相对的是根元素的字体巨细。
核心是等比缩放
rem适配的战略有以下几种：
方法一
先按照IPhone6举行页面布局，再举行适配
1、美满视口设置
2、计划稿总宽375布局
3、设置font-size100px尺寸转为rem
4、增长JS代码举行页面适配
方法二
编写时直接利用rem单位举行布局
1、美满视口设置
2、总宽375布局
3、以font-size100px举行尺寸换算，设置rem
4、增长JS代码举行页面适配
方法三
选择一个计划稿宽度的比例尺寸作为根元素的字体巨细
1、美满视口设置
2、通过JS设置页面的根元素字体巨细。可以除以10也可以除以其他的数字
3、根据计划稿利用rem设置元素巨细
03flex布局
以天猫的实现方式举行阐明：
它的viewport是固定的：
metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
高度定死，宽度自顺应，元素都采取px做单位。
随着屏幕宽度变革，页面也会跟着变革，结果就和PC页面的流体布局差不多，在哪个宽度必要调解的时间利用相应式布局调调就行，如许就实现了适配。
04vw／vh
vw是相对单位，1vw表现屏幕宽度的1%。基于此，我们可以把全部必要适配屏幕巨细等比缩放的元素都利用vw作为单位。不必要缩放的元素利用px做单位。
vw/vh适配一样平常应用在框架中，以vue框架为例，只必要举行以下下几步即可实现适配：
1、安装postcss-px-to-viewport
npmipostcss-px-to-viewport
2、在项目根目次下建名为vue.config.js的文件（不懂为什么要建名为vue.config.js的可以看一下vue-cli下webpack相干）
3、在vue.config.js中引入postcss-px-to-viewport
constpxtovw=require('postcss-px-to-viewport')
4、vue.config.js中设置项如下
module.exports={
plugins:{
'postcss-px-to-viewport':{
unitToConvert:'px',//必要转换的单位，默以为"px"
viewportWidth:1920,//计划稿的视口宽度
unitPrecision:5,//单位转换后保存的精度
propList:['*'],//能转化为vw的属性列表
viewportUnit:'vw',//盼望利用的视口单位
fontViewportUnit:'vw',//字体利用的视口单位
selectorBlackList:[],//必要忽略的CSS选择器，不会转为视口单位，利用原有的px等单位。
minPixelValue:1,//设置最小的转换数值，假如为1的话，只有大于1的值会被转换
mediaQuery:false,//媒体查询里的单位是否必要转换单位
replace:true,//是否直接更换属性值，而不添加备用属性
exclude:undefined,//忽略某些文件夹下的文件或特定文件，比方'node_modules'下的文件
include:undefined,//假如设置了include，那将只有匹配到的文件才会被转换
landscape:false,//是否添加根据landscapeWidth天生的媒体查询条件@media(orientation:landscape)
landscapeUnit:'vw',//横屏时利用的单位
landscapeWidth:1920//横屏时利用的视口宽度
}
}
}
5、重启项目就能自顺应了
051px边框题目
高清屏幕下1px对应更多的物理像素，以是1像素边框看起来比力粗，办理方法如下：
方法一
1、边框利用伪类选择器，大概单独的元素实现。比方底部边框
.box2::after{
content:'';
height:1px;
width:100%;
position:absolute;
left:0;
bottom:0;
background:#000;
}
2、在高清屏幕下设置
@mediascreenand(-webkit-min-device-pixel-ratio:2){
.box2{transform:scaleY(0.5);}
}
@mediascreenand(-webkit-min-device-pixel-ratio:3){
.box2{transform:scaleY(0.33333);}
}
方法二
1、rem页面布局
varfontSize=50;
document.documentElement.style.fontSize='50'+px;
2、元素的边框设置为1px
3、通过viewport中的initial-scale将页面团体缩小
vardpr=window.devicePixelRatio;
viewport.setAttribute('content','user-scalable=no,initial-scale='+1/dpr+',user-scalable=no');
4、重新设置根元素字体
document.documentElement.style.fontSize=fontSize*dpr+'px';
总结
本文中例举的适配方案是如今比力主流的适配方案，各人可以根据项目需求来利用差别的适配方案，也盼望本文可以或许资助到口试的同砚在适配这方面的题目上不再不知所措，跟口试官交换的时间可以问有所答，各抒己见。
CopyrightYourWebSite.SomeRightsReserved.
京ICP备2023016396号-1PoweredByESCLINK.
我要评论