@media对不同内核浏览器dpi像素兼容性的设置

闭曈彤

已于 2024-10-09 17:21:24 修改

阅读量469

点赞数

分类专栏：前端 CSS 文章标签： media query webkit内核 dpi设置浏览器兼容性像素

于 2018-02-20 21:52:34 首次发布

本文链接：https://blog.csdn.net/weixin_38353851/article/details/79341099

版权

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

本文探讨了如何使用@media查询来处理WebKit内核和非WebKit内核浏览器在不同dpi下的像素设置问题。通过设定缩放倍数与dpi的关系，确保1单位像素在各浏览器中的一致性。解决方案是在main.js中引入相应的CSS文件。

摘要由CSDN通过智能技术生成

对于webkit内核的浏览器和非webkit的浏览器，不同dpi下的像素设置为：

@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
  .border-1px
    &::after
      -webkit-transform:scaleY(0.7)
      transform scaleY(0.7)
      
@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
  .border-1px
    &::after
      -webkit-transform:scaleY(0.5)
      transform scaleY(0.5)

缩放倍数*dpi=1

最后在main.js里import这个css文件进来就可以了。