サイドバーで反応性の高いシングルページのWebサイトを作成するには？

私が探しているのは、ウェブサイト/ロゴの名前、メニュー、および著作権とおそらくソーシャルリンクを含む小さなフッターの2つのセクション（左側のサイドバー）を持つウェブサイトを作成することです。他のセクションはサイトの主なコンテンツになります。サイドバーで反応性の高いシングルページのWebサイトを作成するには？

実際には、おそらく 'display：inline-block'を使用して次のように表示されます。かなり簡単なようで応答することなくこれを行う

<html> 
    <div class="sidebar"> 

    </div> 

    <div class="content"> 

    </div> 
</html>

、私はどちらか20％幅と80％にコンテンツにサイドバーを設定することができます。または、サイドバーを固定幅、たとえば500px、コンテンツを100％〜500pxに設定します。しかし、これらの両方は、ディスプレイの再利用によって問題を引き起こす可能性があるようです。

パーセンテージを使用すると、小さな画面では小さすぎるサイドバーが表示され、大きな画面では大きすぎるサイドバーが表示される可能性があります。固定幅を指定すると良い選択肢に見えますが、小さな画面では大きすぎること、大きな画面では小さすぎるという逆の問題が発生する可能性があります。

このようにウェブサイトを構築するための業界標準はありますか？私は、このタイプのデザイン（主に写真家やその他のポートフォリオスタイルの使用）を使用していくつかのウェブサイトを見てきました。

出典

2016-08-02 Edward144

を作るためにメディアクエリを使用するための作業例です探す「最小高さ」「最大高さ」と幅は同じ – reporter

これはうまくいくかもしれませんが、サイドバーが最小または最大の高さに達すると、比率が同じではなくなるためコンテンツのパーセンテージベースの幅が乱れることがあります – Edward144

メディアのクエリ：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries –

これを試してみてください：

#fixedWidth{ 
 
     width: 200px; 
 
     float: left; 
 
     background: blue; 
 
} 
 
#theRest{ 
 
    background: green; 
 
}

<div id=fixedWidth>Fixed</div> 
 
<div id=theRest>The rest of the space<br>WTF?</div>

出典

2016-08-02 12:56:33 Friend

簡単なことではありませんが、それは私が探しているものであるかもしれないと思います。上記のように-widthとmax-width！ – Edward144

使用@メディアクエリを、ここでは応答サイドバー

body{ 
 
    margin:0; 
 
} 
 
.sidebar{ 
 
    height:100%; 
 
    position: relative; 
 
    background: #535F8D; 
 
    color: #fff; 
 
} 
 
.main{ 
 
    background: #D0D6EF; 
 
} 
 
@media (min-width: 768px){ 
 
.sidebar{ 
 
    min-height:100vh; 
 
    float:left; 
 
    width:300px; 
 
    } 
 
    .main{ 
 
    margin-left:300px; 
 
    min-height:100vh;/* just for demo , you can delete it*/ 
 
    } 
 
}

<div class="container-wrapper"> 
 
\t <div class="sidebar"> 
 
\t \t Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt assumenda numquam eligendi nihil quibusdam dolores similique expedita iure consectetur, molestias odit, ullam dolor id nemo, autem minima quisquam possimus facilis. 
 
\t </div> 
 
\t <div class="main"> 
 
\t \t 
 
\t </div> 
 
</div>

出典

2016-08-02 13:14:20 Hmache

サイドバーで反応性の高いシングルページのWebサイトを作成するには？

答えて

関連する問題