私は自分のウェブサイトをさまざまな画面サイズで機能させようとしています。この分野は初めてで、助けが必要です。
私が達成しようとしているのは、コンテンツのサイズを小さくすることなく、さまざまな画面サイズで Web サイトを機能させることです。YouTube のレイアウトに近い Web サイトを持っていますが、YouTube と同じようにサイズを縮小したいと考えています。左右の余白が少なくなり、画面サイズが小さくなり、ユーザーの画面サイズに関係なく、Web サイトの外観が同じになります。
どうすればこれを達成できますか?
ベスト プラクティスは、対処したい最小の解決策から始めて、そこから構築することです。
しかし、最初は流動的なレイアウトで作業するのが最善です。
簡略化:
#wrap {
width:90%;
margin:20px auto;
max-width:960px;
}
これをコンテンツ全体に配置し、コンテンツの幅を 100% にします。
これで、いくつかのメディア クエリを使用して、より小さな解像度を開始および構築できるようになりました。1 つはタブレット用、もう 1 つは 1 より小さいものすべてに使用することをお勧めします。
@media screen and (max-width: 767px) {
/* ALL < TABLET */
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* TABLET */
}
レスポンシブ レイアウト用の事前にコード化された優れたテンプレートがいくつかありますが、最初は圧倒される可能性があります。いくつか試してみたい場合は、次のことをお勧めします。