Mobile Web-responsive layout begins

tools to use:

• Firefox browser
• Sublime Text 2

Responsive layout Definition: 2010, Ethan Marcotte proposed, can view the original text;
Popularly speaking is: percent layout, according to different equipment display different layout; this time the main solution: traditional fixed image number (px) compared to:

• Different display devices, using different layouts. For example: PC screen, display 3 column, mobile phone, display as 1 columns, use media query (medium queries), its usage, for example:
• @media screen and (min-width:481px): minimum 481px, i.e. greater than 481px applicable;
• @media screen and (max-width:480px): maximum 480px, i.e. less than 480px applicable;
• @media print and (monochrome): Printer, black and white, applicable;
• Width using percentage, horizontal screen and vertical screen will automatically telescopic;

First look at the original material effect, the original material download: PC screen, 3 columns display as follows: Mobile phone screen, display: First look at the structure of the HTML: CSS corresponding to the use of fixed image number, which for the sake of simplicity, only focus on layout-related CSS: the implementation of the PC display 3 bar, mobile phone display 1 bar CSS:

. Header{background:URL (images/w.png) no-repeat;Height:200px;}. Navigation{Min-height:25px;}. Header,. Navigation,. Footer{Clear:both;}@media screen and (min-width:481px){body,. Header,. Navigation,. footer {width:960px;}. Column{margin:10px 10px 0 0;}. Navigation ul Li{width:320px;/*960/3*/}#visit{width:240px;float: Left;}#points{width:240px;float: Right;}#main{margin:10px 260px 0 250px;width:460px;}} @media screen and (max-width:480px){body,. Header,. Navigation,. footer {width:320px;}. Column{margin:10px 0;/*Red Split Line*/Border-bottom:1px dashed Red;}. Navigation ul Li{width:106.67px;/*320/3*/}#visit, #points, #main{width:320px;}}

The PC display effect has not changed, the mobile phone display effect, changed to 1 columns, vertical scrolling, this is the beginning of mobile web. The horizontal scroll bar appears because the picture is big. The final step, the width of the inside of the image to a percentage, and control the size of the picture does not support the big parent element:

. Header{background:URL (images/w.png) no-repeat;Height:200px;}. Navigation{Min-height:25px;}. Header,. Navigation,. Footer{Clear:both;}@media screen and (min-width:481px){body,. Header,. Navigation,. footer {width:100%;}. Column{margin:10px 1.042% 0 0;}. Navigation ul Li{width:33.33%;/*960/3*/}#visit{width:25%;float: Left;}#points{width:25%;float: Right;}#main{margin:10px 27.083% 0 26.042%;width:47.92%;}} @media screen and (max-width:480px){body,. Header,. Navigation,. footer {width:100%;}. Column{margin:10px 0;Border-bottom:1px dashed Red;}. Navigation ul Li{width:33.33%;/*320/3*/}#visit, #points, #main{width:100%;}}img, Object{Max-width:100%;}

Mobile phone horizontal Screen effect: Complete the full text!

Mobile Web-responsive layout begins