华山资源网

CSS像素以及移动端不同屏幕适配问题解决
网页制作 2024/11/20 佚名
3 1

像素

分辨率

我们通常所说的显示器分辨率，其实是指桌面设定的分辨率，而不是显示器的物理分辨率。只不过现在液晶显示器成为主流，由于液晶的显示原理与CRT不同，只有在桌面分辨率与物理分辨率一致的情况下，显示效果最佳，所以现在我们的桌面分辨率几乎总是与显示器的物理分辨率一致了。

UI稿的像素

UI稿的像素是指物理像素
我们接到的UI设计稿例如750px就是物理像素

前端像素

只要两个屏幕逻辑像素相同，它们的显示效果就是相同的。 也就是CSS世界中的px相同，相同物理尺寸的屏幕显示效果就是相同的

那么在实际屏幕显示的时候他们之间都有神马关系呢？

如下图 当我们在网页上设置一个元素的css像素（width:2px;height:2px）时，在dpr=1的显示器上时，最终会占用一个四个物理像素点，当在dpr=2时的显示器上时，会占用16个物理像素点。由此得出结论，在不同屏幕下css像素的物理尺寸是一致的，不同的是一个css像素对应的物理像素点个数不一样

CSS像素以及移动端不同屏幕适配问题解决

不同屏幕下的rem适配方案

<!-- m站移动端适配js -->

  // 适配  物理像素宽750 1rem=100px   
  // clientWidth(实际的逻辑像素)/375(参照基准逻辑像素) = fontSize(实际的1rem像素值)/100(参照的1rem逻辑像素值)
  ;(function(win, doc){
    function change(){
        doc.documentElement.style.fontSize=100*doc.documentElement.clientWidth/375+'px';
    }
    change();
    win.addEventListener('resize', change, false);
  })(window, document);
  // 这样我们就计算出实际不同逻辑像素下1rem的值了
  // 实际工作中如果UI给是设计稿宽度是750px 那么我们就需要在量到的宽度的基础上除以200
  // 我们在打开控制台查看元素之间的距离的时候都是设计稿上的一半 设计稿的物理像素2px对应逻辑像素1px
  // 我司现在的设计稿都放在蓝湖上 宽度都是标准的375 那么我们只需要在量得的宽度基础上除以100就得到实际的宽度是多少rem

  // 附： 当然也有其他适配方案，但是rem原理都是一样的,除非采用的不是rem方案

为什么苹果手机上需要2倍图或者三倍图？

以2倍屏为例

CSS像素以及移动端不同屏幕适配问题解决

原本2*2像素的图片在2倍屏下 有4*4个像素点组成 那么多出来需要绘制的像素点的就会在以前周周附近找相似的，所以有了模糊的问题。现在工作中一般为了图片高清显示，都是采用苹果两倍图。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com