Mobile webapp adaptive practices (css Sprites for creating gadgets)

Mobile webapp adaptive practices (css Sprites for creating gadgets)
Why write this?

I have previously written articles (LINKS) on the adaptive screen of webapps, but most people do not understand them, so I came to a illustrated version. Although it is just a simple page, it is also a good thing to have encountered some problems during the process!

Github address: https://github.com/iwangx/WebApp

Address: https://csssprite.herokuapp.com/

Preparation

Psd: This is the most important thing. It is used to measure the size and cut the image. I don't agree to cut the image and hand it over to the ui. It is better to cut it by myself, psd resolution I made the width of 640px, of course, this psd is under the Internet

Css sprite creation tool: the latest version (v4.3) is a small program that concatenates multiple images into one image and generates code (self-developed)

Webstorm: front-end development tool

Markman: front-end color measurement tool

Photoshop: Image Cutting Tool

Sass: css pre-compilation tool

Step 1: Cut the Graph

I use photoshop to cut the image, as shown in the following figure:

Of course, it may not be clear. After all, it is a white image.

Step 2: Build a framework

The general structure is this, address: https://github.com/iwangx/WebApp

Ii. css Structure

Css mainly uses sass as a pre-compiled tool with the following structure:

Reset. scss files are used to reset element styles.

The app. scss file is for a single page style

Size. The scss file contains variables that are 1-Self-Adaptive on the mobile phone end.

Step 2. js Structure

The most important thing in js is adaptive code. The address: mobile terminal adaptive, zepto is not introduced, because it is just a simple example.

Step 3: html page Structure

The page structure is as follows:

Header: header title

Nav: navigation of the header

Controller: Intermediate List

Footer: Bottom navigation

Step 4: Generate sprites

Use sprite generation tool: Generate Sprite and generate code:

Copy the code to the app. scss directory in the css directory.

Of course, the premise is to introduce the size variable file, or else $ _ * will not be able to identify and report an error.

Step 5: page and css Encoding

Css code:

@ Import "size"; // All image variables @ 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}View Code

Html code:

<! DOCTYPE html> Where images are used, there are mainly two classes: one is the sprite class and the other is the class referenced by him.

We can see that all the sizes in the css code are $ _ *, that is, the size measured, including the font size.

This constitutes our webapp

This is the case on iPhone 5.

This is the case on iPhone 6.

This is the case on the tablet.

Conclusion

I hope this blog will be helpful to you, especially new users. I also hope you can give more comments.