Question

我一直在尝试使用固定标题创建一个网站，但它也是响应式的。这是我到目前为止所拥有的。我会坚持使用jsfiddle，但你看不出我想要解释的内容。 <{1}}采用.css格式，因为.scss已被压缩。

HTML：

.css

CSS：

<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>

我所追求的是当用户在iPhone上时，可以说导航缩小了，文本没有落到下面。我是否必须使用媒体查询？如果是这样，有一种快速方法可以为所有设备执行这些操作吗？

Answer 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;
    } 

}

所以在较小的屏幕上你会得到一个#avian-wrapper宽度为480px; 响应的一般想法是从移动设计。但是我给出的链接将向你解释所有这些。

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

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

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

@media only screen and (max-device-width : 768px)
{
  /* styles here */
}

修复了标题和响应式网站问题

1 个答案: