モバイル H5 開発 CSS に関するコンテンツのまとめ

1. モバイル端末の開発に必要なヘッド構成
viewport" content="width=device-width,initial-scale=1,user-scalable=no"> ; (各 属性 の値は導入されていません。開発中に、Xiaomi (2016 Xiaomi 4) は user-scalable=no をテストしましたが、機能しませんでした。)
font- を設定するための 2.rem の使用ルートノードのサイズ、開発プロセスはJsを使用して計算されます。
式 320/100 = 画面サイズ / fontSize の値
3. クリックしてジャンプ、意味ラベルは (dispaly: block;)
意味化 を考慮する場合、a ラベルにスパン (disply: block) を追加します。スパン内のコンテナ 4. ユーザーフレンドリーなエクスペリエンスを実現するために、モバイルページを開発するときに最大幅と最小幅を設定します。
{

max-width:640px;
min-width:320px;}
5. モバイル開発ページの一部のデフォルト スタイルでは、ラベルの背景が禁止されています
a、button、input、optgroup、select、 textare {
// a, input, ボタンクリック時の青い外枠と灰色の半透明を削除
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a, 長押しを禁止
img タグ
メニュー バーが表示されます a,img{ // 長押しを無効にしてメニュー バーを表示します
-webkit-touch-c
all
out:none;}スムーズ スクロール
body{
-webkit-
overflow
-scrolling:touch;}
6. 単一行インターセプトについては、下位バージョンに関係なく、http://www.cnblogs.com/victory820/p/6728904.html

7.calc を参照してください。 (ie11以下、Android 56以下、opera All)互換性、推奨用途、利便性。

8. ボックス サイズ変更を使用すると、異なるブラウザーでの

ボックス モデル

の表示の不一致が解決されます。 (モバイル端末でよく使用されます) content-box; デフォルト値の標準モデル、幅と高さ
には境界線が含まれません 内側のマージン 外側のマージン パディング
-box;ボーダーとマージンを含む bord
er-box; 奇妙なモデルの幅と高さには、マージンを除いたパディングとボーダーが含まれます。 9. 水平方向と垂直方向の中央揃え (モバイル端末でよく使用されます)

欠点: 小さなコンテナーの幅と高さを知る必要があります

形式

.parent{

position
:relative; width:100px; height:100px;

background-color
:red;}// 注4 方向すべてにあること 0
.child{
position:absolute;

margin
:auto; top
:0; right
;0; bottom
:0; left
: 0; width:50px; height:50px;
background-color:gold;
}
10.
line-height
設定 (モバイル端末で一般的に使用されます) normal: デフォルトでは、適切な行間隔が自動的に割り当てられます 数値設定数値は現在のフォント サイズと一致します 設定する乗算、つまり、固定行間隔を設定するための
長さの倍数
% 現在のフォント サイズの行間隔のパーセンテージに基づいて
親要素から継承
を継承
覚えておいてください次の式はバグを取り除くために使用します 空白スペース = lineHeight - fontSize 設定 親要素の行の高さが 100% の場合、空白は存在しません

11.vertical-alignアイコンが垂直方向の中央に配置されるように調整します（モバイルデバイスで一般的に使用されます）
baseline: コンテンツは親要素のベースラインと揃えられます
sub: 要素のベースラインは親要素の添字ベースラインと揃えられます
super: 要素ベースラインは親要素の上付き文字と位置合わせされます ベースラインの位置合わせ
top: 要素の上部とその子孫が行全体の上部と位置合わせされます
text-top: 要素の上部が親要素のフォントの上部と位置合わせされます要素
middel: 要素の中心線が親要素のベースラインに揃えられます
bottom: 要素の下部とその子孫が行全体の下部に揃えられます
text-bottom: 要素の下部親要素のフォントの下部に揃えられます
percentage: パーセントはオフセットを指定します。ベースラインは 0%です
長さ: 数値法、ベースラインは 0 (一般的に使用されます)

12. flex の使用
flex を使用する場合、2 つの列が均等に分散されていない場合は、幅を 0 に設定してみてください
https: //csstriggers .com/CSS プロパティによってどのプロセスがトリガーされるかを確認します

以上がモバイル H5 開発 CSS に関するコンテンツのまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。