响应字体媒体查询减少循环

Question

我认为这将是一个有用的教程，介绍如何创建一个循环，创建媒体查询以允许响应字体。

我不满意我的字体永远不会缩放，而我的所有DIV和图像都会这样做。随着你缩小。字体似乎变得更大，使设计和布局看起来很糟糕。当然，我可以这样离开，让文字包装，但也看起来很糟糕。

Answer 1

所以我创建了这些媒体查询，每隔20个像素增加字体大小0.05。然后，它演变成更少的逻辑，以便我可以使用更少的代码。但是，我已经包括了css和更低的声音。

随着字体的变化，每20个像素的调整大小可能看起来有些不稳定。但这比仅有3个媒体查询来改变字体大小要好得多。那是垃圾。和懒惰。为什么要手动？我离题了。看看有一个循环的优点是你可以改进和增加媒体查询的数量，以便在字体/浏览器大小调整中获得更加流畅。

最后一件事。一旦你有这样的字体设置;到HTML。其他所有内容必须设置为百分比字体大小。这样他们就是html字体大小的百分比，并且会有响应。这是一个例子：

html{
  font-size: 1em;
}
h1{
  font-size: 120%; //1.2em
} 
h2{
  font-size: 110%; //1.1em
} 

请告诉我你的想法。

-Love PAT

LESS LOOP：

//Set font for 300 pix devices and lower. Font size will increase by 0.05 every 5pix of width.
@fontSize: 0.7em; //em

//@media start at?
@screenWidth: 300px;
@screenWidthMax: 640px;
@loop: (((@screenWidthMax - @screenWidth)/20)-1);

//Size for 640px and above
@fontSizeMath640: round(@fontSize + (@fontSize * (0.05*(@loop+2))),2);
@media (min-width: @screenWidthMax) {
  html {
    font-size: "@{fontSizeMath640}";
  }
}

//Create loop that repeats from 300 pix all the way to 640 pix incrementing by 20px. So, (640-300=340)/20=17. Loop 68 times.
.responsiveFont (@index) when (@index >= 0) {
  @minWidth: (@screenWidth+(20*@index));
  @maxWidth: (@minWidth + 19);
  @fontSizeMath: round(@fontSize + (@fontSize * (0.05*(@index+1))),2);
  @media (min-width: @minWidth) and (max-width: @maxWidth) {
    html {
      font-size: "@{fontSizeMath}";
    }
  }
  // next iteration
  .responsiveFont(@index - 1);
}

// end the loop when index is 0
.responsiveFont (0) {}

// "call" the loopingClass the first time with highest value
.responsiveFont (@loop);

//Size for 300px and below
@media (max-width: @screenWidth) {
  html {
    font-size: "@{fontSize}";
  }
}

这打印出来： 的 CSS

@media (min-width: 640px) {
  html {
    font-size: "1.33em";
  }
}
@media (min-width: 620px) and (max-width: 639px) {
  html {
    font-size: "1.29em";
  }
}
@media (min-width: 600px) and (max-width: 619px) {
  html {
    font-size: "1.26em";
  }
}
@media (min-width: 580px) and (max-width: 599px) {
  html {
    font-size: "1.22em";
  }
}
@media (min-width: 560px) and (max-width: 579px) {
  html {
    font-size: "1.19em";
  }
}
@media (min-width: 540px) and (max-width: 559px) {
  html {
    font-size: "1.15em";
  }
}
@media (min-width: 520px) and (max-width: 539px) {
  html {
    font-size: "1.12em";
  }
}
@media (min-width: 500px) and (max-width: 519px) {
  html {
    font-size: "1.08em";
  }
}
@media (min-width: 480px) and (max-width: 499px) {
  html {
    font-size: "1.05em";
  }
}
@media (min-width: 460px) and (max-width: 479px) {
  html {
    font-size: "1.01em";
  }
}
@media (min-width: 440px) and (max-width: 459px) {
  html {
    font-size: "0.98em";
  }
}
@media (min-width: 420px) and (max-width: 439px) {
  html {
    font-size: "0.94em";
  }
}
@media (min-width: 400px) and (max-width: 419px) {
  html {
    font-size: "0.91em";
  }
}
@media (min-width: 380px) and (max-width: 399px) {
  html {
    font-size: "0.88em";
  }
}
@media (min-width: 360px) and (max-width: 379px) {
  html {
    font-size: "0.84em";
  }
}
@media (min-width: 340px) and (max-width: 359px) {
  html {
    font-size: "0.8em";
  }
}
@media (min-width: 320px) and (max-width: 339px) {
  html {
    font-size: "0.77em";
  }
}
@media (min-width: 300px) and (max-width: 319px) {
  html {
    font-size: "0.73em";
  }
}
@media (max-width: 300px) {
  html {
    font-size: "0.7em";
  }
}

Answer 2

为了获得最佳的响应式媒体查询，我们使用Bootstrap类来定义这些：

/* Small devices ( @screen-sm-min Phones (<768px) ) */
@media (min-width: 368px) {

}

/* Small devices (@screen-sm-min tablets, 768px and up) */
@media (min-width: 768px) {

}

/* Medium devices ( @screen-md-min desktops, 992px and up) */
@media (min-width: 992px) { 

}

/* Large devices ( @screen-lg-min large desktops, 1200px and up) */
@media (min-width: 1200px) {

}