Question

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

style.sass

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

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

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

mixin img(link, img, color)
  a(href="#{link}").img-link

编译的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>

Answer 1

查看生成的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结构，我甚至不确定其中哪一个包含您正在谈论的样式。它当然看起来像一个特殊性问题......

Sass - 媒体查询未申请（Jekyll）

1 个答案: