码迷,mamicode.com
首页 > 其他好文 > 详细

如何判断dpr的倍数

时间:2018-11-15 22:32:31      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:设置断点   javascrip   查询   1.4   ice   div   solution   pre   min   

1. js中有window.devicePixelRatio可直接查看倍率。

2. 用css技术判断dpr的倍数

  响应式设计:(媒介查询)通过设置断点来实现响应。

  • max-device-pixel-ratio:最大设备dpr
  • max-resolution:最大像素密度
//retina1x
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx)
//retina2x
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)
//retina3x
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx)

  

  

如何判断dpr的倍数

标签:设置断点   javascrip   查询   1.4   ice   div   solution   pre   min   

原文地址:https://www.cnblogs.com/ruchang/p/9966135.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!