Mobile End WebApp Adaptive Practice (CSS Sprite production of small tool practice) illustrated

Why are you writing this?

Previously written about WebApp Adaptive screen article (link), but the majority of people do not understand, so come to an illustrated version. Although it is just a simple page, but in the process of doing also encountered some problems, it is a good thing!

The example GitHub address: https://github.com/iwangx/WebApp

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

Ready to

PSD: This is the most important thing, for measuring dimensions, as well as Chettu, I am not quite agree with Chettu work to the UI, cut their own better, PSD resolution I do is 640px width, of course this PSD is online

CSS Sprite production tools: The latest version (v4.3) to be able to splice multiple pictures into a picture and generate code of the small program (I independently Research and development)

Webstorm: Front-End development tool

Markman: Front Dimension color measuring tool

Photoshop: Sharp-cut graphics

SASS:CSS Pre-compiling tools

The first step, Chettu

I'm using a Photoshop-cut diagram, which is as follows:

Of course may not see very clearly, after all, is the white figure

Step two, build the frame

This is the gross structure, address: https://github.com/iwangx/WebApp

Part II, CSS structure

CSS mainly uses Sass as a precompiled tool, the structure is as follows:

The Reset.scss file is primarily a reset of the element style

App.scss file is on a single page style

The Size.scss file contains a mobile phone-side adaptive 1-400 size variable

The second step, JS structure

The most important thing in JS is the adaptive Code, address: Mobile End adaptive, zepto These are not introduced, because it is a simple example

step three, HTML page organization

The page structure is shown below:

Header: Header title

Nav: The head of the navigation

Controller: Middle List

Footer: Bottom Navigation

Fourth Step, the formation of Sprite map

Using Sprite Generation tool: Generate Sprite map, and generate code:

Copy the code to the APP.SCSS directory in the CSS directory

Of course, the premise is to introduce the size of the variable inside the file, otherwise $_* can not recognize the error

Step Fifth, page, and CSS encoding

CSS code:

@import "Size";
All picture 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%;d isplay:-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 code:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<meta name= "viewport" content= "initial-scale=0.5,minimum-scale=0.5, Maximum-scale=0.5,user-scalable=no, Minimal-ui ">
<meta name= "Author" content= "wangxing" >
<meta name= "Screen-orientation" content= "Portrait" >
<meta name= "X5-orientation" content= "Portrait" >
<meta name= "format-detection" content= "Telephone=no" >
<title>app Adaptive </title>
<link rel= "stylesheet" href= "/css/reset.css" >
<link rel= "stylesheet" href= "/css/app.css" >
<script src= "/js/lib/resize.js" ></script>
<body>
<button class= "Sprite Btn-left" ></button>
<span> Long Distance wine industry </span>
<button class= "Sprite Btn-right" ></button>
<nav class= "NAV" >
<a href= "javascript:;" > Information </a>
<a href= "javascript:;" > Products </a>
<a href= "javascript:;" > Combat </a>
<a href= "javascript:;" > Discussion </a>
</nav>
<section class= "Controller" >
<ul class= "List" >
<li>
<a href= "#" >

<div class= "List-right" >
<p> Promotion of traditional liquor production mechanization level has become the focus of future research work, thus promoting the rapid development of wine equipment and technology ......</p>
</div>
</a>
</li>
<li>
<a href= "#" >

<div class= "List-right" >
<p> Promotion of traditional liquor production mechanization level has become the focus of future research work, thus promoting the rapid development of wine equipment and technology ......</p>
</div>
</a>
</li>
<li>
<a href= "#" >

<div class= "List-right" >
<p> Promotion of traditional liquor production mechanization level has become the focus of future research work, thus promoting the rapid development of wine equipment and technology ......</p>
</div>
</a>
</li>
<li>
<a href= "#" >

<div class= "List-right" >
<p> Promotion of traditional liquor production mechanization level has become the focus of future research work, thus promoting the rapid development of wine equipment and technology ......</p>
</div>
</a>
</li>
</ul>
</section>
<footer class= "Footer" >
<a href= "#" >
<i class= "Sprite Icon_book" ></i>
<span> Information </span>
</a>
<a href= "#" >
<i class= "Sprite Icon_tag" ></i>
<span> Products </span>
</a>
<a href= "#" >
<i class= "Sprite Icon_person" ></i>
<span> Combat </span>
</a>
<a href= "#" >
<i class= "Sprite Icon_more" ></i>
<span> discussion </span>
</a>
</footer>
</body>

Used in the place of the picture, there are mainly two classes, one is the Sprite class, one is his ability to quote class, the combination of the two

You can see the size of the CSS code is all $_*, that is, measured size, including the font size is

That's what makes us webapp.

Iphone5, that's it.

Iphone6, that's it.

It's like this on the tablet.