Question

为了成为移动设备，我实施了@cch友好建议的媒体查询。它有效地隐藏了“旁边”（侧边栏），但未能将“文章”（主要）扩展到所有浏览器和所有设备上的结果空白区域。我做错了什么？

CSS后跟HTML：

@media screen and (max-width: 750px)  {
  aside { display: none; }
  article { width: 100%; }
}
#main {
	width: 58%;
	float: left;
	margin-left: 2%;
}
#sidebar {
	float: left;
	width: 34%;
	margin-left: 4%;
}

<article id="main">
    <h2>The Advanced ON-SITE Advantage</h2>
    <p>As a service for maintaining shades, shutters, blinds, and drapes through occasional cleaning and repair, you can be confident we're supremely qualified. </p>
    <p>Correct identification of the many fabrics and coatings used in draperies, shades and top treatments is critical to safe, yet effective, cleaning of these items. Advanced On-Site is certified to do just that. It's why we're able to <a href="guarantee.html">guarantee</a> against shrinkage or damage.</p>
    <p><span class="centered">
      <figure>
        <img src="images/cleaninstall.jpg" width="400" height="225">
        <figcaption>Flawless cleaning and installations</figcaption>
      </figure>
      </span>  Likewise, window coverings installed by  Advanced On-Site do not suffer from poor funtionality due to improper installation. Only the best materials and fasteners are used, and great care is taken to ensure that every component enjoys the complete freedom of movement imperative to long life.</p>
  </article>
  <aside id="sidebar">
    <h2>Tip</h2>
    <p>Window coverings are often damaged through incorrect operation. The following suggestion will increase life expectancy.</p>
    <blockquote>
      <p><strong>Never let go of a cord until you know it has come to rest:</strong></p>
      <p>Shades and blinds with  modern retractable mechanisms typically use control cord assemblies. These incorporate hard connectors that can damage delicate components on impact. With  traditional cord-lock mechanisms, the cord should not be released until its &quot;catch&quot; is engaged. This prevents the bottom-heavy shade from crashing onto the sill.</p>
    </blockquote>
    <p>Even when the foregoing is observed, sun damage and simple wear may render the occassional repair necessary. If that happens call us.</p>
  </aside>

提前致谢，

戴夫

Answer 1

选择器#main的特异性高于article，因此即使媒体查询匹配，宽度仍为58％。

选择一个对媒体查询内部文章格式具有更高特异性的选择器;或者，如果你想要一个相同的，请将媒体查询放在一般格式下面。

Answer 2

此外，除了CBroe所说的，请确保添加以下元标记以确保在各种设备上获得一致的结果：

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

您可以在此处找到更多相关信息：

https://css-tricks.com/snippets/html/responsive-meta-tag/

为什么我的媒体查询说明在某些设备上不能100％兑现

2 个答案: