Question

我正在尝试使用媒体查询隐藏智能手机设备上的div，但它不起作用。当我调整小于(min-width: 1224px)的窗口时，文档只是空白。

css如下：

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px) {    
  .container {
    display: none;
  }    
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width: 321px) {    
  .container {
    display: none;
  }    
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width: 320px) {    
  .container {
    display: none;
  }    
}

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

  .container {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .logo-container {
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c457+10,60a24d+100 */
    background: #86c457; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #86c457 10%, #60a24d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86c457', endColorstr='#60a24d', GradientType=1); /* IE6-9 fallback on horizontal gradient */    
  }

  .sign-in-container {
    display: flex;
    flex: 1 0 0;
    align-items: center;
  }

  .sign-in-container > .sign-in-form {    
    flex: 0 0 30em;
    margin-left: 60px;
  }

}

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

  .container {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .logo-container {
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c457+10,60a24d+100 */
    background: #86c457; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #86c457 10%, #60a24d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86c457', endColorstr='#60a24d', GradientType=1); /* IE6-9 fallback on horizontal gradient */

  }

  .sign-in-container {
    display: flex;
    flex: 1 0 0;
    align-items: center;
  }

  .sign-in-container > .sign-in-form {    
    flex: 0 0 30em;
    margin-left: 60px;
  }    
}

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

  .container {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .logo-container {
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c457+10,60a24d+100 */
    background: #86c457; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #86c457 10%, #60a24d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86c457', endColorstr='#60a24d', GradientType=1); /* IE6-9 fallback on horizontal gradient */

  }

  .sign-in-container {
    display: flex;
    flex: 1 0 0;
    align-items: center;
  }

  .sign-in-container > .sign-in-form {    
    flex: 0 0 30em;
    margin-left: 60px;
  }    

}

/* Desktops and laptops ----------- */
@media only screen
and (min-width: 1224px) {
  .container {
    display: flex;
    height: 100%;
    width: 100%;
  }

  .logo-container {
    display: flex;
    flex: 1 0 0;
    justify-content: center;
    align-items: center;

    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#86c457+10,60a24d+100 */
    background: #86c457; /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, #86c457 10%, #60a24d 100%); /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, #86c457 10%, #60a24d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#86c457', endColorstr='#60a24d', GradientType=1); /* IE6-9 fallback on horizontal gradient */

  }

  .sign-in-container {
    display: flex;
    flex: 1 0 0;
    align-items: center;
  }

  .sign-in-container > .sign-in-form {    
    flex: 0 0 30em;
    margin-left: 60px;
  }
}

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

和html代码：

<div class="container">
  <div class="logo-container">
    <img src="assets/images/micarna.svg"/>
  </div>
  <div class="sign-in-container">
    <div class="sign-in-form">    
      <div class="ui attached message">
        <div class="header">
          Welcome to micarna
        </div>
        <p>Please sign in with your sap account!</p>
      </div>    
      <form class="ui form attached fluid" style="margin-top: 40px">
        <div class="field">
          <div class="ui big left icon input">
            <input type="text" placeholder="Username">
            <i class="user icon"></i>
          </div>
        </div>
        <div class="field">
          <div class="ui big left icon input">
            <input placeholder="Password" type="password">
            <i class="lock icon"></i>
          </div>
        </div>
        <div class="big fluid ui blue submit button">Sign In</div>
      </form>    
    </div>
  </div>
</div>

当我调整小于(min-width: 1224px)的窗口时，文档只是空白，为什么？提前谢谢。

Answer 1

@media screen and (min-width: 320px) and (max-width: 480px) {
  //Styles for smaller devices
}

Answer 2

只需使用

@media (max-width:480px){
  .container{
      display:none;
   }
}

Answer 3

它不可见，因为：

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

  .container {
    display: none;
  }

}

将其移除或对其进行操作。

Answer 4

正确订购媒体查询非常重要。 checkout this post

虽然它可能不是白屏空白的原因，但我会从那里开始，因为这样可以更轻松地调试你的CSS。

Div应仅隐藏在智能手机上

4 个答案: