Mobile Web

Tools used:

FireFox browser

Sublime Text 2

Responsive layout definition:

In 2010, Ethan Marcotte proposed, you can view the original text;

In layman’s terms: percentage layout, different layouts are displayed according to different devices;

The main solution this time: traditional fixed Compared with the number of pixels (px):

Different display devices use different layouts. For example: PC screen displays 3 columns; mobile phone displays 1 column; media query is used, its usage, for example:

@media screen and (min-width: 481px): screen Minimum 481px, that is, it is applicable if it is greater than 481px;

@media screen and (max-width: 480px): The maximum screen is 480px, that is, it is applicable if it is less than 480px;

@media print and (monochrome): printer , black and white, applicable;

Use percentage for width, horizontal and vertical screens will automatically expand and contract;

Let’s take a look at the effect of the original material first, download the original material:

PC screen, the 3 columns are displayed as follows:

Mobile phone screen, the display is incomplete:

Let’s first look at the structure of html:

The fixed number of images is used in CSS. For the sake of simplicity, we only focus on layout-related CSS:

CSS to realize that PC displays 3 columns and mobile phone displays 1 column:

.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;/*红色分割线*/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 has changed to 1 column with vertical scrolling. This is the beginning of the mobile Web.

A horizontal scroll bar appears here because the image is stretched.

The last step is to convert the width pixel inside to a percentage, and control the size of the image so that it does not expand the 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:

The full text is over!