Start from scratch Web-based mobile web (vi) Responsive layout

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go into the Web front-end learning adventure!

Page layout

Common page layouts are divided into the following four ways:

1, fixed width layout : Set a fixed width for the Web page, usually in PX as a unit of length, common in PC-side pages.

2. Flow layout : Set a relative width for the page, usually as a percentage of the length unit.

3. rasterize layout : The width of the page is artificially divided into equal lengths, and then the layout is measured in these equal lengths, usually using percentages as the length units to divide into equal lengths.

4, responsive layout : Through the detection of equipment information, determine the layout of the Web page, that is, if users use different devices to access the same Web page, you may see the content is not the same, under normal circumstances is to detect the width of the device screen to achieve.

Note: The above several layout methods do not exist independently, the actual development process is often used in conjunction with each other. "

1. Responsive layout

Responsive layout, designed to achieve different screen resolution on the terminal to browse the different ways to display the Web .

Responsive design enables websites to have a better browsing experience on mobile phones and tablets, such as:

As shown, the screen size is not the same as the page content displayed to the user, we can use the Media query to detect the size of the screen (the main detection width), and set different CSS styles, you can achieve a responsive layout.

2. The disadvantage of the response style layout

We use the responsive layout to meet the different size of the terminal equipment very perfect to display the Web content, so that the user experience has been greatly improved, but in order to achieve this goal we have to use the media query to write a lot of redundant code , so that the overall size of the page becomes larger, Applications on mobile devices can cause serious performance problems.

Responsive layouts are often used in corporate websites, blogs, news and information types , which are primarily browsed and have no complex interactions.

3, screen size of the division

In general, we will divide the common equipment size, and then determine the different size of the device design specific layout method, as shown in

type	Layout Width
Big screen	>= 1200px
Default	>= 980px
Plate	>= 768px
Phone to Tablet	<= 767px
Cell phone	<= 480px

4. Media Enquiry

Reference Link: http://www.runoob.com/cssref/css3-pr-mediaquery.html

With @media queries, you can define different styles for different media types.

@mediaYou can set different styles for different screen sizes, especially if you need to set up a design-responsive page, @media is very useful.

When you reset the browser size, the page will also re-render the page based on the browser's width and height.

CSS Syntax:

@media mediatype and|not|only (media feature) {    /*CSS-Code*/}/*或者引入不同样式文件的判断：当满足某个条件的时候，引入mystylesheet.css样式*/<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

MediaType value:

All for all devices

Print for printer and print preview

Screen is used for computer screens, tablets, smartphones, etc.

Speech for audible devices such as screen readers

And|not|only:

and meet at the same time, equivalent to &&;

Not negate (usually written in front of mediatype)

Example:

<style>  body{    background-color: red;  }  /* 不在768-992之间的时候，设置背景颜色为蓝色*/  @media not screen and (min-width: 768px) and (max-width: 992px){    body{      background-color: blue;    }}</style>

Media Feature value : (Focus on the following three widths)

Device-height defines the screen visibility height of the output device.

device-width defines the screen visible width of the output device.

Max-device-height defines the maximum height at which the output device's screen is visible.

Max-device-width defines the maximum visible width of the output device's screen.

Min-device-width defines the minimum visible width of the screen for the output device.

Min-device-height defines the minimum visible height of the screen for the output device.

Max-height defines the maximum visible area height of the page in the output device.

max-width defines the maximum visible area width of the page in the output device.

Min-height defines the minimum visible area height of the page in the output device.

min-width defines the minimum visible area width of the page in the output device.

4.1. The difference between Min-width and min-device-height

Device is represented by devices, so the range value of the device is represented by the width range of the devices.

• On the mobile side, the Min-width is the same as the min-device-height effect, because the width of the mobile device is changed by the simulator.
• On the PC side, if you change the width of the browser, and the width of our computer does not change, so the width of the device must be, the final effect is only one scope to function.

4.2, Case: Control different screen size under the screen background color,

<style>    .container{        width:1200px;        margin: 0 auto;        height:1200px;        background-color: red;    }    /*媒体查询：注意and后面空格的添加*/    /*iphone: w < 768px*/    @media screen and (max-width: 768px){        .container{            width:100%;            background-color: green;        }    }    /*pad: w >= 768  && w< 992*/    @media screen and (max-width: 992px) and (min-width: 768px) {        .container{            width:750px;            background-color: blue;        }    }    /*中等屏幕   w >= 992  && w<1200*/    @media screen and (max-width: 1200px) and (min-width: 992px) {        .container{            width:970px;            background-color: pink;        }    }</style>

4.3, the order of the media query condition judgment

Cause: If the structure is the example above, and the media query criteria overlap, the following media query style settings will overwrite the previous media query settings, in order to avoid this situation, we should follow certain rules, so that different media query conditions, the implementation of different styles, without conflict.

Characteristics:

Up compatibility: If you set a style with a width of more than a few hours, the default styles are also passed to a wider range of conditions.

Overlay down: A style that is wider in width overrides a style that is smaller than the previous width

Writing advice:

• If the minimum value (min-width) is judged, then the range should be small to uppercase
• If the maximum value (max-width) is determined, then the range should be from large to lowercase

For example:

@media screen and (min-width: 768px){  body{    background-color: green;  }}!*w:992!1200 blue  min-width: 992px:当屏幕的宽度大于等于992的时候*!@media screen and (min-width: 992px){  body{    background-color: blue;  }}!*w>1200 pink*!@media screen and (min-width: 1200px){  body{    background-color: pink;  }}