モバイル H5 - レッスン 1 CSS

 

1.移动端开发视窗口的添加

 

h5端开发下面这段话是必须配置的

 

meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

 

其它相关配置内容如下：

 

width viewport 宽度(数值/device-width)

height viewport 高度(数值/device-height)

initial-scale 初始缩放比例

maximum-scale 最大缩放比例

minimum-scale 最小缩放比例

user-scalable 是否允许用户缩放(yes/no)

minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。

 

2.媒体查询的改进

 

之前在做移动端开发的时候，为了适配多屏幕。使用的是rem 单位。这个时候就需要根据屏幕的尺寸来来动态的设置根节点html 的font-size 值。这样可以解决多屏幕适配的问题。

 

比如下面的 媒体查询代码

 

html {

    //iphone5

    font-size: 62.5%;

}

@media (max-width: 414px) {

    html {

        //iphone6+

        font-size: 80.85%;

    }

}

@media (max-width: 375px) {

    html {

        //iphone6

        font-size: 73.24%;

    }

}

 

这样做的结果，有两个很明显的缺点。

 

适配屏幕的尺寸不是连续的。

在自己的 css 文件中添加大段的这样查询代码。增加了 css 文件的体积。

 

后来参考淘宝移动端页面适配规则，使用 js 获取客户端的宽度，根据设计稿的原型动态的计算font-size 的值。

 

详细的内容请看这里 根据iPhone6设计稿动态计算rem值

 

3.a标签内容语义化

 

大多数时候我们都会给一片区域加上点击跳转的功能。如下图：

 

 

 

很可能我们商品区域都是使用的div 标签。很容易我们会给最外层加上一个 a 标签。因为a 是行内元素，是没有宽和高的。不能够把容器撑开。

 

一种解决办法就是给a 标签设置block 属性。如下：

 

 

   

機能的には問題ありません。しかし、セマンティック レベルでは、上記のコードは標準ではありません。

最善の方法は、HTML コードが邪魔にならないように次の変更を行うことです:

{ディスプレイ:ブロック;}

スパン{表示:ブロック;}

4. 自分のページの最大幅と最小幅を設定します

rem 単位を使用し、js を使用してフォント サイズの値を動的に計算すると、最大および最小の端末画面に無限に適応できます。しかし、ユーザーの画面が一定サイズを超えて h5 ページを表示し続けると、ユーザーにとって非常に不親切になります。

JD.comと淘宝網のh5ページを見てみましょう

ページの最大幅と最小幅が定義されていることがわかりました。これにより、画面が一定のサイズを超える場合に、より分かりやすい表示が可能になります (もちろん、これは必須ではありません)。

商品ページに定義した最大幅と最小幅は次のとおりです:

{

最大幅:640px;

最小幅:320px;

}

5. モバイルブラウザのデフォルトの入力スタイルを削除します

1. タグの背景を無効にする

モバイル端末でaタグをボタンとして使用している場合、クリックすると「濃い」背景が表示されます

背景を削除する方法は以下の通りです。

a,button,input,optgroup,select,textarea {

-webkit-tap-highlight-color:rgba(0,0,0,0); /*入力、ボタンがクリックされたときに青い外枠と灰色の半透明の背景を削除します*/

}

2.メニューバーを表示するためのa,imgタグの長押しは禁止です

aタグを使用する場合、モバイル端末を長押しするとメニューバーが表示されます。このとき、メニューバーの呼び出しを無効にする方法は次のとおりです。

あ、画像{

-webkit-touch-callout: none; /*リンクと画像ポップアップ メニューの長押しを無効にする*/

}

3. スムーズなスクロール

本体{

-webkit-overflow-scrolling:touch;

}

6.CSS 文字列の切り詰め

単一行の文字列を切り詰めます。文字列の幅をここで指定する必要があります

{

/*文字列の幅を指定*/

幅:300ピクセル

オーバーフロー: 非表示

/* 文字列が指定された長さを超える場合、省略記号が表示されます*/

テキストオーバーフロー:省略記号

空白: ナラップ

}

