モバイル H5 開発の概要、CSS の概要と使い方_html/css_WEB-ITnose

これは、25 Academy による haorooms ブログから転載された非常に役立つ CSS ユニットのブログ投稿です。特にモバイル H5 開発を学びたい人にとっては、非常に辛口の記事です。

パート 1 Mobile H5 開発の概要: CSS ユニットの紹介と使用法

CSS ユニットに関して、誰もが最初に考えるのは px、つまりピクセルです。 Web ページのレイアウトでは px が使用されますが、近年ではアダプティブな Web ページ レイアウトが増えており、em やパーセントもよく使用されます。その後、携帯電話の普及に伴い、Web アプリやハイブリッド アプリの開発にはすべて CSS3 テクノロジーが使用され、CSS3 では、rem、vw と vh、vmin と vmax、ch と ex など、多くの新しい単位が追加されました。これらの各ユニットについて詳しく説明しましょう。

1. em

em は珍しい単位ではなく、相対的な単位です。親要素。継承の特性があります。フォント サイズが 16 ピクセル (ブラウザのデフォルト) の場合、1em = 16 ピクセルです。

しかし、このように使用するのは非常に複雑で、px にうまく対応するのは困難です。そこで、フロントエンド開発の先輩が経験をまとめました。

body {font-size: 62.5%;}

そうすると、この後、 1em = 10px となります。 レイアウトなどで使用する際に、変換が非常に楽になります。

2. パーセンテージ

パーセンテージは一般に親要素を基準としたものであることはよく知られていると思いますが、あまり正確ではありません。

1. 通常の位置指定された要素の場合、それは親要素です。

2. 位置: 絶対値を持つ要素の場合、位置指定された親要素 (オフセット親)

3. 位置: 固定の要素は、ViewPort

ビューポートに関連しており、ブラウザー ウィンドウと同じ大きさです。

例外

1. パディングやマージンなどが使用されている場合、実際のパーセンテージと希望するパーセンテージには差が生じます。 (これに対する解決策の 1 つは、CSS3 の calc() 属性を使用することです。詳細については、読み続けてください。記事の最後で説明します。)

2.パーセンテージ 場合によっては、結果は通常、パーセンテージとして計算された値になります。 (これについては、読み続けてください...)

3. rem

rem は、IE9 以降をサポートします。これは、ルート要素 html (Web ページ) に関連することを意味します。 、em とは異なり、親要素のフォント サイズに依存するため、混乱が生じます。より安全に使用できます。

html {font-size: 62.5%; /**10 ÷ 16 × 100% = 62.5%    1rem = 10px   **/}   body {font-size: 1.4rem; /**1.4 × 10px = 14px **/}h1 { font-size: 2.4rem; /**2.4 × 10px = 24px**/}

こうすることで、Web ページ全体がより統一されます。混乱はありません！

4、vh および vw

どちらの単位も IE10 以降および最新のブラウザーでサポートされています。

vw ビューポートの幅、1vw はビューポートの幅の 1% に等しい

vh ビューポートの高さ、1vh は 1 に等しいビューポートの高さの %

vw と vh は、ビューポートの変更に応じて自動的に変更されるため、全画面を制御するために js を使用する必要はなくなりました。

フォントとビューポートのサイズを同期させる効果を得るために、vw と vh を使用してフォント サイズを制御する人もいます。

5. vmin と vmax

IE10+ と最新のブラウザはすでに vmin をサポートしています

Webkit ブラウザは以前は vmax をサポートしていませんでしたが、新しいバージョンではすでに vmin をサポートしており、すべての最新のブラウザがサポートしていますすでにサポートされていますが、IE すべて は vmax

vmin vw と vh の比較 小さい 値

vmax vw と vh の比較 大きな 値

これら 2 つのプロパティはビューポートによっても変更されます

6、ch および ex

IE9 以降と最新のブラウザーの両方すでにサポートされているこれら 2 つの単位は、 の現在のフォント ファミリ に基づく相対単位です。

ch 文字の幅 0

ex 小文字の高さ x

以下に示すように:

font-family が変更されると、これら 2 つの単位の値も変更され、フォントが異なれば表示されるスタイルも異なります。

パート 2 モバイル H5 開発の紹介: CSS3 の新しい単位アルゴリズム

A、css3 の calc()。

calc() については上ですでに説明しました。以下で詳しく説明します。

ブラウザは IE9+、FF4.0+、Chrome19+、Safari6+ をサポートしています

calc() の構文は非常に単純で、子供の頃に足し算 (+)、引き算を学んだのと同じです。 (-)、乗算 (*)、除算 (/) を数式で表します。

.haorooms {  width: calc(expression);}

このように、パディング、マージン、パーセンテージを併用すると、問題を解決できます。 。

たとえば、マージンは 20 ピクセルです。

.haorooms{  width: calc(100% - 20px);  //注：减号前后要有空格，否则很可能不生效！！}

と書くことも、次のように使用することもできます:

.box {    background: #f60;    height: 50px;    padding: 10px;    border: 5px solid green;     width: 90%;/*写给不支持calc()的浏览器*/    width:-moz-calc(100% - (10px + 5px) * 2);    width:-webkit-calc(100% - (10px + 5px) * 2);    width: calc(100% - (10px + 5px) * 2);}

B. 行の高さの割合

行の高さの割合面接で聞かれることがある。たとえば、 line-height:120% と line-height:1.2 の違いをご存知ですか?

次に、次の例のように、単位ありの行の高さと単位なしの行の高さの違いについて説明します。

line-height:26px; 表示行高为26个像素line-heigth:120%;表示行高为当前字体大小的120%line-height:2.6em; 表示行高为当前字体大小的2.6倍

带单位的行高都有继承性，其子元素继承的是计算值，如父元素的字体大小为14px，定义行高line-height:2em;则计算值为 28px，不会因其子元素改变字体尺寸而改变行高。(例如：父元素14px，子元素12px,那么行高就是28px，子元素虽然字体是12，行高还是父元素的行高)

line-height:2.6;表示行高为当前字体大小的2.6倍

不带单位的行高是直接继承，而不是计算值，如父元素字体尺寸为14px，行高line-height:2;他的行高为28px;子元素尺寸为12px，不需要再定义行高，他默认的行高为24px。（例如：子元素12px，他的行高是24,不会继承父元素的28）

希望以上的这些移动H5开发入门知识点，对各位的H5前端开发学习有一定的帮助. 同时25学堂奉上一个纯css3写的加载动画特效。

 点击预览效果

喜欢朋友下载源码，另存为即可。