媒体查询功能部分不显示全宽

Question

我正在尝试创建此媒体查询，以便当您在移动设备上打开它时，它有 3 个“.feature-box”的全宽，一个在另一个之上，但是它不起作用他们只是保持全宽？知道如何解决这个问题吗？下面的代码

HTML

  <section>
            <div class="section-header">
                <h2>Services</h2>
                <p>I provide, clean responsive modern websites for you or your business.</p>
            </div>
                <div class="feature-box">
                    <img src="devices.svg" alt="">
                    <h3>Responsive</h3>
                    <p>Works well on any device.</p>
                </div>
                <div class="feature-box">
                    <img src="code.svg" alt="">
                    <h3>Clean Code</h3>
                    <p>Effieciently typed and easy to read.</p>
                </div>
                <div class="feature-box">
                    <img src="clock.svg" alt="">
                    <h3>Fast Loading</h3>
                    <p>Loads fast to ensure your customers stay.</p>
                </div>

        </section>

CSS

/* Site Section */
section {
  padding: 50px 0;
  margin: 0 auto;
  width: 80%; }
  section .section-header {
    text-align: center;
    margin: 0 0 30px 0; }
    section .section-header h2 {
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 300;
      color: #3F464D; }
  section .feature-box {
    display: inline-block;
    width: 33%;
    padding: 20px 30px;
    text-align: center; }
    section .feature-box img {
      width: 150px;
      margin: 0 0 12px 0;
      line-height: 1; }
    section .feature-box p {
      font-size: 1.5rem; }

媒体查询

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

  /* Features */
  .feature-box {
    width: 100%;
    display: block; } }

Answer 1

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

  /* Features */
  section .feature-box {
    width: 100%;
    display: block; } }

问题出在你媒体查询中的选择器。它应该至少具有相同的特异性，因此您需要 'section'.

section .feature-box{ width: 33% }

比

更具体

.feature-box{ width: 100% }

及其覆盖它。

Answer 2

来源：https://www.sitepoint.com/media-queries-width-vs-device-width/

First, as with getting all websites to become responsive and adhere to media queries, the viewport meta tag must be placed in the <head> section of your web page. The basic standard version of this is shown below.

<meta name="viewport" content="width=device-width,initial-scale=1">
Once we have this snippet of code in our webpage, if we view the page with different devices, the different media queries will be able to have the correct effect.

媒体查询功能部分不显示全宽

Media Queries Feature section doesn't show full width

html

css

responsive-design