关于网页适配的总结设备像素又称物理像素（physical pixel），设备能控制显示的最小单位（每个单位下有三个子像素

基础知识

像素

像素是屏幕的最小单位，所以平常说的像素不是px，而是指设备屏幕的最小单位

设备像素

设备像素又称物理像素（physical pixel），设备能控制显示的最小单位（每个单位下有三个子像素（红黄蓝）这就是rgb色域），我们可以把这些像素看作成显示器上一个个的点，一般指的是分辨率。

之前没出现 Retina（视网膜）技术之前（苹果公司提出），1px对应的就是一个物理像素，随之出现2倍屏，3倍屏指的是之前对应的1物理像素对应相应2倍甚至3倍，苹果公司已经解决了相应的1px渲染到 retina 设备的适配问题，开发人员需要解决的是图片适配的问题，200*200图片在正常屏幕下正常显示，但是在2倍或者3倍的屏幕下会被放大2，3倍，所以图片一般要做2到3倍的适配。

逻辑像素

独立于设备的用于逻辑上衡量像素的单位。CSS 像素就是逻辑像素，CSS 像素是 Web 编程的概念。一般指px，它是图像显示的基本单元，既不是一个确定的物理量，也不是一个点或者小方块，而是一个抽象概念。所以在谈论像素时一定要清楚它的上下文！对于web的设备逻辑像素可用screen.width和screen.height去取。

设备像素比

设备分辨率 / 逻辑像素 = DPR（设备像素比）一般就是指的几倍屏，也可window.devicePixelRatio直接获取，是几倍屏就需要几倍的图片。

vw / vh（css3新增）(兼容性)

vw (设备的100%宽度)
- 1vw = 浏览器可视宽度 /100
vh(设备的100%高度)
- 1vh =浏览器可视高度 /100

vmin/vmax（css3新增）(兼容性)

设备的高宽中哪一个小，哪个就是vmin，比如1920*1080，vmin代表的就是1080，所以1vmin就是 1080/100
vmax与之相反

rem/em

rem （css3新增）(兼容性)
- 相对于HTML 根元素的 font-size的大小定义
- 全局的rem大小是固定的
- 不设置的情况下因为浏览器默认HTML的font-size是16px，所以1rem=16px
em
- em的值并不是固定的
- em会继承父级元素的字体大小
- 如果父级元素未定义，那么1em=16px

媒体查询（css3新增）(兼容性)

可以通过查询规则不同写入不同的css样式从而渲染
逻辑操作符

meta信息

元信息用来告知浏览器的网页设置

viewport 的 meta

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

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放

PC适配

主流适配

1200px的主体宽度居中展示
两侧用百分比展示

流式适配

栅格栏布局

设计师需要做栅格栏设计，页面均等为12份，然后所有的布局按照栅格栏的对齐线进行对齐
当需要缩放时进行百分比缩放即可
适合大量留白的页面，布局样式单一的页面

响应式适配

媒体查询

示例

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>

提前写好相关的查询规则
- 一般规则都是市面上的主流分辨率的宽度，

大屏适配

对接
- 大屏物理信息（大屏一般是led屏幕，有p系列的规则, 施工方一般都知道）
  - 得知大屏的物理信息自己可计算出实际可达最高分辨率，比如 12m*4m 大小的p50 led屏，p50的是1平方米 400 * 400 个点，可算出实际分辨率为 12 * 400 / 4 *400 = 4800/1600
- 大屏的分辨率（根据上个信息可得公式）
  - 宽 * 点数 / 高 * 点数 = 分辨率
  - 需要告知设计，设计需要按照该分辨率作图
- 大屏的终端
  - 只有终端支持最高的分辨率，大屏才可显示最高分辨率
选用方案
- 固定写法
  - 直接把大小全部写死

移动端适配

小程序

现在各大厂的小程序采用的都是 rpx代替px来进行布局，其实他就是rem ，所以咱们不需要操心适配的事情

H5移动端

流式布局
- 简书，掘金（响应以及流式）

rem 布局

淘宝的 flexible
- 利用不同分辨率下的 HTML 的font-size来控制 rem的大小，将屏幕分为10等份

网上所流传的 rem 计算公式

不同分辨率，不同比例

resize(originSize) {
      let widths = document.documentElement.clientWidth
        var scale = (widths / originSize) * 200 //在X轴下求出比例并放大100倍。
      document.getElementsByTagName('html')[0].style.fontSize = scale + 'px'
    }

参考文档

Web 端屏幕适配方案

掌握web开发基础系列--物理像素、逻辑像素、css像素

什么是物理像素、虚拟像素、逻辑像素、设备像素，什么又是 PPI, DPI, DPR 和 DIP

浅谈-web屏幕适配的解决方案

关于网页适配的总结

目录