写真とテキストによるモバイル Web アプリの適応演習 (CSS スプライト制作ガジェットの演習)_html/css_WEB-ITnose

なぜこれを書いているのですか?

以前にWebアプリのアダプティブスクリーンに関する記事(リンク)を書きましたが、ほとんどの人が理解できないので、写真とテキストを含むバージョンを作成します。シンプルなページではありますが、作っていく過程でトラブルも発生したので、それはそれで良かったです！

サンプルのgithubアドレス: https://github.com/iwangx/WebApp

準備

psd: これは最も重要なもので、寸法を測定したり、写真をカットしたりする作業には同意しません。写真はUIに任せて自分でカットした方が良いです。 もちろん、このPSDはインターネットからダウンロードしたものです

CSSスプライト作成ツール：最新バージョン（v4. 3) 複数の写真を 1 枚に貼り付けることができます 写真を撮ってコードを生成する小さなプログラム (自分で開発)

webstorm: フロントエンド開発ツール

Markman: フロントエンドのサイズと色測定ツール

photoshop : 画像切り取りツール

sass: CSS 事前コンパイル ツール

最初のステップ、画像を切り取ります

Photoshop を使用して画像を切り取りました。切り取った画像は次のとおりです:

もちろんそうではないかもしれません結局のところ白い写真なのではっきりしてください

次のステップはフレームを構築することです

一般的な構造はこれです、アドレス: https://github.com/iwangx/WebApp

パート 2、CSS 構造

css は主にプリコンパイルされたツールとして sass を使用します。 構造は次のとおりです:

reset.scss ファイルは主に要素用です スタイルリセット

app.scss ファイルは単一ページスタイルです

size.scss ファイル携帯電話の 1 ～ 400 のサイズに適応する変数が含まれています

第 2 ステップ、js 構造

js で最も重要なことはアダプティブ コードです。アドレス: 携帯端末アダプティブ、ゼプト、これらは導入されていないだけです。簡単な例

3番目のステップ、HTMLページの構造

ページの構造は次のとおりです:

header: header title ... コードをcssディレクトリのapp.scssディレクトリにコピーします

もちろん、サイズ変数のファイルを導入することが前提です。そうしないと、$_* が認識されず、エラーが報告されます

5 番目のステップ、ページと CSS のコーディング

css コード:

@import "size";//所有图片变量@mixin sprite{background:url(../images/sprite.png) no-repeat ;background-size:$_138 $_163;}@mixin icon_right{height:$_59;width:$_59;background-position:0 -$_75 0 -$_5;}@mixin icon_left{height:$_59;width:$_59;background-position:0 0;}@mixin icon_tag{height:$_44;width:$_65;background-position:0 -$_1 0 -$_119;}@mixin icon_person{height:$_44;width:$_65;background-position:0 0 -$_66;}@mixin icon_book{height:$_44;width:$_65;background-position:0 -$_73 0 -$_71;}@mixin icon_more{height:$_44;width:$_65;background-position:0 -$_73 0 -$_119;}body{background: #fbfbfb}.sprite{@include sprite;}.header{position: fixed;background: #dd3131;height: $_90;line-height: $_90;;width: 100%;left: 0;top: 0;font-size: $_40;color: #fff;text-align: center;  button{position: absolute;top: $_16;border: $_2 solid #fff;border-radius: 50%;box-sizing: content-box}}.btn-left{@include icon_left;left: $_16;}.btn-right{@include icon_right;right: $_16;}.nav{display: -webkit-box;position: fixed;left: 0;top: $_90;color: #3d3d3d;font-size: $_30;width: 100%;border-bottom: $_1 solid #e7e5e6;  a{display: block;height: $_60;line-height: $_60;text-align: center;background: #fff;-webkit-box-flex: 1;border-right: $_1 solid #e7e5e6;box-sizing: border-box;}}.controller{padding: $_151 0 $_100 0;}.list{  li{border-bottom:$_1 solid #cfcfcf }  a{display: -webkit-box;padding: $_16;}  img{height: $_122;width: $_122;display: block}}.list-right{-webkit-box-flex: 1;padding-left: $_15;  h1{color: #555;font-size: $_24;}  p{color: #878787;font-size: $_18;margin-top: $_15;line-height: 1.5}}.footer{height: $_100;position: fixed;left: 0;bottom: 0;width: 100%;display: -webkit-box;background: #4a4a4a;text-align: center;  a{display: block;-webkit-box-flex: 1;box-sizing: border-box;padding-top: $_10;border-right: $_1 solid #fff;    &:last-child{border-right: none}  }  i{display: block;margin: 0 auto}  span{color: #fff;font-size: $_24;display: block;margin-top: $_5;}}.icon_book{@include icon_book}.icon_tag{@include icon_tag}.icon_person{@include icon_person}.icon_more{@include icon_more}

HTMLコード:

rrree

画像が使用されている場合、2 つの主要なクラスがあり、1 つはスプライト画像のクラスで、もう 1 つは彼が引用したクラスです。 CSS コードはすべて $_* で、これはフォント サイズを含む実測サイズです

これで Web アプリが形成されます

iPhone 5 ではこんな感じです

iPhone 6 ではこんな感じです

タブレットではこんな感じです

結論

このブログが皆さん、特に初心者の方のお役に立てれば幸いです、また皆さんにもっと意見をいただければ幸いです