ヒント メディア クエリと各デバイスのページ サイズのページ高さのフロントエンド エクスペリエンスの概要_html/css_WEB-ITnose

しばらくの間、私は 1 か月以上 Wi-Fi フロントエンド プロジェクトに取り組みました

ほぼ完成したとき、さまざまな小さな問題が修復され、いくつかの非常に散在した問題が解決されました

ページにはすべてが含まれているため、すべてのページには背景色があります

現在、デバイスにはさまざまな画面比率 (16:9) 解像度 (1024px_768px) とピクセル比率 (devicePixelRatio) があるため、主な焦点はモバイル フロントエンドの方向です

ページの適応性について 組み合わせると、実際に考慮する価値のあることがたくさんあります

ページ幅は、パーセンテージの HTML 本文スタイルを使用するか、優れたラスタライズとブレークポイントを備えたブートストラップを使用するのが非常に便利です

Iページの高さを自分で設定する 一連の解決策ですが、たとえば、この一連の解決策にはまだ改善の必要があります。 . しかし、仕事の進捗は重要であり、知識を掘り下げるために無限に一つのことに固執することはできますが、終わりのない作業姿勢でプロジェクトを処理することはできず、時間は貴重です。

それで、私がプロジェクトでやったのは、高さを設定するだけなので、スタイルファイルを導入するときにメディアクエリメソッドを使用しなかったので、インポートされたCSSファイルにメディアクエリを入れました。複数のビューに対するユニバーサルなカスタマイズであるため、この部分をインポートされた外部 CSS ファイルに配置しました

 1 /*为大屏幕设备 pc */ 2 @media all and (min-width: 1020px){ 3     .wrap_backgd_size{ 4         min-height: 770px; 5     } 6 } 7 /*for tablet*/ 8 @media all and (max-width: 800px){ 9     10 .wrap_backgd_size{11     min-height: 580px;12 }13 14 }15     /*页面高度定制*/16 /*for iphone4 it ratio is  320x480*/17 @media all and (max-width: 330px) and (max-height: 490px) and (min-height: 470px){18     /*.testmedia{19         color: white;20     }*/21     .wrap_backgd_size{22         min-height: 485px ;23     }24 }25 26 /*for iphone 5 it ratio is 320x568*/27 @media all and (max-width: 330px) and (max-height: 570px) and (min-height: 560px){28     .wrap_backgd_size{29         min-height: 580px ;30     }31 }32 33 34 /*for iphone 6 it ratio is 375x667*/35 @media all and (max-width: 380px) and (max-height: 670px) and (min-height: 660px){36     .wrap_backgd_size{37         min-height: 680px ;38     }39 }40 41 /*for iphone6 plus it ratio is 414x736*/42 @media all and (max-width: 420px) and (max-height: 740px) and (min-height: 730px){43     .wrap_backgd_size{44         min-height: 750px ;45     }46 }47 48 /*for google nexus5 it ratio is 360x640 nexus4=384x640*/49 @media all and (max-width: 385px) and (min-width: 350px) and (max-height: 650px) and (min-height: 630px){    50     .wrap_backgd_size{51         min-height: 650px;52     }53 }

コードはここに掲載されているので、編集して改善して使用することができます。ボックス

注: 1. 同じスタイルへのメディアクエリのルール適用原則は CSS スタイル適用と同じです 優先順位は同じです 後ろに書かれたスタイルは前のスタイルをオーバーライドします

２．当然のことながら、 min-height 属性を使用して、コンテンツが領域を超えることができる最小の高さを設定します