我被困住了,我正在设计一个分辨率为1266px的网页。我希望它适合 1024px,因为 13% 的人仍在使用该分辨率。所以我想我可以更改我的 h1 和nav_items的字体大小。
为了使它们适合,如果分辨率降至 1260 以下,否则我希望它们保持在提供给它们的固定 px。
这就是我得到的:
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/ */
查看 CSS 媒体查询。它们允许您指定特定屏幕分辨率的样式(更多(。
$('#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);
}
});
例如
@media all and (min-width: 1266px) {
h1 {
font: (large-size)px;
}
}
@media all and (max-width: 1265px) {
h1 {
font: (smaller-size)px;
}
}