移动适配 - 基础笔记梳理

时间 2019-11-17

标签移动适配基础笔记梳理栏目无线繁體版

原文原文链接

备战秋招，复习基础。若有错误，欢迎批评指正，共同进步！css

桌面浏览器的尺寸与坐标概念

屏幕尺寸web

screen.width/heightnpm

含义：用户的屏幕的完整大小。json

度量：设备的pixels。浏览器

兼容性问题：IE8里，无论使用IE7模式仍是IE8模式，都以CSS的pixels来度量bash
浏览器尺寸ide

window.innerWidth/Heightpost

含义：包含滚动条尺寸的浏览器完整尺寸flex

度量：CSS的pixels

兼容性问题：IE不支持，Opera用设备pixels来度量
滚动移位

window.pageX/YOffset

含义：页面的移位

度量：CSS的pixels

兼容性问题：pageXOffset 和 pageYOffset 在 IE 8 及以前版本的IE不支持, 使用document.body.scrollLeft and document.body.scrollTop 来取代
viewport

document. documentElement. clientWidth/Height

含义：viewport的尺寸。貌似从元素取值，但实际描述的确是viewport的尺寸。

度量：CSS的pixels

兼容性问题：无

功能：控制你网站的最高块状（block）容器：<html>元素。<html>元素为viewport宽度的100%。viewport严格等于浏览器的窗口，不包含滚动条。
度量<html>元素

document. documentElement. offsetWidth/Height

含义：<html>的尺寸

度量：CSS的pixels

兼容性问题：IE用这个值标示viewport的尺寸而非<html>
事件坐标

event.pageX/Y, event.clientX/Y, event.screenX/Y

含义：见下文

度量：见下文

兼容性问题：IE不支持pageX/Y,IE使用CSSpixels来度量screanX/Y

详细描述:
- pageX/Y：从原点到事件触发点的CSS的 pixels
- clientX/Y：从viewport原点（浏览器窗口）到事件触发点的CSS的 pixels
- screenX/Y：从用户显示器窗口原点到事件触发点的设备的 pixels。
Media查询

div.sidebar { 
    width: 300px; 
} 
@media all and (max-width: 400px) { // styles assigned when width is smaller than 400px;  
    div.sidebar {
        width: 100px; 
    }   
}
复制代码

* device-width/height使用screen.width/height来作为的断定值。该值以设备的pixels来度量
* width/height使用documentElement.clientWidth/Height即viewport的值。该值以CSS的pixels来度量
复制代码

移动设备浏览器

我die了！这什么鬼啊啊啊啊啊啊啊啊！！！不知所云！！！

其余概念

物理像素：物理像素又被称为设备像素，他是显示设备中一个最微小的物理部件。每一个像素能够根据操做系统设置本身的颜色和亮度。正是这些设备像素的微小距离欺骗了咱们肉眼看到的图像效果。
设备独立像素：设备独立像素也称为密度无关像素，能够认为是计算机坐标系统中的一个点，这个点表明一个能够由程序使用的虚拟像素(好比说CSS像素)，而后由相关系统转换为物理像素。
CSS像素： CSS像素是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。通常状况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。
屏幕密度：屏幕密度是指一个设备表面上存在的像素数量，它一般以每英寸有多少像素来计算(PPI)。
设备像素比：设备像素比简称为dpr，其定义了物理像素和设备独立像素的对应关系。它的值能够按下面的公式计算获得： 设备像素比＝物理像素 / 设备独立像素

在JavaScript中，能够经过window.devicePixelRatio获取到当前设备的dpr。而在CSS中，能够经过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询。

flexible

经过Hack手段来根据设备的dpr值相应改变标签中viewport的值，从而让页面达到缩放的效果，也变相的实现页面的适配功能。

根据dpr的值来修改viewport实现1px的线
根据dpr的值来修改html的font-size，从而使用rem实现等比缩放
使用Hack手段用rem模拟vw特性

<!-- dpr = 1--> 
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no">
<!-- dpr = 2--> 
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"> 
<!-- dpr = 3--> 
<meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">
复制代码

CSS3新单位 vw

资料参考：谈谈CSS3的长度单位（vh、vw、rem）

vw 是相对视口（viewport）的宽度而定的，长度等于视口宽度的1/100。

假如浏览器的宽度为200px，那么1vw就等于2px（200px/100）。
vh是相对视口（viewport）的高度而定的，长度等于视口高度的1/100。

假如浏览器的高度为500px，那么1vh就等于5px（500px/100）。
vmin和vmax是相对于视口的高度和宽度二者之间的最小值或最大值。

若是浏览器的高为300px、宽为500px，那么1vmin就是3px，1vmax就是5px；若是浏览器的高为800px，宽为1080px，那么1vmin也是8px，1vmax也是10.8px。

vw适配移动端

资料参考：【移动端适配】用vw、vh＋媒体查询打造最完美的移动端适配方案

↑ 写得超全！！一篇完事儿！！

移动端适配神器——postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev
复制代码

经过媒体查询处理边界状况
使用selectorBlackList选择器过滤class，解决组件库冲突