当浏览器分辨率低于 1260px 时调整 h1 的字体大小答案

【问题标题】：Resize font size of h1 when browser resolution is below 1260px当浏览器分辨率低于 1260px 时调整 h1 的字体大小
【发布时间】：2012-05-29 04:04:28
【问题描述】：

我卡住了，我正在设计一个分辨率为 1266 像素的网页。我希望它适合 1024 像素，因为 13% 的人仍在使用该分辨率。所以我想我可以改变我的 h1 和我的 nav_items 的字体大小。

以便它们适合，如果分辨率低于 1260，否则我希望它们保持在给它们的固定像素。

这是我得到的：

header {
  width:100%;
  background: #222;
  color: white;
  height: 80px;
  margin: 0px 0px 0px 0px;
  padding: 0px 0px 0px 0px; 
  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
  text-shadow: 2px 2px 0 #000;
}
header h1 { /* TAVERNE DE STADSPOORT */
  font-size: 40px;
  float:left;
  color:white;
  margin: 0px 0px 0px 0px; /* top, left, bottom, right*/ 
  padding: 10px 30px 10px 20px; /* top, right, bottom, right*/
}
header ul {
  float: right; 
  width: 680px;
  padding: 20px; 0px; 0px; 0px; /* top, left, bottom, right*/
}
.nav_items li {
  display:inline;
  font-size:22px;
  margin: 0px 4px 0px 4px; /* top, left, bottom, right (outside) */ 
  padding: 0px 4px 0px 4px; /* top, left, bottom, right*/ 
}

<div id="logo">
<h1 class="nav_items"><a href="index.html">Taverne De Stadspoort</a></h1>
</div>
<nav id="top">
    <ul class="nav_items">
        <li><a href="/">Menukaart</a></li>
        <li><a href="/">Suggesties</a></li>
        <li><a href="/">Onze wijnen</a></li>
        <li><a href="/">Ligging/contact</a></li>
        <li><a href="/">Gastenboek</a></li>
    </ul>
</nav>

也许我做错了什么，我可以通过其他方式解决这个问题。或者我应该使用 jquery 来存档吗？因为我不熟悉那个另一个解决方案会很棒。

我添加了这个：谢谢所有

@media all and (max-width: 1259px) { h1 { font-size: 25px; } }
@media all and (min-width: 1260px) { h1 { font-size: 40px; } } 
/* http://www.w3.org/TR/css3-mediaqueries/ */

【问题讨论】：

您有可以调整大小的媒体查询吗？或者，如果您不知道什么是媒体查询，我可以在答案中介绍它。
或者，看看其他关于该主题的重复问题...How to increase font size based on window width?
刚刚快速浏览了一下媒体查询，我真的不知道是什么。我还没有设置任何东西。这对我有什么帮助？我会继续阅读更多关于它的信息。我还不明白如何使用它 -
感谢帮助并指出媒体查询，我还不知道。
如果已解决，请接受答案。无需将其添加到问题中。

标签： css

【解决方案1】：

$('#fit').resizable({
    resize: function( event, ui ) {

        divWidth = ui.size.width/(len*9);
        divHeight = ui.size.height / (len *2.2);

        abc = divWidth;
        if (divWidth < divHeight) { 
          abc = divWidth; 
        } else {
            abc = divHeight
        }

        ui.element.css({'font-size': abc +'em'});
        console.log(abc);

    }
});

【讨论】：

【解决方案2】：

例如

@media all and (min-width: 1266px) {

    h1 {
      font: (large-size)px;
    }
}

@media all and (max-width: 1265px) {

    h1 {
      font: (smaller-size)px;
    }
}

【讨论】：

LukaD 我不明白为什么会这样。是我在突出显示代码时搞砸了，还是我添加/删除了我不应该有的东西！？

【解决方案3】：

查看CSS media queries。它们允许您为特定的屏幕分辨率指定样式（更多）。

【讨论】：