web前端之移动端：知识汇

移动前端自适应适配方法总结

移动端前端适配方案（总结） -- 面试重点

不要再问我移动适配的问题了

一、响应式布局：

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

二、移动端适配

移动设计图： 640px，iopne6： 750px

PC屏： 1240px， 960px

概念：

屏幕尺寸： 屏幕对角线（英寸）

屏幕分辩率： 物理像素（像素点） 1024*1980 px

• 1px： 1横向像素 * 1纵向像素
• 就是卖手机标注的屏幕像素

屏幕像素密度（PPI）： 一英寸内的拥有的像素

设备独立像素：

是一种可以被程序所控制的虚拟像素，在Web开发中对应CSS像素

• 占满屏幕的虚拟的开发像素

像素比： 物理像素/设备独立像素

2.1 为什么适配：

像素：

位图像素： 图片的像素

• 当位图像素 = 物理像素才能完美显示

视口：

视觉视口： （就是文档的实际在浏览器中的大小）

• 就是html元素
• 随用户的缩放改变，即网页开发配置的尺寸被改变
• 网站设计稿，是小于等于视觉视口的

布局视口：（设备出厂定好了， 不能改变， 就是屏幕大小，不是屏幕分辩率）

• 浏览器默认的不出现滚动条的屏幕大小，所以，在移动端， 网页设计尺寸， 不超过布局视口就不出现滚动条，（即配置的视觉视口大于布局视口）
• 滚动条只于布局视口有关
• 移动端要保证， 视觉视口 = 布局视口 ， 才能完整网页

<meta name='viewport' width = 'device-width'/>  
//  布局视口等于视觉视口

• width = ‘device-width‘ 这个相当于移动端的协议，必须签， 不签的话， 调式工具的 像素比, 就会出错 ； 签了才是DPR=2, 或者DPR=3；
• pc端viewport无效

理想视口：

• 签了协议的视口

获取视口的方法：

PC： 只有一个视口

document.docmentElenment.clientWidth (不包空滚动条)

window.inderWidth = 包括滚动条

screen.width = 分辨率

完美视口：

<meta name='viewport' width = 'device-width, inition-scale=1.0'/>  

移动端：

document.docmentElenment.clientwidth = 布局视口

window.inderWidth = 视觉视口（不用，兼容不好）

screen.width = 布局视口/或理想视口（不用）

缩放：

用户缩放

PC： 会影响视觉视口，布局视口

移动端： 会影响视觉视口， 不影响布局视口

系统缩放

改变理想视口，做缩放

旋转:

完美视口，能解决旋转兼容问题

图片：（设计 位图像素 == 物理像素（分辨率））

锐化： 图片缩小

失真： 图片放大

适配： 不同设备等比还原设计图

1、rem适配：

• 改变了一个元素在不同设备上占据的css像素的个数
• html的高宽==视觉视口，width，height，只读；用户缩放会影响

rem基于html的fontSize的大小; 所以所设计图与html的font-size进行等比

（function(){
    var styleNode = document.createElement('style')
    var htmlW = document.documenElement.clientWidth / 16  //将视觉视口分成16份
    
    styleNode.innerHtml = `html{font-size:${htmlW} !important}`  // 利用css才有！imporant属性， 将根字体固定，防止误改
    document.head.appendChild(styleNode)
}）()

• 利用css才有！imporant属性， 将根字体固定，防止误改

优点 ： 没有破坏完美视口

缺点： px到rem太复杂

2、viewport适配

• 改变视觉视口的大小， html的宽度， 使之等于设计图
• 不同设备css像素一样， 视觉视口缩放不一样

(function(targetWidth){
    let targetWidth = 640;
    var scale = documentElement.clientWidth/targetWidth
    var meta = document.querySelector(meta[name='viewport'])
    meta.content = `initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale}, user-scaleble=no`
})()

优点： 所量即所得

缺点： 没有实现完美视口

3、 百分比适配（页面简单可以）

4、vw方案

• vw也是一个相对单位，它相对的是布局视口，1vw就是1%的布局视口宽度。

5、flexible, 是查询屏幕，生成font-size的大小， 所以在不需要适配的时候， 还是要@media 做限定

一物理像素:

1、 图片做border线

2、meta标签：

• rem适配+scale缩放，border用px（taobao方案）
• 这样会改变，适配， 不推荐

3、css3属性；

• @media + transform： scale（1/dpr）缩放 （主流：）

4、box-shadow：

• -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);

web前端之移动端：知识汇

原文：https://www.cnblogs.com/lionker/p/11651171.html