Skip to content
目录

样式兼容

概念

物理像素

物理像素又被称为设备像素,他是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。正是这些设备像素的微小距离欺骗了我们肉眼看到的图像效果。

CSS像素=>viewport像素 逻辑像素

在手机中,css像素控制的是逻辑像素而不是物理像素,因此手机和电脑设置相同的css大小的元素看起来一样

CSS像素是一个抽像的单位,主要使用在浏览器上,用来精确度量Web页面上的内容。一般情况之下,CSS像素称为设备独立像素(device-independent pixel),简称DIPs。

设备像素比(device pixel ratio)

设备像素比 = 物理像素 / 设备独立像素 通过 window.devicePixelRatio 获取 设备像素比简称为dpr,其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到:

自适应

布局大致相同,仅仅元素的大小和位置发生细微改变

媒体查询用来分割区间,而 自适应 的目的 就是如何使网页在各个区间中面对不同的屏幕尺寸都能适应良好。

响应式

不同的设备采用不同的布局

解决方案

设计理念:使用大屏看的更多而不是大屏看的更大的设计来进行布局

  1. <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

  2. 在css中使用px

  3. 在适当的场景使用flex布局,或者配合vw/vh/vmax/vmin和百分比进行自适应

媒体查询

首先来看第一类响应式设计技术,媒体查询 (Media Query) 。 媒体查询的目的在于将数量众多的屏幕尺寸分割为几个区间。 在每个不同的区间里,布局设计是完全不同的,每个区间都需要一套新的布局设计和与之对应的样式表。 而在每个区间中,网页的布局是基本相同的,只有一些细微的区别。 用来 分割 这些区间的 特定尺寸点 叫做 断点 (breakpoint)。

Released under the MIT License.