Responsive Web Design Reading notes

1. Media queries can be used in link tab and specific CSS;

2. Use the media property of the <link> tag to specify the device type and other conditions for the style sheet to be separated by and and (), as follows

<link rel= "stylesheet" media= "screen and (orientation:portrait) and (min-width:     

3. Viewport width (width) screen width (device-width) The former refers to the width of the toolbar (the part that completely displays the content of the page), which refers to the width or resolution of the screen

4.-----------------the target element width ÷ the width of the context element = percent Width----------------------

The specific approach is to select a context element width, such as #content width=96% from the design map to get its width is 100px*96% 96px

Then the target element, such as NAV, whose width percentage is 20/96*100%

(The percentage is calculated by the context element, which is calculated by the parent element)--strictly taking the outer parcel of its first element width as 100%

5. The same em is all looking at the parent of the outer package to calculate

  #content H1 { 
  Font-family:arial,   Helvetica, Verdana, Sans-serif;   
  Text-transform:uppercase;  
  font-size:4.3125em;  
  /*   69÷16   */  #content H1 span {
 Display:block; 
 Line -height:1.052631579em; /*   40÷38  */   
  color: #757474;  
  font-size:. 550724638em; /*   38÷69  */
 }  

You can see that the text size of the <span> element (38 pixels) is relative to the text size (69 pixels) of its parent element. Its row height (40 pixels) is relative to its own text size (38 pixels).

6. In modern browsers (including IE 7+) It is very easy to zoom in on a picture as the flow layout is appropriate. Just make the following declaration in CSS:
img {max-width:100%;}
This allows the picture to be automatically scaled to match its container 100%.

That is, you can fill the picture of the Div, you need to give that div flow layout is actually width100% or you set 50% then you can put two just good, maxwidth is generally set the threshold value of the time used, Avoid the picture because the viewport is too big to be stretched too big;

7.h5 can write like this.

<a href= "index.html" > 
Very convenient
8.
Responsive Web Design Reading notes