ホームページ > 記事 > ウェブフロントエンド > css3アダプティブレイアウトとは何ですか
css3アダプティブレイアウトとは何ですか
- 青灯夜游オリジナル
- 2022-06-02 12:05:242525ブラウズ
アダプティブ レイアウト (別名「レスポンシブ レイアウト」) は、画面幅を自動的に認識し、それに応じて調整を行うことができる Web ページ レイアウトを指します。このような Web ページは、複数の異なる端末と互換性を持たせることができます。各ターミナルは特定のバージョンを作成します。アダプティブ レイアウトは、モバイル Web ブラウジングの問題を解決するために生まれ、さまざまな端末を使用するユーザーに優れたユーザー エクスペリエンスを提供できます。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
アダプティブ レイアウトとは
「レスポンシブ レイアウト」とも呼ばれるアダプティブ レイアウトは、画面の幅を自動的に識別し、対応する変更を行うことができます。調整された Web ページ レイアウトは、端末ごとに特定のバージョンを作成するのではなく、Web ページが複数の異なる端末 (デバイス) と互換性があることを単に意味します。
実際、アダプティブと非アダプティブの違いは、簡単に言うと、デバイスの解像度に関係なくページが自動的に認識して適応し、閲覧ユーザーに優れたエクスペリエンスをもたらすことができることです。
このコンセプトは、モバイルでの Web ブラウジングの問題を解決するために生まれました。アダプティブ レイアウトは、さまざまな端末を使用するユーザーに優れたユーザー エクスペリエンスを提供することができ、大画面スマートフォンの普及により、「一般的なトレンド」と言っても過言ではありません。
#css3 でアダプティブ レイアウトを実装する方法
#一般的に使用される方法は次のとおりです:- CSS でメディア クエリを使用する (最も単純);
- JavaScript を使用する (高コスト);
- サードパーティのオープン ソース フレームワークを使用する (たとえば、ブートストラップはさまざまなブラウザを適切にサポートできます)。
1. メタ タグを設定します
まず、メタ タグを設定して、ブラウザにビューポートの幅 ( Web ページ）はデバイスの幅と同じであり、以下に示すように、ユーザーがページをズームすることを禁止します:<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">ビューポートを設定するときは注意する必要があります。ビューポートとは、表示される領域のサイズです。ビューポートを設定するときは、幅を設定するだけで、高さは気にしません。特定の高さは Web ページのコンテンツによって自動的に拡張されます。上記のメタ タグのコンテンツの意味は次のとおりです:
- viewport: Web ページの表示領域を表すビューポート;
- width: ビューポートを制御します。サイズには、600 などの特定の値、またはキーワードで構成される特別な値を指定できます。たとえば、device-width はデバイスの幅を表します。
- initial-scale: 初期スケーリング比 (ページが最初にロードされたときのスケーリング比) を表します;
- #maximum-scale: 許可される最大スケーリング比を表しますユーザー、0 ～ 10.0 の範囲;
- minimum-scale: ユーザーが 0 ～ 10.0 の範囲の最小比率にズームできることを示します。 user-scalable: ユーザーが手動でズームできるかどうかを示します。「はい」はスケーリングが許可されることを意味し、「いいえ」はスケーリングが禁止されることを意味します。
- 2. メディア クエリ
CSS メディア クエリは、指定された条件に基づいて、メディア タイプ (スクリーン プリント) ごとに異なる CSS を定義できます。さまざまなデバイスを使用するユーザーが最高のエクスペリエンスを得ることができるようにします。
メディア クエリを実装するには 3 つの方法があります: 1)、CSS ファイルで直接使用します。サンプル コードは次のとおりです:@media (max-width: 320px) {
/*0~320*/
body {
background: pink;
}
}
@media (min-width: 321px) and (max-width: 375px) {
/*321~768*/
body {
background: red;
}
}
@media (min-width: 376px) and (max-width: 425px) {
/*376~425*/
body {
background: yellow;
}
}
@media (min-width: 426px) and (max-width: 768px) {
/*426~768*/
body {
background: blue;
}
}
@media (min-width: 769px) {
/*769~+∞*/
body {
background: green;
}
}2)、@ を使用します。 import から import へのサンプル コードは次のとおりです: @import 'index01.css' screen and (max-width:1024px) and (min-width:720px) @import 'index02.css' screen and (max-width:720px)3)、リンク タグで使用されます。サンプル コードは次のとおりです:
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/> <link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>以下は、レスポンシブ レイアウトの実装:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>自适应布局（响应式布局）</title>
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
<style>
*{
margin: 0px;
padding: 0px;
font-family: "微软雅黑";
}
#head, #foot, #main
{
height: 100px;
width: 1200px;
/*width: 85%;*/
background-color: goldenrod;
text-align: center;
font-size: 48px;
line-height: 100px;
margin: 0 auto;
}
#head div{
display: none;
font-size: 20px;
height: 30px;
width: 100px;
background-color: green;
float: right;
line-height: 30px;
margin-top: 35px;
}
#head ul{
width: 80%;
}
#head ul li{
width: 20%;
float: left;
text-align: center;
list-style: none;font-size: 20px;
}
#main{
height: auto;
margin: 10px auto;
overflow: hidden;
}
.left, .center, .right{
height: 600px;
line-height: 600px;
float: left;
width: 20%;
background-color: red
}
.center{
width: 60%;
border-left: 10px solid #FFF;
border-right: 10px solid #FFF;
box-sizing: border-box;
}
@media only screen and (max-width: 1200px) {
#head, #foot, #main{
width: 100%;
}
}
@media only screen and (max-width: 980px) {
.right{
display: none;
}
.left{
width: 30%;
}
.center{
width: 70%;
border-right: hidden;
}
}
@media only screen and (max-width: 640px) {
.left, .center, .right{
width: 100%;
display: block;
height: 200px;
line-height: 200px;
}
.center{
border: hidden;
border-top: 10px solid #FFFFFF;
border-bottom: 10px solid #FFFFFF;
height: 600px;
line-height: 600px;
}
#head ul{
display: none;
}
#head div{
display: block;
}
}
</style>
</head>
<body>
<div>
<header id="head">
<ul>
<li>header1</li>
<li>header2</li>
<li>header2</li>
<li>header2</li>
<li>header2</li>
</ul>
<div>icon</div>
</header>
<section id="main">
<div class="left">
left
</div>
<div class="center">
center
</div>
<div class="right">
right
</div>
</section>
<footer id="foot">
footer
</footer>
</div>
</body>
</html>ブラウザ ウィンドウが 1200 ピクセル未満、980 ピクセルを超える場合、スタイルは 640 ピクセルを超え、980 ピクセル未満の場合とは異なります
(学習ビデオ共有: 
css ビデオ チュートリアル
Web フロントエンド)
以上がcss3アダプティブレイアウトとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。