不能让媒体查询工作

我创建了一个主要是响应式的网站，但在小屏幕上查看时需要一些帮助。我试图添加@media查询到css页面，但它似乎没有任何区别。不能让媒体查询工作

我只在主要的css页面添加了不同的样式规则，并没有添加任何内容到我的html。我很困惑媒体查询如何工作，所以也许这是我的问题？

这里是我的CSS

/*Alt styles for smaller screens*/ 
@media only screen and (max-width: 780px) { 

    div.price-area1 { 
      width: 100%; 
      text-align: center; 
    } 

    div.price-area2 { 
      width: 100%; 
      text-align: center; 
    } 

    div.price-area3 { 
      width: 100%; 
    } 

    input.submit { 
      width: 60%; 
      margin-left: 20%; 
    } 

    nav { 
      width: 100%; 
    } 

    nav ul li { 
      position: relative; 
      float: left; 
      width: 50%; 
      font-family: 'Poiret One', cursive; 
      margin-bottom: 15px; 
      text-align: center; 
      font-size: 24px; 
    } 
}

来源

2015-04-02 kelsen24

你需要显示更多的代码。与CSS的其余部分相比，这个CSS放置在哪里？这些选择器是否具体或比您的媒体查询选择器更具体？我猜在这里安置和/或特定是罪魁祸首。很难给出你所提供的明确答案。 – hungerstar 2015-04-02 03:08:12

经过多一点阅读后，我发现CSS应该放在我的样式表的底部。显然这是我在阅读的其他资源中从未提及的。所以，它现在正在工作。谢谢 – kelsen24 2015-04-02 16:30:32

**＃1 **阅读**级联**如何工作* C * ascading * S * tyle * S * heets。这将回答你应该在你的样式表中放置你的CSS选择器的地方。研究* CSS特异性*也不会伤害。 – hungerstar 2015-04-02 16:31:02

了解媒体查询的最简单的方法就是了解它here和here：

虽这么说，你可能要使用这样的框架bootstrap这是启动网站的好方法。否则，您可以将此模板用于媒体查询：

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    /* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
    /* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
    /* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
    /* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
    /* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
    /* Styles */ 
} 

/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
    /* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
    /* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { 
    /* Styles */ 
}

如果您想自己做所有这些，这是一个很好的起点。

来源

2015-04-02 03:11:14 jycr753

首先，我喜欢Bootstrap。其次，我想指出的是，通常应该避免陷入针对特定设备的束缚。 **那里太多了！**而是应该在设计中找到_natural_断点。当您重新调整视口大小时，您将知道何时需要移动，重新对齐，重新调整大小等栏目，图像，文本，元素等。如果您这样做，那么您的设计将非常适合所有屏幕尺寸。 – hungerstar 2015-04-02 03:27:59

不能让媒体查询工作

回答

相关问题