@Media min-width & max-width

Question

@Media min-width & max-width

304

我有这个@media的设置：

HTML：

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no" />
</head>

CSS:

@media screen and (min-width: 769px) {
    /* STYLES HERE */
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
    /* STYLES HERE */
}

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE */
}

这种设置在iPhone上可以工作，但在浏览器中无法工作。

这是因为我已经在meta中有“device”，可能使用了“max-width:480px”?

- rallybilen

1

什么问题 - 默认样式将适用于宽度大于769像素的屏幕。 - Gurpreet Singh

960像素更好，我记得阅读过一些浏览器在垂直滚动条上不太友好，应该保留20像素。 - Medeno

它可以更好地分成12份（80像素而不是81像素）。 - Craig Moore

请勿使用 device 关键字，因为它将被移除，您的网站可能会出现问题。https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries - Robert

只是一个提示，'screen and' 是可选的。 - Scott Romack

显示剩余3条评论

6个回答

55

核心问题在于使用 max-device-width 和普通的 max-width 之间的区别。

使用 "device" 关键字针对的是屏幕的物理尺寸，而不是浏览器窗口的宽度。

例如：

@media only screen and (max-device-width: 480px) {
    /* STYLES HERE for DEVICES with physical max-screen width of 480px */
}

对决

@media only screen and (max-width: 480px) {
    /* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. 
       This will work on desktops when the window is narrowed.  */
}

- jpostdesign

40

如果网站在小设备上的行为与桌面屏幕类似，则需要在标签之前添加此标签。

<meta name="viewport" content="width=device-width, initial-scale=1">

您可以将媒体查询设置为：

这将覆盖所有移动电话的宽度。

 @media only screen and (min-width: 200px) and (max-width: 767px)  {
    //Put your CSS here for 200px to 767px width devices (cover all width between 200px to 767px //
   
    }

对于iPad和iPad Pro，您必须使用

  @media only screen and (min-width: 768px) and (max-width: 1024px)  {
        //Put your CSS here for 768px to 1024px width devices(covers all width between 768px to 1024px //   
  }

如果您想为横屏模式添加CSS，可以添加以下内容：

and (orientation : landscape)

  @media only screen and (min-width: 200px) and (max-width: 767px) and (orientation : portrait) {
        //Put your CSS here for 200px to 767px width devices (cover all mobile portrait width //        
  }

- Rohit Kaushik

9

content属性的正确取值应该包含initial-scale：

<meta name="viewport" content="width=device-width, initial-scale=1">
                                                   ^^^^^^^^^^^^^^^

- Ksenia Titova

2

如果您能解释原因并添加参考资料，那么这个答案将会更有用。 - Michael Benjamin

2

@Michael_B 初始值为'user-scalable=no'。我想这就说明了一切。 - Datacrawler

7

如果想要实现浏览器响应式设计中的最小宽度和最大宽度同时生效，可以使用以下代码：

 @media (min-width: 768px) and (max-width: 992px){...}
 @media (min-width: 480px) and (max-width: 767px) {...}

- Panchakshari Puranmatt

-1

对于某些iPhone，您必须将您的视口设置为以下方式

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0" />

- NuggaN85

为什么？那里有几个属性，而且没有关于为什么你必须对某些iPhone这样做的信息。是哪些iPhone？以及在iPhone上使用哪些浏览器？ - tjbp

为什么？那里有几个属性，却没有解释为什么你“必须”为“某些”iPhone这样做。是哪些iPhone？以及iPhone上的哪些浏览器？！ - undefined

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- bashleigh · Accepted Answer

我发现最好的方法是为旧浏览器编写默认CSS样式，因为旧版本的浏览器(包括IE 5.5、6、7和8)无法读取@media。当我使用@media时，我会像这样使用：

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

但是您可以随意使用您的@media。这只是一个例子，我在为所有浏览器构建样式时发现最好的做法。

iPad CSS 规范。

另外！如果您想要打印，可以使用@media print{}。