The practical summary course of response Web layout design

The concept of responsive web design is: page design and development should be based on user behavior and equipment environment (including system platform, screen size, screen orientation, etc.) to respond and adjust accordingly. The practical way is composed of many aspects, including elastic grid and layout, picture, CSS Media (media query) use, etc.

One: The layout method has the following several kinds:

1. Fixed layout: The fixed layout to PX (pixel) as the unit, in the PC, the design manuscript how many px to write how many px, the previous years are this layout, the common is to 960px or 1000px to design, but this design has the following disadvantages:

1.1. The page is very rigid, on the larger screen, the page left and right 2 sides white.
1.2. Not adaptable to responsive layouts.

2. Flow layout: Flow layout is in percent as the unit, we have to keep in mind the following formula:

Percent width = target element width/context element width

This layout benefits: You can adapt the layout to display different widths depending on the resolution.

Cons: The high or margintop look too high on the big screen and look too narrow under the small screen.

3 Elastic layout: The elastic layout is based on EM, and the same elastic layout supports the following formula:

Percent size = target element dimension/context element size

Using EM to convert text pixel px to relative units, now the browser default text size is 16px, if a text size is 48px, context element is (browser), then convert to em is 48/16 = 3em. However, if the font-size of a H1 label is 48px, the H1 label internal span label font-size is 24PX, then H1 the font-size of the label = 48/16 = 3em H1 span {font-size = 24/48 =0.5em Flexible layouts also support responsive web design.

Second: media enquiries:

Query for various attribute values, such as the width of the device, based on the specific environment, and whether to render it horizontally using a different CSS style.

Media queries use the following: for example, inline styles can be written as follows:

1. Maximum width 960px a layout:

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

2. Minimum width 600px another layout:

@media screen and (min-width:600px) {}

3. Width between 600px to 960px, as follows:

@media screen (min-width:600px) and (max-width:960px) {}

The outreach style uses the link label to refer to the style:

<link rel= "stylesheet" href= "xx1.css" media= "screen and (max-width:960px)"/>
<link rel= "stylesheet" href= "xx1.css" media= "screen and (min-width:600px)"/>
<link rel= "stylesheet" href= "xx1.css" media= "screen and (min-width:600px) and (max-width): 960px"/>

If for an ipad, we can add a property orientation (landscape or portrait) horizontal or vertical screen.

Understand the meaning of meta properties:

To do H5 page mobile end development needs to introduce the following sentence in the head tag. (if not introduced, the font size of the page is not normal).

<meta name= "viewport" content= "Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

The specific meaning is as follows:

Width: Controls the size of the viewport. such as Device-width is the width of the device.
Height: corresponds to width, specifying height.
Initial-scale: Initial scaling ratio, the scale of the page when it is first loaded.
Maximum-scale allows the user to zoom to the maximum scale, ranging from 0 to 10.0
Minimum-scale: Allows the user to zoom to the minimum scale, ranging from 0 to 10.0
User-scalable: Whether the user can scale manually, the value can be:

1, Yes,true allows users to zoom;

2, no, false does not allow the user to scale. (Only set this property, some browsers do not take effect, we need to cooperate with Maxinum-scale and Mininum-scale maximum zoom and minimum scaling are 1:1 respectively).

Synthesis: Streaming layouts and flexible layouts and matching media queries are the best way to respond to a layout.

However, there are disadvantages to using media queries for responsive web layouts, with the following disadvantages:

For designers: Design different designs for different screen sizes (such as three-column design under Widescreen, two-column design under normal screen, and single-column design on mobile devices). For the front end for different screens to write different styles, increased workload, while maintenance is not very convenient (to maintain several different CSS).

Three: Picture

1. For background images, CSS3 has a property background-size can scale the background picture proportionally.

But for small-screen mobile devices to load large background pictures, there are shortcomings, the main disadvantage is to have greater bandwidth, waste of traffic. So if we want to do better, we can use media queries to render background pictures of different sizes based on the width of the device.

2. For the label picture on the page:

2.1. If only the static picture on the page, regardless of bandwidth, you can use the width= "100%" proportional scaling, such as:
2.2. If it is a commodity map or a number of pages on the page, consider not wasting unnecessary bandwidth, the need for the background according to the different width of the device to return the different JSON data of the picture to give us the front end, and then we use JS Dynamic rendering out.

In modern browsers (including ie7+) to achieve a picture with the flow layout of the corresponding scaling is very simple, just add a code in the CSS:

img {max-width:100%;}

The meaning is: Make sure that the maximum width of the picture does not exceed the width of the browser's window or the visible part of its container, so when the visual portion of the window or container narrows, the maximum width of the picture will be smaller, and the picture itself will never overwrite the container.

Four: Understand the difference of CSS unit Px,em,rem:

1. PX is the most basic of the length of the CSS unit, in the PC side, the design of the manuscript how many pixels, CSS on the page to write how many pixels.

2. Em is the relative unit, relative to the context element, in general, the browser default font size is 16px, that is, 1em equals 16px;

If a text size is 48px, the context element is (browser), then the conversion to EM is 48/16 = 3em. However, if the font-size of a H1 label is 48px, the H1 tag internal span label font-size is 24PX, then H1 the font-size of the label = 48/16 = 3em H1 span {font-size = 24/48 = 0.5em}.

3. REM is also a relative unit. REM is computed relative to the HTML root element, which means that as long as the reference value is set at the root node, the entire 1rem is equal, calculated in the same way as EM, default 1rem=16px; Similarly you can set HTML {font-size:62.5%} so 1rem is equal to 10px, etc.

For example, the HTML root element is set to the following code:

HTML {font-size:62.5%;/*10÷16x100% = 62.5%*/}

When a P element is 24px, it is converted to REM as a unit, so you only need to write as follows:

p {Font-size:2.4rem/*2.4x10px = 24px */}

Five: element unknown width centered.

Let's first introduce the unknown width, the element centered method, for responsive web design is helpful, we can come to understand.

The first method:

If the page HTML structure is as follows:

<div><p>what is css?</p></div>

You only need to set the text alignment to the parent element div to be center-aligned. Child element set Display:inline-block can be. The following code:

Iv{text-align:center}
P{display:inline-block}

The second method is as follows:

div{position:relative; left:50%; float:left;}
p{position:relative; left:-50%;}

Six: Media query standard wording:

@media device type and (device attributes) {
CSS Styles
}

10 types of devices have been defined in css2.1, respectively, as follows:

Value meaning that can be specified
All equipment
Screen computer monitor
Print print paper or Printing preview view
Handled portable devices
TV TV type of device
Speech voice and audio synthesizer
Braille Tactile feedback device for Braille blind
Embossed Blind Printer
Projection various projection equipment
TTY uses a medium with a fixed density letter grid, such as a telex typewriter and a terminal

There are 13 CSS device features, a collection similar to CSS properties. Unlike CSS properties, however, the specified values for most device attributes accept the Min/max prefix, which is used to represent logic greater than or equal to or less than, to avoid using < and > these characters.

Device characteristics are as follows:

Attribute can specify whether a value is allowed using the Min/max prefix attribute description
Width with unit length values allow browser window widths
Height with unit length values allow browser window heights
Device-width length value of unit to allow width of device screen resolution
Device-height the length of the unit with the value of the height of the device screen resolution
Orientation can only specify two values: Portrait or landscape does not allow the window to be in portrait or landscape orientation,
Aspect-ratio proportional values, such as: 16/9 allow the aspect ratio of the window, proportional to the browser window width value/height value
Device-aspect-ratio proportional values, such as: 16/9 allow the device screen resolution of the aspect ratio, the proportional value of the device screen resolution width/Height value
The color integer value allows the device to use the number of bits of the colour value, if it is not a color device, the value is 0
Color-index integer values allow the number of colors in a color table
Monochrome integer value allows the number of bytes per pixel in monochrome frame buffers
Resolution resolution values, such as 300dpi to allow device resolution
Scan can only specify two values: Progressive or interlace do not allow scanning of TV type devices, progressive for progressive scans, interlace for interlaced scans
Grid can only specify two values: 0 or 1 does not allow the device to be raster based or bitmap based. The value is 1 based on the grid, or the value is 0

There are some basic points of response web design, and we can explain how the response web design is practiced in detail below.

1. First you need to introduce this line of meta code into the header of the page, as follows:

<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1, user-scalable=0"/>

It means I do not say here, if you do not understand, you can see the above mentioned unrivaled that blog very detailed.

This sentence should also be introduced:

<meta content= "Telephone=no,email=no" name= "Format-detection"/>

Our code has a number similar to the phone, because on some phones it will automatically switch to call, so we add this sentence will not be.

For example, my page is introduced as follows:

2. Responsive Web design requires the use of CSS3 media to write different CSS styles. In the mobile browser or in some desktop browsers, the Window object has a Devicepixelratio attribute, which is officially defined as the physical pixel of the device and the device's independent pixel ratio column, which is the Devicepixelratio = physical pixel of the device/ Independent pixel of the device. These three parameters are not fixed, as long as 2 of them are OK, then you can know the third parameter, the physical pixel of the device we can map to the width of the resolution of the device, independent pixel we can map to the width of media query definition. And Bille Devicepixelratio We can understand how many physical pixels the 1 pixel (px) in the CSS occupies on the device. For example, our current common mobile phone resolution is as follows:

Mobile Type: Resolution
Millet 3 1080*1920
Millet 2 720*1280
Red Rice Note 720*1280
The Phantom of the 4 1152*1920
The Phantom of the 3 1080*1800
The Phantom of the 2 800*1280
Iphone6 750*1334
IPhone5S 640*1136
Iphone4s 480*800
Iphone3s 320*480
Samsung 720*1280
Samsung 480*800

such as on the Millet 3 resolution of 1080, independent pixel for 360px, then the ratio listed as 3, that is, a CSS 1px, occupy 3 physical pixels, millet 2 and Red Meter Note resolution of 720, independent pixel or 360px, so compared to column 2, So millet 3 relative to millet 2 and red meter note clearer. The same applies to iphone and other types of phones.

And the above independent pixel is 360px, it is our CSS in the media query associated.

As follows we can add such a media query to the CSS can be matched to the style of the following:

/* The width of the screen for the mobile phone screen is 360 384 width

*width (width can be set to 384px) max-width:384 to calculate the margin font size, etc. or install 360px to calculate

*****************************************/

@media (min-width:360px) and (max-width:399px) {}

And our current independent pixel has 320,400, we can also increase the CSS media query. As follows:

/* min-width:320px

* CSS for device independent pixel 320px

* 320-639 Common styles between min-width:320 and max-width:639 are also included inside

============================*/

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

/*

* for device independent pixel 400px

========================*/

@media (min-width:400px) and (max-width:401px) {}

But there are also some unknown independent pixels, such as the future at some point more than 640px of independent pixels, or that our mobile phone to the vertical screen, we can also do a little match for adaptation. We do a match for 640px-999px as follows.

/* min-width:640px

* CSS for device independent pixel 640px

* Between min-width:640 and max-width:999

============================*/

@media (min-width:640px) and (max-width:999px) {}

But on the PC side, we have to adapt to the PC side, so for the width of more than 1000 also do a display processing.

/* min Width 1000 style

* In order to adapt to the PC side, so the PC end in design time by default 1000px to design

=======================*/

@media screen and (min-width:1000px) {}

We all know that under the ie6-8 IE is not supported in the media query CSS3, so Daniel has helped us to consider this problem online, so only need to download the online respond.js down to our local, and then the page can be introduced. Respond.js's github address is as follows:

https://github.com/scottjehl/Respond/

Through the above: we can write a CSS responsive web design has a specification, as follows: (Of course, if you have a better method can also be proposed.) )

