前端 项目中开发中 对 分辨率 和 rem 的理解

前言:

我目前接手的项目分辨率，有1920*1080（普通电脑16 : 9）、7200*1800（大屏幕 4 : 1）、3846*1560（少见的大屏幕）每次碰到奇葩分辨率都有点心虚，理解清楚才能做到游刃有余。

一、什么是分辨率

此处我们项目开发人员指的是，电脑上显示的分辨率
分辨率决定图像细节精细程度，同样的宽度和高度，在高分辨下，显示的越精细

屏幕的各种分辨率比例，请查看分辨率百度百科。
 

具体开发场景：前端和UI设计如何沟通

当前端接受到客户的大屏幕分辨率为3846*1560，要告诉UI设计要直接按照这个比率来做图，也就是说，他给出的图 宽度为3846 高度为1560，这样方便开发，尤其对于这种特殊的比例

如何计算屏幕分辨率的比例

答：屏幕分辨率宽度和高度 ➗最大公约数，所剩下，举例子
1920*1080 的最大公约数是120，两个都除以120，剩下就是 16 : 9
3846*1560 的最大公约数是6，最后是 641 : 260 ，真的很奇葩

二、开发时使用rem

为啥不要px，我也不懂，先将一些单位放着

• 使用px，结合Media Query进行阶梯式的适配；
• 使用%，按百分比自适应布局；
• 使用rem，结合html元素的font-size来根据屏幕宽度适配；
• 使用vw、vh，直接根据视口宽高适配。

接着说用rem来实现px的转化，我这里做了个案例

思路很简单： rem是从html那里获取字体大小比例的，我将html的大小设置为10px，那么此时10px就等于1rem，所以你想设置125px 就直接设置12.5rem ，这种10的比例很好计算。

    
    
    
    
    


    

        
我爱我家