响应式网页设计：相对尺寸
使用相对尺寸，能使得网页在各种屏幕上都能动态调整组件的大小，在各种设备上都能得体的显示。是时候告别 px ，迈向现代化、响应式的网页设计中了
关于屏幕分辨率
可以使用浏览器自带的多设备模拟器来查看网站在各种设备上的情况。
物理分辨率
物理分辨率就是硬件分辨率，一般厂家给出的数值就是这个。
物理分辨率和逻辑分辨率中两个值中较大的那个一般就是物理分辨率。
逻辑分辨率
出现这个玩意是因为系统设置里会设置缩放：
缩放后的分辨率即是逻辑分辨率。
就拿我的联想拯救者（Lenovo Legion Y9000P 2022）举例，
我的屏幕是 2k 屏，物理分辨率是 2560 x 1600 ，逻辑分辨率可以这样算：
- 缩放 150%
- 2560 ÷ 150% = 1707
- 1600 ÷ 150% = 1067
前端开发中，都是按照逻辑分辨率 来。css 写的 1px 通常指的就是 1个逻辑像素（也叫CSS像素）
为啥要搞这两个
下面可能是一些和技术无关的废话，我个人比较感兴趣所以贴在这里。不感兴趣请跳过阅读。
在早期，屏幕技术没那么发达，像素密度（PPI - Pixels Per Inch）普遍较低。此时，物理分辨率和我们感知到的“逻辑”分辨率基本是 1:1 对应的。一个100像素宽的按钮，在屏幕上就占用100个物理像素点，其显示大小也基本符合预期。
随着技术发展，出现了高DPI（Dots Per Inch，等同于PPI）屏幕，比如苹果的Retina屏。这些屏幕在保持与旧屏幕相似物理尺寸的同时，塞入了成倍的物理像素。
-
iPhone 3GS: 3.5英寸屏幕，物理分辨率 320x480 (PPI ≈ 163)
-
iPhone 4: 3.5英寸屏幕，物理分辨率 640x960 (PPI ≈ 326, 刚好是3GS的两倍)
如果直接按物理分辨率渲染： 那么在iPhone 4上，之前为iPhone 3GS设计的网页（比如一个320px宽的页面），如果直接用640个物理像素去渲染原本320像素宽的内容，每个元素都会变得只有原来一半大小，文字会小到难以阅读，按钮会小到难以点击。用户体验会极差。为了解决上述问题，操作系统和浏览器引入了逻辑分辨率的概念。
-
对用户而言：
-
保持可读性和可用性： 逻辑分辨率确保了UI元素（文字、按钮等）在不同像素密度的屏幕上看起来大小相似，不会因为物理像素变多而缩小到无法使用。
-
享受更高清晰度： 物理分辨率的提升，使得在高DPI屏幕上，同样的逻辑尺寸内容可以用更多的物理像素来精细渲染，从而获得更清晰、更锐利的视觉效果。
-
-
对开发者/设计师而言：
-
简化设计和开发： 可以基于逻辑像素进行设计和编码，大大简化了跨设备适配的复杂度。
-
面向未来： 这种机制使得内容能够平滑适应未来更高DPI的屏幕，而无需大规模重写。
-
二倍图
二倍图的尺寸是按照物理分辨率来的。
这是设计稿里可能会给的东西，设计师为了防止图片在高分辨率屏幕下模糊失真，所以会给这种图。
在各种切图软件中，都能看到倍数的选项，比如 2x 什么的。实战中试试哪个合适就行了。
基于 rem 和 flexible.js 的解决方案
这个了解即可，实战中建议用 vw && vh 作为更现代化的方案。
概念
rem ，即是 root em ，等于文档根元素的字体大小（font-size）。
由于手机屏幕大小不同，分辨率不同， 那就要设置不同的HTML标签字号。
通常会把网页宽度等分成 10 份，HTML 根元素字体大小即是视口宽度的 1/10 。
计算方法
假设：
- 你的 rem 取的是 16px（通常取网页宽带的十分之一）
- 你要设置的尺寸是 32px
转换方法就是：
32 ÷ 16 = 2
最后你就可以使用 2rem 替代 32px，整个网页中你都这样做，就能达到动态尺寸的目的了。
flexible.js
淘宝团队开发过一个用来适配移动端的 js 库：flexible.js ，能根据不同的视口宽度，给网页的 html 节点设置不同的 font-size。
使用方法：
引入这个库即可。库的源码网上可以搜，我这里也有：flexible.js 源码
1 | <body> |
结果：
你会发现你的 html 标签多了一个 font-size 内联样式，以及一个我也不知道有啥用的类：
1 | <html lang="en" class="hairlines" style="font-size: 37.5px;"> |
基于 vw && vh 的解决方案
概念
-
vw：viewport width（1vw = 1/100视口宽度 ）
-
vh：viewport height ( 1vh = 1/100视口高度 )
不可混用
不要试图在设置元素宽的时候用 vw，设置高的时候用 vh（尽管直觉上合理）。
这样做会造成宽高比例失调，除非你的屏幕是个正方形。
正确的做法是全用其中一个。通常的习惯是全用 vw。
- 标题: 响应式网页设计：相对尺寸
- 作者: 三葉Leaves
- 创建于 : 2025-05-15 00:00:00
- 更新于 : 2025-05-26 02:57:24
- 链接: https://blog.oksanye.com/13b3af3b0184/
- 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。