我们也总结了一套比较具有代表性的设备断点
原文链接
响应式构造自从进入移动互联网时代，响应式构造这个词经常呈此刻 Web 设计和开发范围，它让 Web 页面在差别尺寸的设备上都具有良好的浏览体验。
开始之前在讲解响应式构造之前，需要先了解一下根本常识，只有对它们都有必然的了解，才华在做响应式构造时拔取合适的技术方案。
像素像素这个单位很常见，指的是图像中最小的单位，一个不成再支解的点，在计算机屏幕上一般指屏幕上的一个光点。例如常见的描述中 iPhone X 的辨别率是 1125x2436，一般指的是在长和宽上像素点的个数。但是在 Web 开发中，我们知道 iPhone X 的像素是 375x812，那么这又是怎么回事呢？这里需要讲到设备像素（Device Pixels）和虚拟像素，也可以叫 CSS 像素（CSS Pixels）或者逻辑像素，后面我们统一使用 CSS 像素这个称号，在 Android 开发中可以叫设备无关像素（Device Independent Pixel，，简写 dip）。设备像素很好理解，对应屏幕上光点的数量。
在科技成长到今天，屏幕辨别率已经到达人眼无法区分单个像素的水平，人眼无法在 iPhone X 宽不到 7cm 的屏幕上数出 1125 个像素点。Web 开发人员眼中的 1px 可能对应多个设备像素，Peter-Paul Koch 在他的博文中有详细的讲解《A pixel is not a pixel is not a pixel》。
好比在 iPhone X 上，设备像素是 1125x2436，而 CSS 像素是 375x812，那么一个 CSS 像素对应的是长和宽各 3 个设备像素，9个设备像素点。
1 css pixel = 3 x 3 device pixels阿谁这个比值 3 就是我们平时所说的设备像素比（Device Pixel Ratio），简称为 DPR。DPR 它并不是一个单位，而是一个比值，这个比值可以在浏览器中通过 JavaScript 代码获取。
// 设备像素比，在 iPhone X 中即是 3，在 iPhone 6 中即是 2 window.devicePixelRatio EM vs REM EMEM 是相对单位，相对付元素自身的 font-size，它不像像素是固定的单位，因此很适合用来做响应式构造。
<style> h1 { font-size: 20px; margin: 1em; /* 1em = 20px */ } p { font-size: 14px; padding: 1em; /* 1em = 14px */ } .outer { font-size: 12px; } .inner { font-size: 2em; padding: 1em; /* 1em = 24px*/ } </style> <div class="outer"> <div class="inner"></div> </div>如果当前元素没有设置 font-size，那么 1em 实际巨细是几多？
p { padding: 1em; /* 1em 即是几多像素*/ }在上面的代码中没有设置 <p> 的 font-size，它会从担任父元素的字体巨细，如果父元素也没有设置字体巨细，会一直找到根元素 <html>，而 <html> 元素的默认 font-size 一般是 16px。有的元素有默认的字体巨细，好比 <h1> 的 font-size 默认即是 2em，最终计算还是会追溯到最外层。
<html> <head></head> <body> <p>1em = 16px</p> </body> </html> REMREM = Root EM，顾名思义就是相对付根元素的 EM，是按照根元素来计算出CSS 像素点的巨细。根元素就是 <html>，而它的默认字体巨细是 16px。
h1 { font-size: 20px; margin: 1rem; /* 1rem = 16px */ } p { font-size: 1rem; /* 1rem = 16px */ }所以，如果我们转变根元素的字体巨细，页面上所有使用 rem 的元素城市被从头计算元素属性并重绘。
EM vs REMEM 和 REM 都是相对单位，两者都可以用来做响应式构造的单位。按照它们的特性，EM 和 REM 互有优劣。
EM - 对付模块化的页面元素对照好，好比 Web Components 标签，标签内的元素都按照父元素计算像素巨细，只需设置最外层父元素的字体巨细可同时影响子元素，连结自界说元素具有必然的模块关闭性。但，EM 对照难以追溯，需要逐层向上排查显示设置了字体巨细的元素。
REM - 便利是 REM 最大的好处，只需知道 <html> 的字体巨细即可计算当前的实际像素巨细。
有的开发者全部都用 REM，有些开发者全部用 EM，这其实都是不同理的用法。开发者应该视情况差别给与差此外单位，但在此刻的环境下，REM 使用的更广泛一些。
开发者按照设计师供给的 UE 图进行开发时，丈量出来的巨细单位一般是像素，如果需要转换为 REM，可以给与 PostCSS 的插件 postcss-px2rem 自动转换为 rem 单位。
vw, vh，百分比 vw 和 vhvw 和 vh 此刻还不常见，但也逐渐开始被开发者使用，出格是在构造上。
vw - viewport width，视口宽度，1vw = 1% 视口宽度
vh - viewport height，视口高度，1vh = 1% 视口高度
vw 和 vh 的逻辑对照简单，100vw = 100% 视口宽度，视口（viewport）会在后面详细讲解。下面的代码演示如安在 iPhone X 上计算 vw 的实际 CSS 像素巨细，vh 的计算要领和 vw 一样。
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> p { width: 50vw; /* 1vw = 1 / 100 * 375px = 3.75px */ } </style> </head> <body> <p>50vw = 50% viewport width = 50% * 375px = 187.5px</p> </body> </html>温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31665.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")