CSS+HTML+flexible.js+rem实现屏幕缩放适配概念原理解释

首先理解几个概念：

（1）屏幕尺寸：屏幕对角线的长度，一般用英寸表示，1英寸=2.54cm。

（2）dp（（或者叫dip）：设备独立像素，也就是设备屏幕上多少个点。

（3）dpi：印刷行业术语，像素密度，是每英寸上像素点数

（4）ppi：屏幕像素密度，即每英寸(1英寸=2.54厘米)聚集的像素点个数，这里的一英寸还是对角线长度，pixels per inch

（5）dpr：一个px用多少个像素点来显示，iPhone引入了视网膜屏幕的概念，通常来说就是屏幕的点很小，一个像素可以用多个点来渲染，画面更清晰。

　　　　设备像素比 = 设备像素 / 设备独立像素。指CSS逻辑像素对于物理像素的倍数

 

 （6）设备像素(又称为物理像素)：指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，

　　　和屏幕尺寸大小有关，单位 pt（点（传统长度单位）为1/72英寸=0.35mm））

（7）设备独立像素(也叫密度无关像素或逻辑像素)：可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，这个点是没有固定大小的，

　　　越小越清晰，然后由相关系统转换为物理像素，设备无关像素（Android长度单位），等同于CSS逻辑像素

（8）分辨率：宽度上和高度上最多能显示的物理像素点个数

（9）css像素(也叫虚拟像素)：指的是 CSS 样式代码中使用的逻辑像素，在 CSS 规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relative)单位。

　　　px 是一个相对单位，相对的是设备像素(device pixel)

（10）公式：PPI=分辨率/屏幕尺寸。
　　　　　　屏幕尺寸固定，分辨率越高，PPI就越高。
　　　　　　分辨率固定，屏幕尺寸大了，PPI就越少。
　　　　　　PPI不变，屏幕尺寸变大，分辨率越大。
（11）1920x1080：是指屏幕水平方向有1920的像素点，垂直方向有1080个像素点，大家可以估算一下，1920x1080约为200w，也就是说这块屏幕有将近200w个像素点。
　　　这里说的像素点实际上不是真正意义上的点，它是有面积的，也可以叫做像素块
　　　屏幕与图片的分辨率要相匹配才能达到最佳的显示效果。当图片的分辨率小于屏幕的分辨率时，在全屏显示的情况下图片会显得较为模糊。
　　　当图片的分辨率高于屏幕的分辨率时，在全屏显示的情况下效果也不好。 　
 
 

 

 rem+flexible.js适配

rem： rem属性指的是相对于根元素设置某个元素的字体大小。它同时也可以用作为设置高度等一系列可以用px来标注的单位。

　　　flexible.js正是利用rem单位相对根元素<html>的font-size来做计算，

　　　而我们需要做的就是根据不同的屏幕算出html的font-size，

　　　而页面内的大小单位都根据rem来写，从而实现了自适应。

　　　rem就是相对于根元素<html>的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据<html>的font-size计算出元素的盒模型大小。
 
posted @   靠谱杨  阅读(865)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具

喜欢请打赏

扫描二维码打赏

了解更多

点击右上角即可分享
微信分享提示
AI IDE Trae