7.calc関連の質問

レイアウトを行う際に calc を使用すると、オンラインで重大なバグが発生しました。その後、この属性の使用法を詳しく調べました。

calc の便利な点は、任意の単位間で変換できることです。ただし、ブラウザのサポートはあまり良くありません。スクリーンショットを見てください:

互換性を確保するために使用する場合は、メーカーのプレフィックスを追加します。ただし、ブラウザのサポートが制限されているため、現時点では使用はお勧めできません。

サンプルコード:

#formbox {

幅: 130px;

/*メーカーの接頭辞を追加します。演算子 (+、-、​​、/) は両側にスペースが必要です)*/

幅: -moz-calc(100% / 6);

幅: -webkit-calc(100% / 6);

幅: 計算(100% / 6);

境界線: 1 ピクセルの黒一色;

パディング: 4px;

}

淘宝網、天猫、JD.com の h5 ページを調べたところ、このユニットは主に互換性の問題が原因であまり使用されていないことがわかりました。

8.ボックスサイジングの使用法

異なるブラウザでのボックスモデルのパフォーマンスが一貫していない問題を解決します。ただし、互換性の問題は依然として残ります。以下のブラウザのサポート リストを参照してください。

box-sizing プロパティは、デフォルトの CSS ボックス モデルが要素の高さと幅を計算する方法を変更するために使用されます。この属性は、標準ボックス モデルを適切にサポートしていないブラウザの動作をシミュレートするために使用されます。

3 つの属性値があります:

content-box のデフォルト値、標準ボックス モデル。幅と高さにはコンテンツの幅と高さのみが含まれ、境界線、パディング、マージンは含まれません。注: パディング、境界線、マージンはすべてこのボックスの外側にあります。 たとえば、 .box {width: 350px}; および {border: 10px plain black;} の場合、ブラウザでレンダリングされる実際の幅は 370px; になります。

パディングボックスの幅と高さにはパディングが含まれますが、境界線とマージンは含まれません。

border-box width 与 height 包括内边距与边框，不包括外边距。这是IE 怪异模式（Quirks mode）使用的 盒模型 。注意：这个时候外边距和边框将会包括在盒子中。比如 .box {width: 350px; border: 10px solid black;} 浏览器渲染出的宽度将是350px.

浏览器支持：

9.水平垂直居中的问题

可以看之前写定位的一篇文章，末尾有讲到各种定位：【从0到1学Web前端】CSS定位问题三(相对定位,绝对定位)

这里实现一个相对定位和绝对定位配合实现水平垂直居中的样式。看效果：

html 代码如下：

       

 

CSSコードは次のとおりです:

.parent-div{

幅: 100px;

高さ: 100px;

背景色:赤;

位置:相対;

}

.child-div{

幅: 50px;

高さ:50px;

背景色:#000;

位置: 絶対;

margin:auto;

; トップ: 0;

left:0;

0 右: 0;

下:0;

}

絶対配置は、レイアウトにおける多くの問題を非常に直接的な方法で解決できますが、ほとんどの場合、絶対配置は使用されず、フローティングやその他の方法が使用されます。絶対配置は、DOM 要素を現在のドキュメント フローから分離する必要がある場合にのみ使用されます。例: 弾性層、懸濁層など。

10. CSS の行の高さの問題

line-height の非常に重要な使用法は、テキストを親要素の垂直方向の中央に配置できるようにすることですが、使用時にいくつかの問題も発生します。

まず、以下に示す例を見てみましょう:

コードも非常に単純です。つまり、div で定義したフォントが大きい場合、フォントと親要素の間にいくつかのギャップが見られます。では、なぜそうなるのでしょうか?

次のように line-height の定義を確認してみましょう:

通常のデフォルト。適切な行間を設定します。

数値 現在のフォントサイズに乗じて行間を設定する数値を設定します。

長さは固定行間隔を設定します。

% 現在のフォント サイズに基づく行間隔のパーセント。

