ホームページ  >  記事  >  ウェブフロントエンド  >  モバイルブラウザ適応_html/css_WEB-ITnose

モバイルブラウザ適応_html/css_WEB-ITnose

WBOY
WBOYオリジナル
2016-06-24 11:45:411328ブラウズ

meta

モバイル Web ページを作成するときにこのようなコードをよく見かけます

  • width=device-width ビューの幅をデバイス画面の幅と同じに設定します
  • initial-scale=1 初期スケーリングを 1 に設定します
  • minimum-scale=1 最小スケーリング率を 1 に設定します
  • maximum-scale=1 最大スケーリング率を 1 に設定します
  • user-scalable=no スケーリングを許可しません
  • 単純で大雑把な変換を実行します


    ビューの幅を 320 に設定し、最大ズーム率を 1.3 に設定し、設定しないでください。初期のズーム率。
    これにより、ビュー全体を拡大縮小できます

    rem

    フォントユニット

  • px 継承なし、一般的に使用されます
  • em継承、親要素に対する相対的な継承
  • rem継承、ルートに相対的な継承、通常はHTML、 css3 属性、IE9+ およびその他の最新のブラウザーをサポートします
  • vh 1vh​​=ウィンドウの高さ/100、css3 属性で、IE9+、chrome20+、firefox19+、safari6+、Android ブラウザー4.4+
  • vw 1vw=ウィンドウの幅/100 をサポートします

    remを使用します

    さまざまな画面に適応するために、ルート要素のフォントサイズをjsを使用して計算します

    vhを使用します

    vhは元々ウィンドウの高さであり、高さに応じて調整できます別の画面のウィンドウの

  • 追伸、やはりブログは出来ません

    声明:
    この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。