Summary of responsive layout Learning

Responsive layout is actually a combination of technologies. If you are familiar with html5, css3, and jquery, it is very easy to learn the responsive layout.

Responsive layout is nothing more than using the new features of css3 to adapt the page to different resolutions, such as 1024*768,800*600 in the computer, 320*480 in the mobile phone, and so on.

If we want to implement more complex functions, such as nav in bootstrap, we need to use jquery to implement related operations. When developing a responsive website, we can simply define our own styles and use bootstrap for complicated scenarios.

Css techniques used for responsive layout:

1. Percentage. When setting the style of an element, the percentage should be used instead of a fixed value, especially the scaling of the image. If necessary, you can set max-width. The formula for calculating the percentage is:

Target element width/context element width = percentage width

If the width is fixed

#wrap {    width:960px;}#header{    width:940px;    margin-left:10px;    margin-right:10px;}img{    max-width:100%;}

Html

Change to percentage Layout

#wrap {    width:96%;}#header{    margin-left:1.041666666%  /* 10/960 */    margin-right:1.041666666% /* 10/960 */    width:97.9166667%;  /*940/960*/}

2. Replace px with em. Em replacement px is mainly used for text scaling. Calculation formula:

Target element size/context element size = percentage size

For example

#wrap{    font-size:16px;}#content h1{    font-size:69px;}

The default font of the browser is 16px, so you can change it:

#wrap{    font-size:100%;}#content h1{    font-size:4.3125em;   /* 69 / 16 */}

3. Media Query. This is also the focus of responsive queries. The reason why pages can adapt to different forms sizes is also because of media queries. Media queries are easy to understand, that is, defining different styles under different forms. For example:

/* The maximum width of the form is 960. Execute */@ media screen and (max-width: 960px) {body {background-color: red;} h1 {font-size: 14px ;}}/* the maximum width of the form is 768. Execute */@ media screen and (max-width: 768px) {body {background-color: orange ;} h1 {font-size: 12px ;}/ * the maximum width of the form is 320 x/@ media screen and (max-width: 320px) {body {background-color: green;} h1 {font-size: 10px ;}}

If you want to reference a style, you can add

4. Responsive layout compatibility. Mobile browsers are compatible with responsive la S, and are supported by the latest browsers in computer browsers. It is not supported by browsers earlier than ie8, and upgrading is also troublesome. There are also some tips on the Internet to be compatible with the IE 8 browser, But I tested it. In ie8, there is a compromise. The reason is that the compromise is because some results are not supported, and ie6 and ie7 are basically not supported. In particular, what makes me angry is that ie8 is supported by compromise, and some effects in chrome are distorted. Well, the IE 8 browser should give up. After all, it is developed for mobile phone users.

The development of responsive layout is basically the above four points, and html5 is added. Html5 is used for page layout. If you need to add some special effects, you can use jQuery.