Mobile and PC-side, responsive design layouts

1. What is responsive Web design?

• Responsive Web design allows your Web page to display well on all devices.
• Responsive Web design uses only HTML and CSS.
• A responsive Web design is not a program or JavaScript script.

2. The role of responsiveness: Designing the best user experience

The friendly user experience is that Web pages can be displayed and manipulated on any device, including desktop devices, tablets, iphones and other mobile phones.

Web pages should automatically adjust the content based on the size of the device.

The design and development of the page is based on the user behavior and the device environment (System platform, screen size, screen orientation, etc.) corresponding response and adjustment is called Responsive Web design.

3. Adaptive design or responsive design approach

(1) Use @media, conditions (min-width:768px) to determine when the width of the browser is less than 768px value, change the style.

@media (min-width:768px) {  . main {    width:25%;    Float:left;}          }

selective loading of CSS via media queries means that the screen width is automatically detected and then the corresponding CSS file is loaded.

<link rel= "stylesheet" type= "text/css" media= "screen and (max-device-width:400px)" href= "Tinyscreen.css"/>

The code above means that if the screen width is less than 400 pixels (max-device-width:400px), the Tinyscreen.css file is loaded.

Link rel= "stylesheet" type= "text/css" media= "screen and (min-width:400px) and (max-device-width:600px)" href= " Smallscreen.css "/>

The code above means: If the screen width is between 400 pixels to 600 pixels, the Smallscreen.css file is loaded.

(2) Width use percent, use the absolute width as little as possible.

Because the page adjusts the layout based on the width of the screen, you cannot use an absolute width layout or an element with an absolute width. This is a very important article.

For example:

You cannot use CSS code:

Div{width:xxx px}

In response, you should use this:

div{    width:100%;    or    Width:auto;}

(3) Font setting relative size

The mobile font also cannot use absolute size (px), but only relative size (EM) or High definition (REM), REM is not limited to font size, the width of the front widths can also be used instead of percentages

body{    font:normal 100% Helvetica, Arial, sans-serif;//set font size to default size, 16 pixels}

To set the font size on the mobile side:

On the mobile side, set the font to 24PX, then the size of the 24/16=1.5,p is 1.5 times times the default size, which is 24 pixels (24/16=1.5).

P{FONT-SIZE:1.5EM}

(4) Flow layout (fluid grid)

The meaning of "flow layout" is that the positions of each block are floating, not fixed.

. leftdiv{    Float:left;    width:70%;}. rightdiv {    float:right;    width:25%;}

4. Specific understanding

On the Web page, write an ordinary page effect

<! DOCTYPE html>
Analog phone on the view of the style, the font is very small, because the computer according to the pixels on the font settings, the resolution is different.
Add the following code style:
<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1" >
 
 

  
  
 
   
Viewport: Generally refers to the size of the content area of the browser window, not including toolbars, tabs, and other content
 
   
Width: Browser width, page visible area widths in output devices
 
   
Device-width: Device resolution width, output device's screen visible width
 
   
Initial-scale: Initial zoom ratio
 
   
Maximum-scale: Maximum zoom ratio
 
  
 
 
　
Mobile and PC-side, responsive design layouts