我是公众号线下派对游戏的作者HullQin（欢迎来到关注公众号，发送加微信，交个朋友），转发本文需获得作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。背景我最近写了3篇关于微信大字体的文章：《在微信大字号模式下，网页样式乱了怎么办？》提供了解决方法。用户调整微信字体大小后，可以保证网页的字体大小不变，解决了样式混乱的问题。《让你的网页，适配微信大字号模式！体验超好，快来收藏》介绍几种解决方案，帮助您的网页适配微信大字体。《微信设置大字号后，iOS加载网页时闪动怎么办？》介绍解决iOS大字体模式下首屏闪烁问题的解决方案。说到大字号，就想起了经典的面试题：请说说rem和px的区别。重新认识em/rem和px众所周知，em和rem是相对单位，px是绝对单位。px：定义的“大小和距离”是固定的，不受父元素字体大小的影响。em：font-size中使用的字体大小是相对于父元素的字体大小，其他属性中使用的字体大小是相对于自身的。rem：通过相对于根元素的字体大小的倍数定义“大小，距离”。为什么会有雷姆？首先你要想清楚一个问题：为什么会出现rem？十到五年前，在不同的手机上，你需要设置不同的字体大小，才能让用户看起来正常。例如，16px是计算机上的正常字体大小。但是在手机上，分辨率更高，字体大小需要设置为24px，这样用户才能看到正常大小。但部分手机分辨率较高，要求字体大小为32px为正常大小。如果要满足不同设备的用户，就得动态计算DPI，设置不同的px值。但是，使用rem可以轻松修改所有元素的大小。每当需要修改时，只需修改html根元素的font-size即可。使用rem的元素会相应改变。rem的目的是适配各种宽度的屏幕（其实微信小程序rpx是参考rem设计的，只是rpx解决问题更直接）。rem如何适配各种宽度的屏幕当时业界普遍采用的方案是手淘开源的flexible.js。源码很短，核心代码是：vardocEl=document.documentElement;//根元素，即functionsetRemUnit(){varrem=docEl.clientWidth/10;//设置根元素大小的font-，即1rem的大小（设置为1/10视图宽度）docEl.style.fontSize=rem+'px';}setRemUnit();window.addEventListener('调整大小',setRemUnit);这规定1rem=1/10视图宽度将确保所有元素成比例。无论多宽的手机屏幕，都能兼容。rem的缺陷是在宽度较大的设备上，整体缩放比例过大。用户应该期望看到更多内容。大家可以阅读这篇文章《为什么2022年不建议你在小程序中用rpx》了解整体缩放体验问题。它的兼容性不好，还存在一些问题，尤其是size遇到小数点的时候，bug比较多。现在几乎所有的手机浏览器都支持viewport，flexible.js退出了历史舞台。而flexible.js的作者在2018年也指出了这一点：下面说说视口图，列出了iPhone的一些逻辑像素Points，渲染像素RenderedPixels，物理像素PhysicalPixels，以及设备PhysicalDevice：现代发展网页的，通常会在头部加入这段代码：在加入这段代码之前，px是渲染像素RenderedPixels，文字会显得很小（随着屏幕越来越清晰，同一设备区域渲染的像素越来越多，文字会越来越小）。即使是16px的字体大小也会非常小。添加这段代码后，px对应Points，基本和真实模型的大小成正比，不会受到ppi（pixelperinch）的影响。此时在各种设备下，16px的字符在人眼看来都是正常的字体大小。一些示例：设备视口大小（宽x高）设备分辨率（宽x高）iPhone12390x8441170x2532iPhone12Mini360x7801080x2340iPhone12Pro390x8441170x2532iPhone12ProMax428x9261248x27781ix27781i1136iPhone11ProMax414x8961242x2688iPhone11XsMax414x8961242x2688iPhone11414x896828x1792iPhone11Xr414x896828x1792iPhone11Pro375x8121125x2436iPhone11X375x8121125x2436iPhone11Xs375x8121125x2436iPhoneX375x8121125x2436iPhone8Plus414x7361080x1920iPhone8375x667750x1334iPhone7Plus414x7361080x1920iPhone7375x667750x1334iPhone6sPlus414x7361080x1920iPhone6s375x667750x1334iPhone6Plus414x7361080x1920iPhone6375x667750x1334iPadPro1024x13662048x2732iPad3rdand4thgeneration768x10241536x2048iPadAir1and2768x10241536x2048iPadMini768x1024768x1024iPadMini2and3768x10241536x2048,use320px),即保证网页有符合设计的布局>=375px开发时（响应式适配需要结合flex），那么在现在的主流手机上，没有无论DPI是多少，字体大小都是正常显示大小。你可以参考我的网站game.hullqin.cn中的所有页面。我把body的min-width设置为320px，结合一些灵活的距离（percentage实现或者flex实现），加上一些固定的距离（px实现），各种宽度的屏幕设备就完成了。在今天，极致的用户体验需要设计和前端的共同努力。需要在设计上做出妥协，同时设置一些可变距离和一些固定距离，不再追求等比还原，保证设计能够适应各种宽度。前端需要努力调试，使用flex技术或者百分比宽度，让网页在各种宽度下的样式达到预期。因此，flexible.js也退出了历史舞台。flexible退出历史舞台后为什么不推荐使用rem？想想这个场景：你看到24px并且你有一个它有多大的图像。但是如果看到1.5rem，可能需要查看根元素的字体大小，重新计算，会影响开发效率。因此，既然我们不再需要动态修改页面上元素的大小，那我们就直接使用px吧。写在最后，极致的用户体验需要设计和前端的共同努力。需要在设计上做出妥协，同时设置一些可变距离和一些固定距离，不再追求等比还原，保证设计能够适应各种宽度。前端需要努力调试，使用flex技术或者百分比宽度，让网页在各种宽度下的样式达到预期。我是公众号线下派对游戏作者HullQin（欢迎关注公众号，发加微信，交朋友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
