物理pixel和逻辑/css pixel是什么？
移动端web页面开发需要首先弄明白一个概念：逻辑pixel和逻辑pixel。
正如硬盘上物理分区和逻辑分区一样，物理像素就是实际存在的像素，比如iPhone 6的物理像素750px × 1334px （根据其屏幕的物理尺寸，甚至可以算出每个物理像素的尺寸，总之非常小，显示细腻，所以叫做retina，同理你可以计算一下普通PC显示器的像素尺寸，发现很大，所以iPhone显示更细腻，所以苹果才这么牛～）
逻辑像素怎么理解？两点帮助理解：
1） 正如逻辑分区，是个虚拟的概念，并不真正的存在
2） 正如逻辑分区，这个概念针对的对象是软件，逻辑像素针对的是浏览器；就是说，你创造的这个逻辑概念需要有受众，这个逻辑你要给谁看呢？显然css里面的pixel是针对浏览器看的。
Device/CSS Pixel Ratio （DPR）
为了讲清楚这个问题需要回顾历史。在web 1.0时代，市面上没有智能手机或者平板，大家用的都是PC或者Laptop，屏幕较大，比如至少物理宽度是980px，所以大家设计的网站都是根据在大屏幕上做的。突然有一天，来了一个智能手机，比如iPhone 6的屏幕的物理像素是750px，但是其分配的逻辑像素是375px，即DPR是750/375=2；
如下图所示，造成这个比例不是1:1的原因是，现在设备分辨率更高。此时，引入一个新的概念view port视窗，视窗可以理解成真正的分配的逻辑像素，比如iPhone 6的375px的宽度，你的PC浏览器可见的窗口（比如你缩放浏览器，因为PC一直是1:1的DPR，所以所见即所得）
英文解释，来源：https://blisk.io/devices/details/iPhone-6s
复制代码来源京东大厂：https://jelly.jd.com/article/60dc262a78b202017b299257
复制代码浏览器在移动设备上怎么解读逻辑像素？
上面谈到了，逻辑css pixel是给浏览器看的。可以想象，早期的网站没有做自适应，如果用户用iPhone 6的浏览器打开网站，由于iPhone拥有的逻辑pixel只有375px，显然显示会很糟糕：比如，假设我设计的一个网站其中有一个图片是375px，在正常的大屏幕上显示正常，但是在iPhone 6上会出现一个图片占领了整个屏幕，显示不好看。
于是，浏览器来了个骚操作。。。
浏览器解析你的html，如果没有看到viewport的标签，他就自动把当前的viewport设置为980px，造成你的网站在虚假的大屏幕上展示，这样做是为了让用户自己用手指缩放网页，显然这是一个hacky的方法。 如图：
官方解释：
英文解释，来源：https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts
复制代码英文解释，来源：https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts
复制代码那该怎么办？怎么让移动版浏览器不要做骚操作？
MDN说了，只要在HTML上填写；告诉浏览器，尊重当前设备的逻辑css pixel不要用980px。
<meta name="viewport" content="width=device-width, initial-scale=1">
复制代码接下来的问题是：不让浏览器骚操作，网页怎么展示好呢？ 回答：需要你来骚操作啊，比如各种media query来针对小屏幕设计网站啊。
我来骚操作？怎么做？
一般来讲有两种做法：
1） 根据media query来布局不同的展示，如下
来源：京东大厂前端，根据需要可以调整
复制代码来源：tailwindcss https://tailwindcss.com/docs/responsive-design
复制代码2） 几乎不用media query就做一个移动端的展示，根据屏幕大小，做一些自动化的响应式。
怎么只做一个移动端的自动化响应式呢？
利用rem （em尽量不要用，计算会继承）， 原理：比如在做 H5 的时候，前端通常会让 UI 给 750px 宽的设计图，而在开发的时候可以基于 iPhone X 的尺寸 375px * 812px 来写页面，这样一来的话，就可以用下面的 JS 依据当前页面的视口宽度自动计算出根元素 html 的基准 font-size 是多少。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
psdWidth = 750, // 设计图宽度
recalc = function () {
var clientWidth = docEl.clientWidth;
if ( !clientWidth ) return;
if ( clientWidth >= 640 ) {
docEl.style.fontSize = 1 * ( 640 / psdWidth ) + 'px';
} else {
docEl.style.fontSize = 2 * ( clientWidth / psdWidth ) + 'px';
}
};
if ( !doc.addEventListener ) return;
// 绑定事件的时候最好配合防抖函数
win.addEventListener( resizeEvt, debounce(recalc, 1000), false );
doc.addEventListener( 'DOMContentLoaded', recalc, false );
function debounce(func, wait) {
var timeout;
return function () {
var context = this;
var args = arguments;
clearTimeout(timeout)
timeout = setTimeout(function(){
func.apply(context, args)
}, wait);
}
}
})(document, window);
复制代码比如当视口是 iphone x的逻辑像素， 375px 的时候，经过计算 html 的 font-size 会是 1px，这样有什么好处呢？好处就是方便写样式，比如从设计图量出来的 header 高度是 50px 的，那我们写样式的时候就可以直接写： header { height: 50rem; }
即把rem直接作为一个自适应的“px”来用！
来源：https://juejin.cn/post/6941206439624966152
复制代码另外一个做法是：
我们可以结合 rem 单位来实现页面的布局。rem 弹性布局的核心在于根据视窗大小变化动态改变根元素的字体大小，那么我们可以通过以下步骤来进行优化：
- 给根元素的字体大小设置随着视窗变化而变化的 vw 单位，这样就可以实现动态改变其大小
- 其他元素的文本字号大小、布局高宽、间距、留白都使用 rem 单位
- 限制根元素字体大小的最大最小值，配合 body 加上最大宽度和最小宽度，实现布局宽度的最大最小限制
// rem 单位换算：定为 75px 只是方便运算，750px-75px、640-64px、1080px-108px，如此类推 $vw_fontsize: 75; // iPhone 6尺寸的根元素大小基准值 @function rem($px) { @return ($px / $vw_fontsize ) * 1rem; } // 根元素大小使用 vw 单位 $vw_design: 750; html { font-size: ($vw_fontsize / ($vw_design / 2)) * 100vw; // 同时，通过Media Queries 限制根元素最大最小值 @media screen and (max-width: 320px) { font-size: 64px; } @media screen and (min-width: 540px) { font-size: 108px; } } // body 也增加最大最小宽度限制，避免默认100%宽度的 block 元素跟随 body 而过大过小 body { max-width: 540px; min-width: 320px; }
复制代码扩展阅读： jelly.jd.com/article/60d… juejin.cn/book/684473… juejin.cn/post/694120… juejin.cn/book/685041…