媒体查询使用和设备像素比

最新推荐文章于 2025-08-28 01:14:07 发布

原创最新推荐文章于 2025-08-28 01:14:07 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

4 篇文章

订阅专栏

首先我们在使用Media的时候需要设置下面这段代码，来兼容移动设备的展示效果

准备工作1：设置Meta标签

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

代码参数解释：

width = device-width 宽度等于当前设备的宽度
initial-scale = 1.0 初始缩放比例（默认1.0）
maximum-scale = 1.0 允许用户缩放到最大比例（默认1.0）
minimum-scale = 1.0 允许用户缩放到最小比例（默认1.0）

准备工作2：加载兼容js文件

因为IE8既不支持HTML5也不支持CSS3的Media，所以我们需要加载两个js文件，来保证我们实现兼容效果

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

准备工作3：设置IE的渲染方式默认为最高（可选）

<meta http-equiv="X-UA-Compatible" content="IE=edge">

还有一个更好的写法

<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">

这段代码后面加了一个chrome=1,这个谷歌内嵌浏览器框架GCF，如果用户电脑里面装了chrome的插件，那就可以让电脑里面的IE不管是哪个版本都可以使用Webit引擎以及V8引擎进行排版及运算，无比给力，不过用户要是没装这个插件，那这段代码就会让IE以最高的文档模式展现，建议加上。

进入CSS3 Media写法：

@media screen and (max-width: 960px){
    body{
        background: #ccc;
    }
}

这算是一个Media的标准写法，代码意思是：当页面小于960px的时候执行下面的代码

当浏览器尺寸大于960px的时候代码

@media screen and (min-width:960px){
    body{
        background:orange;
    }
}

我们还可以混合使用上面的用法：

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

这段代码的意思就是页面宽度大于960px小于1200px的时候执行下面代码

设备像素比（关于手机端1像素大小不一的问题）

在实际开发中，有时候写的是1px,但是手机上看起来是2px,有很多种方法可以解决，通过transform: sacleY() 可以实现，也有通过背景图，viewport实现的

下面是通过transform来实现手机端的1像素,用的stylus语法

border-t-1px($color) //border-top
  position: relative
  &::before
    display: block
    position: absolute
    left:0
    top:0
    width:100%
    border-top:1px solid $color
    content:' '
border-b-1px($color) //border-bottom
  position: relative
  &::after
    display: block
    position: absolute
    left:0
    bottom:0
    width:100%
    border-top:1px solid $color
    content:' '

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