inherit は、line-height 属性の値が親要素から継承されることを指定します。

上記の状況で、フォントをコンテナ全体に表示したい場合は、値 100% で line-height 属性を親コンテナに追加する必要があります

コードと効果は次のとおりです:

それでは、なぜ上記の問題が発生するのでしょうか?

line-height と font-size (行間) の計算値の差を 2 つに分割し、それぞれテキスト行コンテンツの上部と下部に追加します。

したがって、次の式を導き出すことができます:

空白 = 行の高さ – フォントサイズ

つまり、行の高さの値を 100% に設定すると、行の高さの値はフォント サイズのサイズと等しく、このときの空白は 0 になります。

11. 垂直配置を使用してアイコンが垂直方向の中央に配置されるように調整します

多くの場合、アイコンとテキストを一緒に使用する必要があり、アイコンとテキストの両方を垂直方向の中央に配置する必要があります。下の写真に示すように:

テキストの垂直方向の中央揃えを実現したい場合は、line-height=親コンテナの高さを使用するだけで簡単です。ただし、アイコンを垂直方向の中央に配置するのはさらに面倒です。

通常の状況では、以下に示すように、テキストまたは隣接するコンテナはテキストと同じ最下行に配置される必要があります:

明らかに、戻るアイコンが垂直方向の中央に配置されていないことがわかります。では、アイコンを垂直方向の中央に配置するにはどうすればよいでしょうか?

まず、いくつかの行間の関係を理解し​​ましょう（写真はインターネットからのものです。侵害がある場合はお知らせください）:

このように、vertical-align 属性を使用する必要があります。最も重要な点は次のとおりです。

インライン要素またはテーブルセル要素の垂直方向の配置を指定します

baseline: valign 属性をサポートするオブジェクトのコンテンツを親要素のベースラインに揃えます

sub: 要素のベースラインは、親要素の下付き文字のベースラインと位置合わせされます。

super: 要素のベースラインは、親要素の上付き文字のベースラインと揃えられます。

top: 要素の先頭とその子孫が行全体の先頭に揃えられます。

text-top: 要素の上部は親要素のフォントの上部と揃えられます。

middle: 要素の中央の線は、親要素のベースラインと位置合わせされます。

bottom: 要素の下部とその子孫が行全体の下部に揃えられます。

text-bottom: 要素の下部は親要素のフォントの下部と揃えられます。

percentage: ベースラインからのオフセットをパーセンテージで指定します。マイナスになることもあります。パーセンテージのベースラインは 0% です。

length: 長さの値を使用して、ベースラインからのオフセットを指定します。マイナスになることもあります。数値のベースラインは 0 です。 (CSS2)

以下の HTML をご覧ください:

       

       

        我就是标题

最初の結果はこんな感じです

アイコンを右側のフォントに対して中央に配置して、以下に示すような結果を実現したいと考えています。

現時点では、vertical-align 属性を使用し、その length 属性を設定する必要があります。つまり、テキストのベースラインに対するアイコンのオフセットを設定します。

属性を追加すると、アイコンとテキストの両方を垂直方向に中央揃えにするのが簡単になります。

{

vertical-align:15px;

}

この時点で、アイコンとフォントは親要素を基準にして中央に配置されます。

12.フレックスボックスモデルの利用

flex は現在、PC 側では十分にサポートされていません (主に IE8 および 9 ユーザーがまだ多いため)。ほとんどの場合、モバイル側では flex レイアウトを使用します。しかし、それでも、欺瞞的なバグがたくさんあるでしょう。

どのような場合に flex を使用するかという、基本的な使用方法について話しましょう。

1.flex 属性を使用する場合

まず、以下に示す製品モデルを見てみましょう

私の左側の商品と右側の商品の幅は同じです。このモデルを見たときに最初に考えたのは、flex を使用して 2 列の製品リストを画面領域を均等に分割することでした。今回はflexを使用して行います。

親要素は以下のように定義されています

