1

ヘッダーが固定されているがレスポンシブな Web サイトを作成しようとしています。これが私がこれまでに持っているものです。私はそれを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;
    } 

}

したがって、小さい画面では #nav-wrapper の幅が 480px になります。レスポンシブの一般的な考え方は、モバイルからデザインすることです。しかし、私が提供したリンクは、そのすべてを説明します。

また、サンプル コードには、例で再定義するコンテンツ ブロックや何もありません。しかし、「main_content」と呼ばれる div があると仮定すると、ヘッダー、ナビゲーション、またはその他の邪魔になるものをクリアするように、margin-top を持つように指示できます。この場合、すべてのデバイスとディメンションの可能性をカバーするページ全体を埋めることができるため、実際の例はプリンシパルほど必要ではないと思います. それを行う最善の方法は、手を汚して練習することです。慣れるのは本当に難しいことではありません。

「is_mobile」のように、amm をカバーする簡単な方法については...いいえ、それをしようとしないでください。最近誰かが指摘したように、「モバイル」の定義は日々変化しています。「モバイル」をターゲットにしようとすると、それを維持しようとして大きな混乱が生じるだけです。

小さなビューを作成するためだけに、モバイル デバイス上にあるかどうかを気にしない場合は、最大幅 768 ピクセルのメディア クエリを 1 つ記述できます。

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