Mobile web--Adaptive Web Design (html/css control)-51cto.com

I. allow Web page width Auto-adjust: How does "adaptive Web Design" work?

It's not that hard actually. First, in the header of the page code, add a row of viewport meta tags.

 
   
  

  
    
   
< Meta   name="viewport"   content="width= Device-width, initial-scale=1 "   />  
 
   
  

Viewport is the default width and height of the page, which means that the page width defaults to the screen width (width=device-width), the original scale (initial-scale=1) is 1.0, that is, the initial size of the page occupies 100% of the screen area. For the viewport attribute, I was really in touch with mobile Web development is only encountered, a piece of PS layout is fixed 960px,1000px this.

The following three articles are detailed explanations of the Viewport attribute: Viewport (viewport concept)--pc-side understanding Viewport (viewport concept)--application of the mobile end viewport--viewport concept (RPM) for old-fashioned ie6,7,8 browsers, JS processing is required, Since the main platform is iOS and Android, all can be temporarily not considered

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, User-scalable=yes "/>

Add these words to the which
Width=device-width: Indicates width is the width of the device screen
initial-scale=1.0: Indicates the initial zoom ratio
minimum-scale=0.5: Represents the minimum zoom ratio
Maximum-scale=2.0: Represents the maximum zoom ratio
User-scalable=yes: Indicates whether the user can adjust the zoom ratio

If you want to open a webpage, it is automatically displayed at the original scale, and the user is not allowed to modify it:

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>

In this way, you can set the width of some of the images, such as header banners, to style= "width:100%", and the entire page looks like a full screen on the device.

Source: >
 

Two. do not use absolute width because the page adjusts the layout based on the width of the screen, you cannot use an absolute width layout, and you cannot use an element with an absolute width.

This is a very important article. Specifically, CSS code cannot specify pixel width: width:xxx px; Only percent width can be specified: width:xx%; Or: Width:auto; Development here refers to a Web page can not only be used in PS, but also for the mobile side, but for WebApp this still need to do a separate webapp use of the page.

For this point of knowledge, for my current project is useful, mainly for the control of the database to read the width of the image. See: Mobile WebApp's jquery mobile first use experience and solve image adaptive size problems

three. the relative size of the font font also cannot use absolute size (px), but only relative size (EM).

 
   
  

  
    
   
Body {font:normal 100% Helvetica, Arial, Sans-serif;}
 
   
  

The above code specifies that the font size is 100% of the default size of the page, which is 16 pixels.

 
   
  

  
    
   
h1 {font-size:1.5em;}
 
   
  

Then, the size of the H1 is 1.5 times times the default size, which is 24 pixels (24/16=1.5).

 
   
  

  
    
   
small {font-size:0.875em;}
 
   
  

The size of the small element is 0.875 times times the default size, which is 14 pixels (14/16=0.875).

four. flow layout (fluid grid) The meaning of "flow layout" is that the positions of each block are floating, not fixed.

 
   
  

  
    
   
. main {float:right; width:70%;}. leftbar {float:left; width:25%;}
 
   
  

The advantage of float is that if the width is too small to fit two elements, the following elements will automatically scroll to the bottom of the preceding element without overflow (overflow) horizontally, avoiding the appearance of the horizontal scroll bar. In addition, the use of absolute positioning (Position:absolute) should also be very careful.

Five. The core of "adaptive web Design" is the media query module introduced by CSS3. It 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"/>  
 
   
  

If the screen width is between 400 pixels to 600 pixels, the Smallscreen.css file is loaded. In addition to loading CSS files with HTML tags, you can also load them in an existing CSS file.

 
   
  

  
    
   
@import url ("tinyscreen.css") screen and (max-device-width:400px);
 
   
  

six. CSS @media rules in the same CSS file, you can also choose to apply different CSS rules depending on the screen resolution.

 
   
  

  
    
   
@media screen and (max-device-width:400px) {. column {float:none; width:auto;} #sidebar {display:none;}}
 
   
  

The above code means that if the screen width is less than 400 pixels, the column block is de-floating (float:none), Width auto-adjusting (Width:auto), and the sidebar block is not displayed (Display:none).

Seven. Image adaptation (fluid image) In addition to layout and text, adaptive web design must also implement automatic scaling of images. This is just one line of CSS code:

img {max-width:100%;} This line of code is also valid for most video embedded pages, so it can be written as:

IMG, object {max-width:100%;}

Older versions of IE do not support max-width,

So I had to write: img {width:100%;}

Additionally, image distortion may occur when the Windows platform scales pictures. At this point, you can try to use IE's proprietary commands:

 
   
  

  
    
   
img {-ms-interpolation-mode:bicubic;} or, Ethan Marcotte imgsizer.js. Addloadevent (function () {var  imgs  =  document. getElementById ("content"). getElementsByTagName ("img"); Imgsizer.collate (IMGs);  }); 
 
   
  

However, if there is a condition, it is best to load different resolution images depending on the screen of different sizes. There are many ways to do this, both server side and client can implement.

From for notes (Wiz)

Mobile web--Adaptive Web Design (html/css control)-51cto.com