モバイルWebページレイアウト

viewport
viewportはブラウザで、Webページの一部を表示するための領域です.私たちの携帯電話とは幅が異なり、あなたの携帯電話の幅が320 pxでも640 pxでも、携帯電話のブラウザ内部の幅は、常にブラウザ自体のviewportの幅になります.現在のブラウザでは、自分自身にviewportのデフォルト値が提供されています.現在、新しいバージョンの携帯電話ブラウザのほとんどは980 pxをデフォルトのviewport値としています.このように、私たちの携帯電話のブラウザでは、横スクロールバーが表示されます.ページレイアウトの中で、いくつかのページが特殊な横レイアウトであることを除いて、他の正常な状況では、横スクロールバーが表示されるのは非常に致命的な行為であることを知っています.したがって、一般的には、ブラウザにモバイル側のページを設計します.さらにviewportの簡単な設定を通じて、viewportとデバイスのサイズを等しくしたり、相互関係を持ったりすることで、私たちのページをより良い体験にすることができます.
ページのmetaラベルで設定できます.設定文は次のとおりです.

パラメータの説明:

width=device-width:幅が現在のデバイスの幅に等しい

initial-scale:初期スケール(既定は1.0)

minimum-scale:ユーザーが縮小できる最小スケール(デフォルトは1.0)

maximum-scale:ユーザーが縮小できる最大スケール(デフォルトは1.0)

user-scalable:ユーザーが手動でスケールできるかどうか(デフォルトはnoです.縮小ページを拡大したくないためです)

移動先ページ共通単位
比較的よく使われる単位はem,rem,%,vw,vhなどであり,これらの単位には共通点があり,いずれも相対単位であり,ページのviewportの変化に応じてリアルタイムで変更できる.
簡単に説明します:emの値は、親要素のfont-sizeに基づいて計算されます.remは要素のfont-sizeに基づいて計算されます.%親要素の寸法に基づいて計算します.vwとvhはそれぞれviewportの幅と高さに基づいて計算され、100 vwまたはvhはviewportの幅または高さに等しい.
remは相対寸法単位であり、remはルートノードhtmlのfont-sizeの値をページ全体の基準寸法とし、以下のように計算される.
要素のremサイズ=要素のpsd原稿測定の画素サイズ/動的設定htmlラベルのfont-size値
設計原稿の幅画素/htmlのfont-size=1 remの値.もちろんhtmlのfont-sizeを動的に変更する必要があります.

@media screen and (min-width: 320px) {html{font-size:17.06666px;}}
@media screen and (min-width: 360px) {html{font-size:19.2px;}}
@media screen and (min-width: 375px) {html{font-size:20px;}}
@media screen and (min-width: 400px) {html{font-size:21.33333px;}}
@media screen and (min-width: 414px) {html{font-size:22.08px;}}
@media screen and (min-width: 440px) {html{font-size:23.46666px;}}
@media screen and (min-width: 480px) {html{font-size:25.6px;}}
@media screen and (min-width: 520px) {html{font-size:27.73333px;}}
@media screen and (min-width: 560px) {html{font-size:29.86666px;}}
@media screen and (min-width: 600px) {html{font-size:32px;}}
@media screen and (min-width: 640px) {html{font-size:34.13333px;}}
@media screen and (min-width: 680px) {html{font-size:36.26666px;}}
@media screen and (min-width: 720px) {html{font-size:38.4px;}}
@media screen and (min-width: 750px) {html{font-size:40px;}}
@media screen and (min-width: 760px) {html{font-size:40px;}}
@media screen and (min-width: 800px) {html{font-size:40px;}}
@media screen and (min-width: 960px) {html{font-size:40px;}}

大工場のやり方

/*     m.jd.com */
@media only screen and (min-width: 320PX) and (max-width:360PX) {
    html {
        font-size:13.65px
    }
}
@media only screen and (min-width: 360PX) and (max-width:375PX) {
    html {
        font-size:15.36px
    }
}
@media only screen and (min-width: 375PX) and (max-width:390PX) {
    html {
        font-size:16px
    }
}
@media only screen and (min-width: 390PX) and (max-width:414PX) {
    html {
        font-size:16.64px
    }
}
@media only screen and (min-width: 414PX) and (max-width:640PX) {
    html {
        font-size:17.664px
    }
}
@media screen and (min-width: 640PX) {
    html {
        font-size:27.31px
    }
}
/* 
          
       40px  ，            ，iPhone6       375， html font-size 16px，
    rem： 40/16 = 2.5 rem
*/