モバイル レスポンシブ CSS は、さまざまな解像度に応じてさまざまな @media 画面レスポンシブ レイアウトをどのように表示しますか?
次の記事では、CSS を使用してさまざまな解像度を決定し、さまざまな幅のレイアウトを表示して適応幅を実現する方法を紹介します。
困っている友達が参考にできるので、みんなの参考になれば幸いです。
@media と @media スクリーン印刷 Web ページの違い
- css を印刷デバイスで使用する必要がある場合は @media を使用し、それ以外の場合は @media screen を使用します。
- ただし、これは必ずしも正しいとは限りません. 実際、「screen」を「print」に置き換えて @media print と記述すると、印刷デバイスで CSS を使用できます。
- ただし、@media print で宣言された css は、印刷デバイスでのみ有効であることに注意してください。
1. DIVCSS の小さなケースの説明
最初に「.abc」という名前の DIV ボックス CSS を設定し、その高さを 300px に設定し、CSS 境界線を黒に設定します。
- と設定
margin:0 autoレイアウトは中央に配置され、見やすいようにこれら XNUMX つのスタイルがあらかじめ設定されています。
ブラウザーを手動でドラッグして幅を表示し、ボックスの幅がどのように変化するかを観察します。
- ブラウザの幅が 500px 以下に調整されている場合、ボックスの幅に対応する 100px が表示されます。
- ブラウザの幅を 901px 未満に調整すると、200px を表示するボックスの幅に対応して「.abc」が表示されます。
- ブラウザーの幅が 1201px を超えるように調整されている場合、ボックス オブジェクトの幅は 1200px と表示されます。
- 1200px未満の場合、表示幅は900pxです。
2、CSS携帯電話携帯端末適応コード
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 901px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */- なお、CSSのコード順はCSSを大きい方から小さい方へ組んでいます(ブラウザ幅が広いほど手前が高いと判断)。
- これは論理的な関係で、@media が CSS のデバッグを判断すると、判断が失敗する原因となります。
3. HTML コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
/* 设置了浏览器宽度不大于900px时 abc 显示200px宽度 */
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */
</style>
</head>
<body>
<div class="abc">DIVCSS5实例：我这个DIV宽度会随浏览器宽度变化哦，试试改变浏览器宽度</div>
</body>
</html>注: デバイスの縦横比
- device-aspect-ratio を使用して、特定の画面縦横比を持つデバイスに合わせることができます。これも便利なプロパティです。
- たとえば、私たちのページでは、縦横比が 4:3 の通常の画面のスタイルを定義したいと考えています。
- 次に、16:9 および 16:10 ワイドスクリーンの場合、適応幅や固定幅などの別のスタイルを定義します。
- @media のみの画面と (device-aspect-ratio:4/3)
4. 主要なブラウザに対応 HTML+CSS+JS ソースコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
.abc{ height:300px; border:1px solid #000; margin:0 auto}
@media screen and (min-width: 1201px) {
.abc {width: 1200px}
}
@media screen and (max-width: 1200px) {
.abc {width: 900px}
}
@media screen and (max-width: 900px) {
.abc {width: 200px;}
}
@media screen and (max-width: 500px) {
.abc {width: 100px;}
}
</style>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</head>
<body>
<div class="abc">DIV宽度会随浏览器宽度变化哦，改变浏览器宽度</div>
</body>
</html>以上がモバイル端末対応CSSで、@media画面レスポンシブの詳細コンテンツを画面に応じて表示します。
Hope Chen Weiliang ブログ ( https://www.chenweiliang.com/ ) が「モバイル アダプティブ CSS 異なる画面で異なる @media 画面レスポンシブを表示」を共有しました。これは役に立ちます。
この記事のリンクを共有することを歓迎します。https://www.chenweiliang.com/cwl-2074.html
Chen WeiliangのブログのTelegramチャンネルへようこそ。最新のアップデートを入手できます！
🔔 貴重な「ChatGPT コンテンツ マーケティング AI ツール使用ガイド」をチャンネル トップ ディレクトリでいち早く入手してください! 🌟
📚 このガイドには非常に価値のある内容が含まれています。🌟これはめったにない機会です、お見逃しなく! ⏰⌛💨
気に入ったらシェア＆いいね！
あなたの共有といいねは、私たちの継続的な動機です!
📚 このガイドには非常に価値のある内容が含まれています。🌟これはめったにない機会です、お見逃しなく! ⏰⌛💨
気に入ったらシェア＆いいね！
あなたの共有といいねは、私たちの継続的な動機です!