{

margin-bottom: .5rem;

ディスプレイ:ボックス;

表示: -webkit-box;

表示: -ms-flexbox;

ディスプレイ: フレックス;

表示: -webkit-flex;

-webkit-flex-flow: 行;

-ms-flex-flow: 行;

フレックスフロー: 行;

}

2.メーカープレフィックスを追加します

flex を使用する場合は、必ずメーカーの接頭辞を追加することを忘れないでください (現在、3 つの書き方があります: 1、古い 2、余分な 3、新しい)。そうしないと、互換性の問題が確実に発生します。

{

表示: -webkit-box;

表示: -ms-flexbox;

ディスプレイ: フレックス;

表示: -webkit-flex;

}

3. 以前のバージョンのブラウザとの Flex の互換性

まず私のコードを見てください:

{

ボックスフレックス: 1;

-webkit-box-flex: 1;

-webkit-flex: 1;

-ms-flex: 1;

フレックス: 1;

幅: 18.5レム;

}

ここでは、左側と右側が画面の幅を均等に分割するようにします。

Android 4.3 携帯電話で flex を使用する前に問題が発生しました。通常のページは下の写真のようになります

ただし、Android 4.3 スマートフォンでは、結果は次のようになります

後で Tmall ページを調べて (このフレックスを使用する前に Tmall から学んだため)、フレックス値を定義するときに、そのような属性 width=0; があることがわかりました。

そして、この属性をページに追加すると、ページのレイアウトが通常になりました。 Will が何なのか今は理解できません。ハックとしてしか使用できません。この問題が発生した場合は、この属性を追加してみてください。なぜこのように使われるのかご存知の方がいらっしゃいましたら、ご教示ください。

13. CSS3 アニメーションのパフォーマンスの問題

要素のスタイルを変更するために通常使用する CSS 属性が CPU によってトリガーされるか GPU によってトリガーされるかを検出できる Web サイト (ここをクリック) を皆さんにお勧めします。特にアニメーションを実行する場合、グラフィックスのレンダリングに GPU を使用する場合は、 CPU 消費量を削減し、プログラムのパフォーマンスを向上させることができます。

たとえば、画像の位置を切り替えるスライダーアニメーションを作成する場合、Web サイトを通じて属性値をクエリすると、次の結果が得られます

。

上記からわかるように、margin-left を使用すると、ページの再描画とリフローが罰せられます。

しかし、要素の位置を変更するために従来の margin-left の代わりに新しい css3 属性変換を使用すると、ページにどのような影響があるでしょうか?まずはウェブサイトのクエリの結果を見てみましょう:

クエリ結果から、transform を使用しても再描画がトリガーされないことがわかります。そして、ページ レイアウトを支援するために GPU をトリガーします。つまり、GPU 操作を使用してアニメーションをレンダリングし、CPU 消費量を削減し、パフォーマンスを向上させます。

CSS アニメーションの簡単な例、CSS コードは次のとおりです:

.lottery-animation {

-webkit-animation: 宝くじ-赤 2s;

アニメーション: 宝くじ-赤 2s;

-webkit-animation-iteration-count: 無限;

アニメーション反復数: 無限;

}

@-webkit-keyframesらしき-red {

から{

-webkit-transform: 回転Y(0度);

変換: 回転Y(0度);

}

から{

まで

-webkit-transform: 回転Y(360度);

変換: 回転 Y(360 度);

}

}

@keyframes 宝くじ-赤 {

から{

-webkit-transform: 回転Y(0度);

変換: 回転Y(0度);

}

から{

まで

-webkit-transform: 回転Y(360度);

変換: 回転 Y(360 度);

}

}

効果は以下の通りです:

ここでは、画像タグに class="lottery-animation" を追加しました

動的な写真をキャプチャするソフトウェアに問題があります。GIF スクリーンショットのアニメーションが少し引っかかり、スムーズではありません。通常のマシンでは問題ありません (Mac 用の便利な gif スクリーンショット ソフトウェアがあれば、お勧めしていただけます。ありがとうございます!)。