8.34. Foundation Grid-medium Devic

发布时间 ： 2025-10-25 13:33:57 UTC      

Page Views: 9 views

In the last chapter, we introduced the use of small devices .small-* Class, with a grid ratio of 25% and 75%:

<div class="small-3 columns">....div> <div class="small-9 columns">....div>    
 The recommended ratio for medium-sized devices is 50% Placement 50%. 
 
  提示:  The screen size for medium-sized devices is defined in the   40.0625em   To   64.0624em   Between. 
 
 Used on medium-sized Devic   .medium-*   Class. 
 
 Now let’s add two columns to the medium-sized device: 
 
 
 
<div class="small-3 medium-6 columns">....div> <div class="small-9 medium-6 columns">....div>    
 以上实例设置了两个列，比例为 25% 和 75% (Foundation 是移动优先: 如果没有特别说明，在大型设备上会继承 .small 类的代码): 
 
 The proportion used on small devices is 25% and 75%. (   .small-3   And   .small-9   ). But the proportion used on medium-sized devices is 50% Universe 50%. (   .medium-6   And   .medium-6   ). 
 
 
  8.34.1.  Example  
 
 
 
<div class="row"> <div class="small-3 medium-6 columns" style="background-color:yellow;"> <p>菜鸟教程p> div> <div class="small-9 medium-6 columns" style="background-color:pink;"> <p>菜鸟教程p> div> div>    
  尝试一下 »  
 
 Note 
 
  注意:  Make sure the columns add up to 12 columns! 
 
 
 Used only on medium-sized Devic  
 
 In the following example, we specify   .medium-6   Class (not   .small-*   ). This indicates a ratio of 50% to 50% on medium or large equipment. However, it will stack horizontally (100% width) on small devices: 
 
  
 
  8.34.2.  Example  
 
 
 
<div class="row"> <div class="medium-6 columns" style="background-color:yellow;"> <p>菜鸟教程p> div> <div class="medium-6 columns" style="background-color:pink;"> <p>菜鸟教程p> div> div>    
  尝试一下 »  
   
                
                

                    

                        

                            
                                文章链接
                            
                            ：
                            8.34. Foundation Grid-medium Devic 
                        

                    

                

            
        
        

            

    
        
        

            

                

                    
                        
                            
                                Web框架 
                            
                            
                        
                             946
                        
                    
                    
                    
                        

                            
 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                《地理信息系统原理、技术与方法》 
                            
                            
                        
                             97
                        
                    
                    
                    
                        

                            
 
 
 最近几年来，地理信息系统无论是在理论上还是应用上都处在一个飞速发展的阶段。 GIS被应用于多个领域的建模和决策支持，如城市管理、区划、环境整治等等，地理信息成为信息时代重要的组成部分之一； “数字地球”概念的提出，更进一步推动了作为其技术支撑的GIS的发展。 与此同时，一些学者致力于相关的理论研究，如空间感知、空间数据误差、空间关系的形式化等等。 这恰好说明了地理信息系统作为应用技术和学科的两个方面，并且这两个方面构成了相互促进的发展过程。 
 
 

                        

                    
                

                
                

            

        
    
    
        
        

            

                

                    
                        
                            
                                WEB基础 
                            
                            
                        
                             289