我一直在尝试创建一个具有固定 header 但也具有响应能力的网站。这是我到目前为止所拥有的。我会把它放在 jsfiddle 中，但你看不到我要解释的内容。 .css 是 .scss 格式，因为 .css 是压缩的。
HTML :
<title> Skinny Beer </title>
<meta name="description" content="/">
<meta name="author" content="Josh Hornby">
<meta name="author" content="@joshua_hornby">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="design.css">
<link rel="stylesheet" href="stylesheets/base.css">
<link rel="stylesheet" href="stylesheets/skeleton.css">
<link rel="stylesheet" href="stylesheets/layout.css">
</head>
<body>
<div class="container">
<nav id="main-nav">
<div id="nav-wrapper">
<div class="six columns"
<div id="logo" style="background-color:black;"></div>
</div>
<div class="ten columns">
<ul>
<span class="nav-links">
<li><a href="index.html">Home</a></li>
<li><a href="index.html">About</a></li>
<li><a href="index.html">Beer</a></li>
<li><a href="index.html">Contact</a></li>
</div>
</div>
</nav>
CSS:
#main-nav{
-webkit-box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.25);
-webkit-transition: box-shadow 0.2s linear;
-moz-transition: box-shadow 0.2s linear;
-ms-transition: box-shadow 0.2s linear;
-o-transition: box-shadow 0.2s linear;
transition: box-shadow 0.2s linear;
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
display: block;
position: fixed;
top: 0;
left: 0;
float: left;
width: 100%;
z-index: 12;
height: 60px;
background-color: white;
ul {
position: relative;
margin-top: 10px;
}
li {
vertical-align: middle;
display: inline;
margin: 0 2px;
color: black;
list-style-type: none;
}
a {
text-decoration: none;
}
}
#nav-wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 800px;
}
#logo {
height: 25px;
width: 118px;
display: inline-block;
float: left;
padding: 5px 10px;
margin-top: 11px;
margin-left: -13px;
}
我所追求的是，当用户使用 iPhone 时，可以说导航缩小并且文本不会下降到下方。我必须使用媒体查询吗？如果是这样，是否有一种快速的方法可以为所有设备执行这些操作？
最佳答案
是的，您将需要使用媒体查询。不确定在没有它们的情况下如何编写一个“响应式”网站，除非您全部用 js 完成，那太疯狂了。
查看此链接以获得更详细的信息: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
但这是想法:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
#nav-wrapper {
position: relative;
margin-left: auto;
margin-right: auto;
width: 480px;
}
}
因此，在较小的屏幕上，#nav-wrapper 宽度为 480px； 响应式的总体思路是从移动端开始设计。但我提供的链接会向您解释所有这些。
此外，您的示例代码没有内容 block 或任何要在示例中重新定义的内容。但是假设你有一个名为“main_content”的 div，你可以告诉它有一个 margin-top 这样它会清除标题、导航或你遇到的任何其他问题。我认为在这种情况下，真实示例并不像主体那样必要，因为我们可以填满整个页面，涵盖所有设备和尺寸可能性。最好的方法是亲自动手练习。适应起来真的不难。
至于快速覆盖 amm 的方法，例如“is_mobile”……不，不要尝试那样做。正如最近有人指出的那样，“移动”的定义每天都在变化。试图以“移动”为目标只会让维护它变得一团糟。
如果您不关心它们是否在移动设备上，您可以为最大宽度 768px 编写一个媒体查询，只是为了制作一个小 View 。
@media only screen and (max-device-width : 768px)
{
/* styles here */
}
关于html - 修复了标题和响应式网站问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13753512/