Css Sass-媒体查询不适用（Jekyll）_Css_Sass

Css Sass-媒体查询不适用（Jekyll）

css sass

Css Sass-媒体查询不适用（Jekyll）,css,sass,Css,Sass,我使用Sass通过Jekyll创建了我的网站，我使网站具有响应性，但由于某些原因，媒体查询不适用于div类时髦 .img-link width: calc(32% - 14px) border: 2px solid white @media (max-width: 700px) .img-link width: calc(97% - 14px) 我正在mixin（Jade文件）上使用Sass 已编译CSS表单： section.notes .img-l

我使用Sass通过Jekyll创建了我的网站，我使网站具有响应性，但由于某些原因，媒体查询不适用于div类

时髦

 .img-link
    width: calc(32% - 14px)
    border: 2px solid white

@media (max-width: 700px)
  .img-link
      width: calc(97% - 14px)

我正在mixin（Jade文件）上使用Sass

已编译CSS表单：

  section.notes .img-link {
    width: -webkit-calc(32% - 14px);
    width: calc(32% - 14px);
    border: 2px solid white;
    @media screen and (max-width: 700px) {
      section.notes .img-link .img-link {
        width: -webkit-calc(97% - 14px);
        width: calc(97% - 14px); } }
    section.notes .img-link img {
      width: 100%; }

@media (max-width: 700px) {
  .img-link {
    width: -webkit-calc(97% - 14px);
    width: calc(97% - 14px); } }

编译HTML

  <head>
    <link rel="stylesheet" href="/assets/css/main.css">
    <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  </head>
  <body>

<section class="notes">

<div class="flex flex--center">

<div data-orig-color="#ea4c89" class="col-3 flex flex--center dribbble">

<div class="col-3">

<p class="home-lead">...Updating...</p>
<a href="#" data-color="orange" class="img-link"><img src="assets/img/design-img/drib-1.jpg"/></a>
<a href="#" data-color="#aeb3b0" class="img-link"><img src="assets/img/design-img/drib-2.jpg"/></a>


…正在更新

查看生成的CSS，

section.notes.img link

更具体，在媒体查询中优先于

.img link

您需要使媒体查询内的选择器与查询外的选择器一样具体

第二次查看时，生成的CSS会出现以下选择器：

section.notes .img-link
    width: calc(32% - 14px);

@media screen and (max-width: 700px) section.notes .img-link .img-link
    width: calc(97% - 14px);

section.notes .img-link img
    width: 100%;

@media (max-width: 700px) .img-link
    width: calc(97% - 14px);

因此，如果没有HTML结构，我甚至不确定其中哪一个包含您正在谈论的样式。当然，这看起来像是一个特殊性问题……

编译后的CSS/HTML是什么样子的？@cimmanon我在帖子中添加了编译后的CSS。看一看OPI的进一步阅读添加了已编译的HTML，但如何使其具体化？

section.notes .img-link
    width: calc(32% - 14px);

@media screen and (max-width: 700px) section.notes .img-link .img-link
    width: calc(97% - 14px);

section.notes .img-link img
    width: 100%;

@media (max-width: 700px) .img-link
    width: calc(97% - 14px);