ホームページ > 記事 > ウェブフロントエンド > CSS Web ページ レイアウト入門チュートリアル 2: 1 列の適応幅_基本チュートリアル
CSS Web ページ レイアウト入門チュートリアル 2: 1 列の適応幅_基本チュートリアル
- WBOYオリジナル
- 2016-05-16 12:07:221585ブラウズ
アダプティブ レイアウトは、Web デザインで一般的なレイアウト フォームです。アダプティブ レイアウトは、ブラウザ ウィンドウのサイズに応じて幅と高さの値を自動的に変更できます。非常に柔軟なレイアウト フォームです。優れたアダプティブ レイアウト Web サイトは、さまざまな解像度に対応できます。 . 高効率モニターは最高の表示効果を提供します。実際, div のデフォルト状態はスペースの行全体を占めます, これは幅 100% のアダプティブ レイアウトの表現です. アダプティブ レイアウトの列に対して行う必要がある作業も非常に簡単です. 必要なのはただそれだけですフォーム内の幅を固定値からパーセンテージ値に変更します。
コードをコピー コードは次のとおりです。
#layout {
border: 2px ソリッド # A9C9E2;
背景色: #E8F5FE;
高さ: 200px;
幅: 80%;
}
CSS は数値を使用しますスタイル属性はすべてパーセンテージを提供し、幅属性も例外ではありません。ここでは、固定幅 300px の列の幅を 80% に変更します。以下のプレビューからわかるように、div の幅はブラウザの幅の値の 80% に変更されます。アダプティブの利点は、ブラウザ ウィンドウのサイズを拡大または縮小しても、その幅がブラウザの現在の幅に比例したままになることです。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。