CSSを使用してアダプティブスクエアを実装する方法の例

CSSを使用してアダプティブスクエアを実装する方法の例

伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。

。箱{
		幅: 200ピクセル;
		高さ: 200px;
		背景: ピンク;
		色: #666;
	} 

しかし、多くの場合、モバイルデザインでは、画像の幅はモバイルデバイスによって変わります。このとき、適応型スクエアが必要になります。

比較的単純な実装方法を 2 つ紹介します。

方法 1: CSS3 vw 単位、vw はビューポートの幅に相対的です。ビューポートは 100 単位の vw 単位に分割されます。 1vw = 1% ビューポート幅

。箱{
		width: 20%; //width:20vw でも OK height: 20vw;
		背景: ピンク;
	}

方法 2:ボックスの padding-bottom スタイルを、ボックスの padding-bottom がボックスの幅と同じになるように設定し、height = 0px に設定します。

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<meta http-equiv="X-UA-compatible" content="IE=edge">
		<タイトル></タイトル>
		<link rel="スタイルシート" href="">
	</head>
	<スタイル>
                *{
            	    マージン: 0;
	            パディング: 0;
                }
		。箱{
			幅: 20%;
			/* コンテンツによってボックスの高さが過度に伸びるのを防ぐため、高さを 0 に設定します */
			高さ: 0px;
			/* ボックスの高さを拡大します。
			   幅と同じ固定幅またはパーセンテージを設定します。
			   パーセンテージは親要素ボックスの幅に対する相対値です*/
			パディング下部: 20%;
			背景: ピンク;
			色: #666;
		}
	</スタイル>
	<本文>
		<div class="box">	
	            <p>これは自己適応型正方形です</p>
		</div>	
	</本文>
</html> 

ここでheight: 0pxと書かれていない場合、ボックス内にコンテンツがある場合、ボックスはコンテンツによって拡張されることに注意してください。

padding-bottom を padding-top に変更すると何が起こりますか?

四角の中にコンテンツがある場合、そのコンテンツは四角の外側に表示されることがわかります。これは、デフォルトのテキストが左から右、上から下に配置されているため、padding-top の後にはテキストが四角の外側に表示されてしまうためです。そのため、ここでの padding-bottom と padding-top は混在できません。

また、ボックスは height : 0px; に設定されているため、要素内に子要素がある場合、高さを正常に設定できません。したがってposition: absolute;使當前內容脫離文檔流,那么內容的高度百分比參照的就是父級的寬度

*{
	マージン: 0;
	パディング: 0;
}
。箱{
	幅: 20%;
	/* コンテンツによってボックスの高さが過度に伸びるのを防ぐため、高さを 0 に設定します */
	高さ: 0px;
	/* ボックスの高さを拡大します。
	   幅と同じ固定幅またはパーセンテージを設定します。
	   パーセンテージは親要素ボックスの幅に対する相対値です*/
	パディング下部: 20%;
	背景: ピンク;
	色: #666;
	位置: 相対的;
	オーバーフロー: 非表示;
}
p{
	位置: 絶対;
	幅: 100%;
	高さ: 100%;
	背景: 黄色;
}

こうすることで、ボックスの内容が正方形を埋め尽くします。

CSS でアダプティブ スクエアを実装する方法についての記事はこれで終わりです。CSS アダプティブ スクエアの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Nodejs-cluster モジュールの知識ポイントの概要と使用例

>>:  7つのMySQL JOINタイプのまとめ

推薦する

MySQLのUPDATE文の落とし穴を記録する

背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...

Linux シェル環境での Zabbix API の使用

Linux シェル環境で直接呼び出すことができます。公式 Web サイトによると、Zabbix のデ...

Docker のコンテナ データ ボリュームの概要

目次Dockerコンテナのデータ量データボリュームの使用方法1: コマンド-vを使用して直接マウント...

MySQL テーブル作成外部キー エラーの解決方法

データベーステーブルA: テーブル task_desc_tab を作成します ( id INT(11...

Docker可視化ツールPortainerの導入と中国語翻訳

#docker 検索#docker プルポーター1. イメージを取得した後、中国語パッケージをダウン...

Reactプロジェクトで画像を導入するいくつかの方法

imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...

HTML TextArea でのフォーマット保存の問題の解決方法

textarea の形式は保存時にデータベースに保存できますが、表示時には /n と相互に変換できな...

CSS3 シンプルカットカルーセル画像実装コード

実装のアイデアまず、親コンテナーを作成し、2 つの順序なしリストを使用して、柔軟なレイアウトで親コン...

Linux における $ 記号の基本的な使い方のまとめ

Linuxバージョン: CentOS 7 [root@azfdbdfsdf230lqdg1ba91 ...

プロジェクトを素早く構築するためのvite+vue3.0+ts+element-plusの実装

目次バイト機能使用環境プロジェクトを構築する構成vite.config.ts tsconfig.js...

Nginxの仕組みの詳細な説明

Nginxの仕組みNginx はコアとモジュールで構成されています。 Nginx 自体は実際にはほと...

yumコマンドの使い方

1. yumの紹介Yum (フルネームは Yellow dogUpdater、Modified) は...

CSS3 のテキストとフォントの新しい設定

テキストシャドウテキストシャドウ: 水平オフセット 垂直オフセット ぼかし色互換性: IE10+ &...

Linux で libudev を使用して USB デバイスの VID と PID を取得する方法

この記事では、libudev ライブラリを使用して hidraw デバイスにアクセスします。 lib...

仮想マシンUbuntu 16.04がインターネットに接続できない問題の解決策

Ubuntu をインストールしたばかりですが、開いたときにネットワーク接続がありませんでした。右上隅...