Client Page Rough Insights

Recently do the client page, is confused, the process, learning a lot of knowledge, only for summary, for reference.

Generally, we get the 640px width of the design draft.
At this point, cut the image to 640px original size and save as PNG
Use PS to scale your design by half 50%
According to the 320px width after zooming, cut the page
The picture inside background-size:50% 50%
Picture font spacing is half-scaled, according to 320px Measurement to write
Set style HTML {font-size:62.5%}
When using REM write size, 1rem=10px is converted to this scale.
For example, the size of the 320px design is 12px. This time, writing CSS is 12/10=1.2rem size
The image size is 30px. This time the CSS writes the picture width: 30/10=3rem height can Height:auto
It means the picture is high fidelity, according to the original cut, write style, according to the size after the scale, you can

The outermost setting is width 100%. or (max-width:640px;)
* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
Box-sizing:border-box;
}
This lets you set the padding without bursting the layout
or customize CSS Settings html{font-size:10px}
After that, write the span{font-size:2rem below;} Which is equivalent to span{font-size:20px}
You need to adjust the font size after the day, directly in the html{font-size:10px} here to modify the size of 10px. Modify a Place
Changed the global font size

Why is it that the font-size:62.5% & font-size:10px is the equivalent of 1rem=10px?
Because, most of the current browser default font is 16px. So ^

Speaking of which, the general business needs, so to do, can,. Each model displays a font size that is the same size.
If business needs, different models, different font sizes. iphone6 above the font size, greater than iphone4 above the font, such as the need for time
Just need
@media screen and (min-width:100px) {/* iPhone 4,5 */
html{font-size:10px;}
}
@media screen and (min-width:320px) {/* iPhone 4,5 */
html{font-size:10px;}
}
@media screen and (min-width:375px) {/* IPhone 6 */
html{font-size:12px;}
}
@media screen and (min-width:414px) {/* IPhone 6 Plus */
html{font-size:12px;}
}
@media screen and (min-width:600px) {
html{font-size:14px;}
}
This sets the. below 1rem=10px Span{font-size:1rem}
or use percentages
@media all and (max-width:320px) {
Html
Body {
font-size:62.5%;
}
}
@media all and (min-width:321px) and (max-width:413px) {
Html
Body {
font-size:72.5%;
}
}
@media all and (width:414px) {
Html
Body {
font-size:82.5%;
}
}
After this set up, also according to 1rem=10px to do conversion

<! DOCTYPE html>
<!--affirm the encoding set of the current page--
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<!--page title--
&LT;TITLE&GT;HTML5 Mobile Development Templates </title>
<!--page keywords--
<meta name= "keywords" content= ""/>
<!--page description--
<meta name= "description" content= ""/>
<!--to fit the current screen--
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<!--disable automatic identification of phone numbers-
<meta name= "format-detection" content= "Telephone=no"/>
<!--Disable automatic mailbox recognition--
<meta content= "Email=no" name= "Format-detection"/>
<!--safari Private meta tag in iphone,
Allow full screen mode to browse, hide browser navigation bar--
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<!--the style of the top Safari status bar in the iphone black---
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >
<style type= "Text/css" >
/*reset Reset */
@charset "Utf-8";

Body,ul,ol,p,h1,h2,h3,h4,h5,dl,dd,form,input,textarea,
td,th,button,strong,em,select,video,canvas{margin:0;padding:0;}
Li{list-style:none;}
table{Border-collapse:collapse;}
Textarea{resize:none;overflow:auto;}
img{border:none; vertical-align:middle;}
em{Font-style:normal;}
a{Text-decoration:none;}
a,input{
-webkit-appearance:none;/* Shielding Shadows */
-webkit-tap-highlight-color:rgba (0,0,0,0);
/*ios Android to remove its own shaded style */
}
A, img {
/* Disable long press link and picture popup menu */
-webkit-touch-callout:none;

}
html{
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
Box-sizing:border-box;
}
HTML, Body {
/* Suppress text selection (required if no text is selected) */
-webkit-user-select:none;
User-select:none;
-webkit-font-smoothing:antialiased; Make the words in the page clear.
-moz-osx-font-smoothing:grayscale; Make the words in the page clear.
}
/*public*/
@media screen and (min-width:100px) {/* iPhone 4,5 */
html{font-size:10px;}
}
@media screen and (min-width:320px) {/* iPhone 4,5 */
html{font-size:10px;}
}
@media screen and (min-width:375px) {/* IPhone 6 */
html{font-size:12px;}
}
@media screen and (min-width:414px) {/* IPhone 6 Plus */
html{font-size:12px;}
}
@media screen and (min-width:600px) {
html{font-size:14px;}
}
body{font-family: "Helvetica Neue", Helvetica, "Stheiti", Sans-serif;
Overflow-x:hidden; Overflow-y:auto;
}
. clearfix:after {
Visibility:hidden;
Display:block;
font-size:0;
Content: "";
Clear:both;
height:0;
}
. clearfix {
Zoom:1;
}
. Fl{float:left;}
. Fr{float:right;}
</style>
<body>
<div>
<div> This is a mobile-side development template </div>
</div>
</body>
PS: This section of the template reference Zhiliang Blog
Http://www.duanliang920.com/learn/web/html5/321.html

Thank you to the network of the Great God guidance, only to have been summarized, for reference only.

Client Page Rough Insights