1

我一直在尝试创建一个具有固定标题但也具有响应性的网站。这是我到目前为止所拥有的。我会把它放在一个 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 上时可以说导航缩小并且文本不会低于。我必须使用媒体查询吗？如果是这样，是否有一种快速的方法可以为所有设备执行这些操作？

4

1 回答 1

1

是的，您将需要使用媒体查询。不知道如果没有它们，你将如何编写一个“响应式”网站，除非你在 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;
    } 

}

所以在较小的屏幕上你会得到一个 480px 的#nav-wrapper 宽度；响应式的总体思路是从移动端进行设计。但是我提供的链接将向您解释所有这些。

此外，您的示例代码没有内容块或任何要在示例中重新定义的内容。但是假设你有一个名为“main_content”的div，你可以告诉它有一个margin-top，这样它就会清除标题、导航或你遇到的任何其他东西。我认为在这种情况下，真实的例子并不像主体那样必要，因为我们可以填满整个页面，涵盖所有设备和维度的可能性。最好的方法是弄脏你的手并练习。习惯真的不难。

至于覆盖amm的快速方法，例如“is_mobile”……不，不要尝试这样做。正如最近有人指出的那样，“移动”的定义每天都在变化。试图以“移动”为目标只会让试图维持这一点变得一团糟。

如果您不在乎它们是否在移动设备上，您可以为最大宽度 768px 编写一个媒体查询，只是为了制作一个小视图。

@media only screen and (max-device-width : 768px)
{
  /* styles here */
}
于 2012-12-06T22:27:15.937 回答