1. Head Reset.css whether to separate out a CSS file, or not independent out directly on the top of the CSS.

2. The common head or tail style is placed directly at the top of the CSS file, and the common page CSS style is placed at the top (add a comment.) )

3. Media query CSS styles are organized as follows:

1. The mobile side development CSS Media Query code is organized as follows:

/* min-width:320px
* CSS for independent pixel 320px
=======================================================================================================*/
@media (min-width:320px) and (max-width:639px) {
/* CSS style*/
}

/* The width for independent pixels is 360 384, etc.
* max-width:384 to calculate, but margin font size, etc. or install 360px to calculate
*****************************************/
@media (min-width:360px) and (max-width:399px) {
/* CSS style*/
}

/* for independent pixel 400px
=======================================================================================================*/
@media (min-width:400px) {
/* CSS style*/
}

/* for independent pixels greater than 640 of less than 999 of
=======================================================================================================*/
@media (min-width:640px) and (max-width:999) {
/* CSS style*/
}

2. Over 1000 of the media queries on the PC end are written in the following:
@media screen and (min-width:1000px) {
/* CSS style*/
}

4. The basic code specification notes are as follows:

1. Defines the relative units (REM) of the HTML root element font size as follows:

HTML {font-size:62.5%;/*10÷16x100% = 62.5%*/}

