css实现九宫格图片自适应布局

我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@media）或者js动态设置css，根据不同的手机屏幕宽度，适配不同手机，但是这样有个很大的缺点，那就是移动端的屏幕尺寸太多了，就得写很多代码，才能实现我们想要的效果。

今天突发奇想，使用了纯css实现了我想要的效果，下面就和大家来分享，上代码;

    
        
        
        
        
    
    
        

            
1
                    
            
2
                    
            
3
                    
            
4
                    
            
5
                    
            
6
                    
            
7
                    
            
8
                    
            
9
                    
        
    
    

　　里面包括了css的简单初始化，去除后，真正实现的代码没有几行。

如果我们放的是图片，那么就把span标签换成img标签，并且css给img加上width:100%;height:100%;就可以了

转载于:https://www.cnblogs.com/maomao93/p/7406249.html