@media最小宽度和最大宽度(@Media min-width & max-width)

我有这个@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上，但它不会在浏览器中运行。

难道是因为我已经有device在元，也许有max-width:480px呢？

Answer 1:

我发现最好的方法是写你的默认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{}

Answer 2:

根本的问题是使用max-device-width VS普通老式max-width 。

使用“装置”的关键字的目标屏幕的物理尺寸，浏览器窗口的不宽度。

例如：

@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.  */
}

Answer 3:

为正确的价值content属性中应包含initial-scale ，而不是：

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

Answer 4:

使用只是简单的

@media only screen and (max-width: 600px) and (min-width: 400px)  {   }

文章来源: @Media min-width & max-width

@media最小宽度和最大宽度(@Media min-width & max-width)

Answer 1:

Answer 2:

Answer 3:

Answer 4:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