移动适配 - 基础笔记梳理

vine
560 阅读4分钟

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

资料参考：viewports剖析

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

  • 屏幕尺寸

    screen.width/height

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

    度量：设备的pixels。

    兼容性问题：IE8里，不管使用IE7模式还是IE8模式，都以CSS的pixels来度量

  • 浏览器尺寸

    window.innerWidth/Height

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

    度量：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的值，从而让页面达到缩放的效果，也变相的实现页面的适配功能。

  1. 根据dpr的值来修改viewport实现1px的线
  2. 根据dpr的值来修改html的font-size，从而使用rem实现等比缩放
  3. 使用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＋媒体查询打造最完美的移动端适配方案

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

  1. 移动端适配神器——postcss-px-to-viewport
npm install postcss-px-to-viewport --save-dev

postCss配置
package.json配置

  1. 通过媒体查询处理边界情况
  2. 使用selectorBlackList选择器过滤class，解决组件库冲突
avatar
文章
阅读
粉丝