モバイル開発に関するヒント_html/css_WEB-ITnose

冒頭の言葉

私は最近モバイルプロジェクトを引き継ぎました。個人的には自分の方が速くて強いと感じています。 。 。モバイル端末に関して最も重要なことは、ページがさまざまな携帯電話の画面や iPad などに適している必要があることです。フレームワークに依存せずに独自のプロジェクトを効率的に構築できるようにするためのヒントをいくつか紹介します。

1. スタイルはコンポーネントまたはセクションに応じて別のファイルに記述され、その後合成されます

① さまざまな変数を設定します

scss 以下を使用して CSS コードを記述することには多くの利点があります。ここでは詳細には触れません。

デザイン図面を入手したときの最初のステップは、どのモジュール、どのスタイル、どの色が各ページ間で同じであるかを分析することです。一般的に、各ページでスタイルを統一するには、各ページのメインカラーを同じにする必要があり、多くのページでスライダーなどの同じコンポーネントを使用します。したがって、最初に、色、高さ、幅などの変数を具体的に保存する定数ファイルを定義できます。共通のスタイル ファイルを定義します。たとえば、各ページで使用できる明確なフローティング スタイルやその他のスタイルを記述します。

個人的には、scss を使用して定義する場合、メソッドの 1 つは % 定義メソッドです。これは、定義後にコンパイルされるのではなく、定義されたときにコンパイルされることを意味します。実際に使われている。画像例:

②モジュールごとに分割

個人的には、モジュール等で細分化した後、コードの可読性が大幅に向上し、メンテナンスが容易になり、ページ内に導入されるファイルの数も少なくなりますパフォーマンスも向上します。ただし、サブモジュールのファイル名は「_」で始まる必要があることに注意してください。そのため、サブモジュールはコンパイルされませんが、参照する必要がある場合にはコンパイルされます。例を図に示します。

2. ページ アダプティブ レイアウト

個人的には、モバイル端末に適応するより良いレイアウト方法はパーセンテージ + レム レイアウトだと思います。

パーセンテージの利点は、同じパーセンテージの実際のサイズが画面サイズに応じて変化することです。たとえば、次のようになります。

そこにある赤いボックスは、現在の要件が任意の画面に適応できる連続した 4 つのパネルであると仮定しています。次に、ul と li を使用して html を記述し、次にレイアウトを記述します。ul の幅が 100% に設定されている場合、li の幅は 25% に設定され、box-sizing: border-box が設定されます。さまざまな画面では、これら 4 つの部分が均等に分割され、水平スクロール バーは表示されません。このように、比率が明確でプレートの差別化が高い場合には、パーセンテージを使用してレイアウトするのが適しています。

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

ul{    width:100%;    margin-bottom:10px;｝ul li{    width:25%;    box-sizing:border-box;｝

なぜ box-sizing:border-box; を設定する必要があるのですか?理解できない場合は、http://www.w3school.com.cn/cssref/pr_box-sizing.asp を参照してください。

rem が使用される場合、rem の値は のみです。ルート要素 htm の font-size を基準にします。つまり、ルート要素の font-size を設定するだけでよく、他の要素は rem 単位を使用して対応するパーセンテージに設定できます。その後、 @media を使用して、要素 html の font-size 値をさまざまなサイズで書き込むことができます。それから何か魔法のようなことが起こりました。サイズ、フォントを変更すると。写真などは自動的に適応されます。使ってみると本当に楽しいですよ！

一般的に使用される適応サイズは次のとおりです:

@charset "utf-8";@media only screen and (max-width: 315px){  html {    font-size: 50% !important;  }}@media only screen and (min-width: 316px){  html {    font-size: 62.5% !important;  }}@media only screen and (min-width: 640px){  html {    font-size: 125% !important;  }}@media only screen and (min-width: 750px){  html {    font-size: 150% !important;  }}@media only screen and (min-width: 1242px){  html {    font-size: 187.5% !important;  }}

詳細については、こちらを参照してください: http://www.cnblogs.com/beidan/p/5275379.html#3382529。

3. 一般的な効果方法

① ページセクションは水平にスライドできます

1 つはよく見られるもので、一部の特別販売活動や急ぎ購入活動では水平スクロールが必要です。レンダリング:

このエフェクトにはタッチ イベントや、どれほど複雑な JS を記述する必要があるとは考えないでください。実はCSSだけで簡単に実現できます。原則として、オーバーフロー属性を使用します。横にスクロールして縦に隠すように設定するだけです。

もちろん、他のいくつかのコードも一致する必要があります。

具体的な CSS コードは次のとおりです:

ul.pinxiang-list{        padding:10px;        padding-top:0;        padding-bottom:20px;        width:100%;        box-sizing:border-box;        overflow-x:scroll;        overflow-y:hidden;        white-space: nowrap;        float:left;｝ul.pinxiang-list li{        position:relative;        display:inline-block;        margin-right:5px;<br /> ｝

ここで最も重要なことは、ul の幅を 100% に設定し、左にフローティングすることです。 li は、display:inline-block に設定する必要があります

もう 1 つは、Google を使用してデバッグすると、次のような結果になることがわかります:

はい、明らかなスクロール バーが表示されます。しかし、実機を使用する場合、つまりモバイルデバイスで表示する場合、実際にはスクロールバーが表示されないことがわかります。したがって、モバイルのものを作成する場合は、実機でテストする方が信頼性が高い場合があります。

注意すべきもう 1 つの問題は、li が表示されるため、inline-block がデフォルトの inline 属性を持っていることです。この要素は、要素の前後に改行のないインライン要素として表示されます。また、このプロパティは、インライン要素のベースラインの、要素が存在する行のベースラインに対する垂直方向の配置を定義します。簡単に言えば、これらの li のデフォルトの配置ベースラインはテキストの最後の行に配置されることを意味します。写真を見てください:

画像から、最後の li にはそれをサポートする画像がないことがはっきりとわかります。デフォルトのメソッドはテキストの最後の行に基づいているため、最後の li は「落ちます」。このとき、vertical-align 属性の値を設定する必要があります。 「vertical-align:middle」に設定します。具体的な使い方については、こちらをご覧ください。このように設定すれば問題ありません。エフェクト完成です！ ！ ！

結論

他に何も言うつもりはなかったようです。まずはここでやめましょう。 。 。わからない場合はプライベートメッセージを送ってください！

最後に、皆さんにとって端午節が幸せであることを祈っています。