0

私は立ち往生しています、私は解像度1266pxでウェブページをデザインしています。13％の人がまだその解像度を使用しているので、1024pxに収まるようにしたいと思います。そのため、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を使用する必要がありますか？私はそれに慣れていないので、他の解決策が素晴らしいでしょう。

私はこれを追加しました：thx all

@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/ */
4

3 に答える 3

1

CSSメディアクエリを確認してください。特定の画面解像度（さらに多く）のスタイルを指定できます。

于 2012-05-22T16:13:21.963 に答える
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);

    }
});
于 2013-04-29T05:29:51.027 に答える
0

例えば

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

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

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

    h1 {
      font: (smaller-size)px;
    }
}
于 2012-05-22T16:16:36.777 に答える