Sass-媒体查询不适用(Jekyll)

我使用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>

查看生成的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结构，我甚至不确定其中哪一个具有您所说的样式。不过，这看起来确实是一个特殊的问题。。。

相关内容

最新更新

热门标签：