Responsive Webpage Design

Responsive page design reference material http://www.qianduan.net/responsive-web-design.html

The principle is to set different display styles based on different browser widths and pages.

Simulate using JS

 <!  Doctype html  > 
 <  Html  > 
 <  Head  > 
 <  Title  > CSS width </ Title  > 
 <  Style  Type  = "Text/CSS"  >  
. Divtest  {  
Border  :  Solid 2px gray  ; 
Width  :  300px  ;  
Height  :  200px  ;  
  }  
. W1200. divtest {  
Background-color  :  Red  ;  
  }  
. W900. divtest  {  
Background-color  : Black  ;  
  }  
. W400. divtest  {  
Background-color  :  Blue  ;  
 }  
. W300. divtest  {  
Background-color  :  # Eee  ;  
  }  
  </  Style > 
 <  Script  Type  = "Text/JavaScript"  >  
(  Function  (){
  VaR  W  =  Window. Screen. width;
 VaR  C  =   ''  ;
  If  (W  >  1200  ){
C  =   ' W1200  '  ;
}  Else   If  (W  >  900  ){
C  =   '  W900 '  ;
}  Else   If  (W  >  400  ){
C  =   '  W400  ' ;
}  Else  {
C  =   '  W300  '  ;
}
Document.doc umentelement. classname  + =  C;
})();
  </ Script  > 
 </  Head  > 
 <  Body  > 
 <  Form  ID  = "Form1"  Runat  = "Server"  > 
 < Div  > 
Width: <  Span  ID  = "Spanwidth"  > </  Span  > 
 <  Div  Class  = "Divtest"  > </  Div  > 
</  Div  > 
 </  Form  > 
 </  Body  > 
 </  Html  > 

Set different HTML classes based on different page widths and different styles based on different. w400 Div {color: red.