Question

我有一个带背景图像的div ..我需要在大屏幕中给出div margin-bottom并删除其他屏幕中的边距。但是当我在浏览器中检查时，我发现媒体查询中的代码不可读。

<div class="logo FLRight FLNone-xs">
<div>

此代码在css文件中可读，没有任何meadia

.header .nav-container .logo{
    background: url(../images/logo.png) no-repeat;
    width: 160px;
    height: 80px;
    margin-bottom: 0px;
}

并且此代码在浏览器中无法读取......这只是一个简单的示例..该案例适用于我文件中的所有类

@media (min-width: 1200px) { /*large screens*/

    .header .nav-container .logo{
        margin-bottom: 20px;
      }
    }

Answer 1

.logo{
    background: url('http://www.logospike.com/wp-content/uploads/2015/11/Logo_Image_01.png') no-repeat;
    width: 160px;
    height: 80px;
    margin-bottom: 0px;

}
@media (min-width: 1200px) { /*large screens*/

    .logo{
        margin-bottom: 20px;
      }
    }

<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
          <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  </head>

    <body>
    <div class="logo FLRight FLNone-xs">
    <h1>hiiii</h1>
<div>
</body>
  </html>

从@media中删除关联的类。请参阅上面的代码以供参考。希望这有帮助！

CSS3媒体查询不可访问

1 个答案: