PROMULGATOR

    沐枫自然

    上海市徐汇区漕河泾数据中心
    Html
    Css
    Js

    
                        


                        

                            


@charset "utf-8";
	* {
	margin:0;
	padding:0;
}
body {
	background:#ccc;
	font-family:arial;
	text-align:center;
	color:white;
	line-height:200px;
}
div {
	height:200px;
	float:left;
}
/*当屏幕宽度大于980px时 */
@media (min-width:980px) {
	div {
	width:22.5%;
	margin-left:2%;
	background:blue;
	font-size:.5rem;
	margin-top:2%;
}
}/*当屏幕宽度小于980px 并且 大于640px时 */
@media  (max-width:980px) and (min-width:640px) {
	div {
	width:47%;
	margin-left:2%;
	margin-top:2%;
	background:green;
	font-size:1rem;
}
}/*当屏幕宽度小于640px时 */
@media (max-width:640px) {
	div {
	width:96%;
	margin:2%;
	background:red;
	float:none;
	font-size:1.5rem;
}
}

                        

                        



                        

                   

                    
                   

                       
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

                       
 
  立即下载    

                       

                   


                

                


                

                     
 
                         

                            
CSS3 响应适布局 @media用法

                            

                                
	
                                      
                                                                      
                                    
                                    	
                                                                                                  	                             
                                    
                                                                       
                                

                            

                            

                        

                          

                             
                          

                         

                             
                             
使用说明：
1、CSS3响应适布局 @media用法, 响应适, 自适应。
2、拖动改变浏览器窗口大小看效果。
3、最适用于移动端的布局。
4、宽度可根据需求调整，当@media中的宽度条件满足时则该条件下的样式生效，否则反之！
5、字体大小变化（不只是用于设置字体大小，还可以用于设置元素的宽、高、定位等）：字体大小单位是rem，是根据js中监听浏览器窗口大小的方法，去改变字体大小的。
注：（js代码中，是以移动端常见的宽度 750px 为标准，进行缩放的。可以根据自己的需要进行调整）。
6、当用rem单位，作为设置元素的宽、高、定位、字体大小等样式时，根据PSD设计稿中的px单位进行 缩小10倍 即可。
例如：
当PSD稿中一个按扭的宽度为：120px; 高度为：56px; 左外边距为：8px; 字体大小为：16px。
用rem单位写法：
button{ width: 12rem; height: 5.6rem; margin-left: 0.8rem; font-size: 1.6rem;}

                         

                     

                   
                


                
6



  
    
      
    
    

     

            
    
              
    
              
      
                
       神已归来0
      
                
       2017/9/2 21:37:09
      
                
      
              
    
              
      
                是不是可以适用于所有的网页自适应效果，不用每个模块去单独设置自适应了是吧？
                
                回复
                
      
                
      
              
    
            
    



  
                   
         
         

            
    
              
    
              
      
                
       少昊sh0
      
                
       2017/8/18 14:24:04
      
                
      
              
    
              
      
                
      PSD稿中所有的像素都是除以10，来换算成rem么
      
                
                        
        
                          
        
                              
        
                               
          
                                   
           沐枫自然1
          
                                   
           2017/8/21 11:53:59
          
                                   
          
  						        
        
                               
          
                                  
          @少昊sh:
          是的，不管是宽度width、高度height、外边距margin、内边距padding、定位position、字体大小等都是一样的，（注：前提是根据PSD稿中的总宽度如：常用的iphone6 750px, iphone5 640px）,在js代码中设置对应的缩放比例：
          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          
                                
        
                           
        
                        
      
                    
                        
        
                          
        
                              
        
                               
          
                                   
           少昊sh0
          
                                   
           2017/8/21 19:51:44
          
                                   
          
  						        
        
                               
          
                                  我的要除以100才可以
                                
        
                           
        
                        
      
                    
                回复
                
      
                
      
              
    
            
    



  
                   
         
         

            
    
              
    
              
      
                
       古城深巷旧少年0
      
                
       2017/8/17 9:00:36
      
                
      
              
    
              
      
                
      如果设计稿是640的呢？是不是设计稿宽度不管多少，只需把js部分的750替换就行？rem仍然是除以10？根元素应该设为多少px？坐等大神耐心解答！
      
                
                        
        
                          
        
                              
        
                               
          
                                   
           沐枫自然1
          
                                   
           2017/8/17 21:43:56
          
                                   
          
  						        
        
                               
          
                                  
          @古城深巷旧少年:
          和之前写法完全一样，而单位rem仍然是缩小10倍，注：把上面js代码中 第10行 //移动端缩放比例关系，之前代码：
          docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
          现在改为：
          docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
          就可以了，没啥区别的。
          
                                
        
                           
        
                        
      
                    
                回复