Rem はアダプティブファーストエクスペリエンスを実装します_html/css_WEB-ITnose

初めてモバイル ページを作成したとき、最初に遭遇した問題はモバイル カルーセルでした。実際、カルーセル画像用のプラグインは多数ありますが、ニーズを完全に満たすプラグインを見つけるのは簡単ではありません。

要件:

1. 基本的なタッチ スクリーンのカルーセル効果を実現します

2. 標準以外の比率の写真を渡すと、自動的に並べて表示されます (もちろん、画像の比率が多少異なる場合があります)例はランダムです。タイル化すると表示されなくなります)

3. カルーセル画像モジュールは、アスペクト比 3:10 などの固定アスペクト比に従って適応して表示できます

1. 初めて知り合ったレム

それでは、この要件の難しさは何ですか?実際には、画像の幅と高さを制限する必要がありますが、それが適応的であることも確認する必要があります

前者だけを考慮すると:

.swiper-container {    width: 100%;    height: 100px;}

しかし、この方法では高さが固定されます。最終的に、相対単位として Rem を使用することにしました。詳細については、www.w3cplus.com/css3/define-font-size-with-css3-rem をご覧ください

私の理解では、rem はフォント サイズを使用します。 100db36a723c770d327fc0aef2ce13b1 要素を単位として使用します。ルート要素の font-size が 20px の場合、その 1rem は 20px です。

次に、ルート要素のフォントサイズがデバイスの解像度に応じて変更される限り、ページ内の各要素の適応を実現できます

それから、次のように書き換えられるはずです

.swiper-container {    width: 100%;    height: 5rem;}

2 100db36a723c770d327fc0aef2ce13b1 のフォント サイズを自動的に変更します

1 つの解決策は、メディア クエリを使用して、主流の解像度でフォント サイズを設定することです

このような js を追加すると、フォント サイズを変更できます画面の幅に応じて動的に変更されます

この文によると、 docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';

iphone4 の幅は 320px であることがわかります。 20px, 100px は 5rem

iphone6 の幅が 375px なら、font-size は 23.4375px, 100px つまり 4.267rem

3. CSS を書くときに、px を rem

に自動的に変換する必要がありますか?これは暗算の王子様ではないのですか？特にデザイン案がiPhone 6をベースにしている場合

この時、sublime textのプラグインcssremを使用していますgithub.com/flashlizi/cssrem

こうすることで、安心してpxを押して書くことができますと思ってから Enter キーを押してレムを変換してください

効果が抜群であることは事実が証明しています

企業プロジェクトなのでレンダリングは載せません