モバイル H5 開発に関するコンテンツの概要-H5 チュートリアル-php.cn

モバイル H5 開発に関するコンテンツの概要

黄舟

リリース： 2017-05-21 15:02:44

オリジナル

1395 人が閲覧しました

1. モバイル端末を開発するために必要なヘッド構成

<meta name="
viewport
" content="
width
=device-width,initial-scale=1,user-
scala
ble=no">（各
属性
值不在介绍，在开发中小米（2016年小米4）测试user-scalable=no是不起作用的）

ログイン後にコピー

font-size は、開発プロセス中に 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,button点击时蓝色外边框和灰色半透明
 -webkit-tap-highlight-color:rgba(0,0,0,0);
}

ログイン後にコピー

長押しを禁止

imgラベルメニューバーが表示されます

a,img{
 // 禁止长按显示菜单栏
 -webkit-touch-c
all
out:none;
}
流畅滚动
body{
 -webkit-
overflow
-scrolling:touch;
}

ログイン後にコピー

6. calc の使用は、下位バージョン (IE11 以下および Android 56 以下、すべて Opera) の互換性に関係なく、利便性のために使用することをお勧めします。

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

ボックスモデル

の表示の不一致が解決されます。 (モバイル端末でよく使用されます)

content-box; デフォルト値の標準モデル、幅と高さは境界線の内側のマージンと外側のマージンを含みません padding-box; の幅と高さは内側のマージンを含み、境界線は含みません外側のマージン border-box; 奇妙なモデルの幅と高さにはパディングとボーダーが含まれますが、マージンは含まれません。

9. 水平方向と垂直方向のセンタリング (モバイル端末で一般的に使用されます)
欠点: 小さなコンテナーの幅と高さを知る必要があります

形式

<p class="parent">
 <p class="child"></p>
</p>
.parent{
 
position
:relative;
 width:100px;
 height:100px;
 
background-color
:red;
}
// 注意是四个方向都是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: デフォルト、自動的に割り当てられます適度な行間隔 number は、現在のフォントサイズを乗算することによって設定される数値を設定します。つまり、倍数の length は、現在のフォントのパーセンテージに基づいて固定行間隔
% を設定します行間隔
は親要素
から
を継承します
次の式を覚えておいてください。バグを排除するにはこの式を使用してくださいwhitespace spacing=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 開発に関するコンテンツの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。