Mobile End Project Summary ...

A concise example of a responsive layout, a responsive layout is best to also be an adaptive layout, and thenmatch CSS3 Media queries to achieve the perfect responsive layout。
CSS3 Media query IE9 is not supported, it's too bad, but fortunately there is a great God has written for the front end of the dick for the Media query script file for the following IE9, as follows:
<!--[If Lt IE 9]>
<script src= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
<! [endif]-->

CSS3 Media query Syntax：
/* @media screen and (min-width:1440px) and (max-width:1600px) {}*/
@media screen and (min-width:1440px) {/* greater than or equal to 1440*/
/* Here is a specific style sheet */
body,input,textarea,select,small,a{font-size:14px;}
}
@media screen and (max-width:1024px) {
/*Divcss8*/
}
@media screen and (max-width:768px) {
/* Specific style of responsive layout in device size less than 768px */
}
@media screen and (max-width:360px) {

}
@media screen and (max-width:320px) {

}
Read these several writing is not feel responsive layout so much, haha, is actually so simple.

don't worry, think about it as if there is less, such as on mobile, mobile phone to open this page, if you do a responsive layout, but also in the head area to add the following code:
<meta name= "viewport" content= "width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, User-scalable=no ">
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent"/>
<meta name= "format-detection" content= "Telephone=yes"/>
<meta name= "Msapplication-tap-highlight" content= "no"/>
If not very clear, just paste the past to use it.
Width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no probably means that the width of the Web page is device width, Scaling is 1 and does not allow user scaling operations,
The above header statement is the standard on the mobile phone side of the page.

DIVCSS8 that the response layout is best to do the simplest version first, and then expand into a complex version, so that the benefits of access on the phone can only be loaded into the simple version of JS and CSS files, and the PC-side widescreen will be loaded into the complex large JS and CSS files.

If you really want to do a responsive layout response to the phone side, the choice of font size is recommended for REM as a unit,
Settings are as follows:
html{font-size:62.5%;}
When using, if you want to set a 16px font size, the REM font size is 1.6rem,font-size:2em; = = font-size:20px;

/* Data URL */

1.http://mp.weixin.qq.com/s?__biz=mzawnji5mtyymw==&mid=404009356&idx=1&sn= E3218b95b78a5f043e7b0e3df49703d3&scene=23&srcid=0826ehwxmr3b9di8fbywolpa#rd

2.http://520ued.com/article/549125815f85b6b44ca20b2b

3.http://www.cnblogs.com/breakdown/p/4231708.html

4.http://www.codeceo.com/article/font-size-web-design.html

5.http://www.lao8.org/article_1380/xiangyingshi

6.http://www.jb51.net/web/475964.html

7.http://www.lao8.org/article_1380/xiangyingshi

Mobile End Project Summary ...