The following element font uses REM as the unit. For example, H2 font size is 24px, then the font size on the mobile side set to Font-size:2.4rem in the media query @media (min-width:1000) {} font size you want to write 2, font-size:24px;font-size : 2.4rem, this is for future mobile device independent pixel over 1000 can use REM as unit.

2. According to the design draft to the BODY element to set the default font-size and color, after the media query according to their own conditions need to cover font-size and color of the words will cover off.

3. In the corresponding device media query, there are many common CSS styles that you want to merge, such as:

. Six-qa Li. Q{line-height:26px;font-size:1.6rem;
. Six-qa Li. A{line-height:26px;font-size:1.6rem;

Can be merged directly into the following:

. six-qa Li Q,.six-qa li A{line-height:26px;font-size:1.6rem;

Write a responsive web design CSS media query better thinking?

We all know that in order to adapt to all kinds of equipment, we need to write different CSS for adaptation, such as width, margin, inner margin, font size, etc., need different adaptation, then we can now write a CSS, such as I write a target: Independent pixel of 400 screen width Write a CSS style, and then other styles, such as 320, 384, 360 or more than 640, for these CSS styles, we can use the Nodejs from the move to read 400 CSS, and then separately on the above independent pixel size of the screen, For example screen 400 pixel font-size:24px so 320px screen font size is font-size = Math.floor (320*24/400), other CSS properties are done in this way, then the local can generate a different version of CSS ( For example, for the 320 version, for more than 640 CSS versions, and then introduce different CSS versions in the head header, such as the following introduction:

<link rel= "stylesheet" href= "320.css" media= "All and (min-width:320px) and (max-width:321px)"/>
<link rel= "stylesheet" href= "360.css" media= "All and (min-width:360px) and (max-width:399px)"/>
<link rel= "stylesheet" href= "400.css" media= "All and (min-width:400px) and (max-width:401px)"/>
<link rel= "stylesheet" href= "640.css" media= "All and (min-width:640px) and (max-width:999px)"/>
<link rel= "stylesheet" href= "1000.css" media= "All and (min-width:1000px)"/>

We know that as long as the width of the device in any one of the above will only render a CSS, other CSS does not render, so we can follow this way to do a CSS. As for this scheme, I will use Nodejs to do it later.