H5学习之 响应式布局

相应式布局主要是通过控制屏幕宽度来执行不同的css文件:

 @media screen and (min-width:1800px){   }       

 @media screen and (max-width:1800px){  }

 @media  screen and (max-width:991px) {    }

 @media  screen and (max-width:768px){    }

下面我写了一个简单的示例，通过调整浏览器（或手机屏幕尺寸）自动调整布局和背景颜色。

完整代码如下：

    
    
    
    
    
    



新闻头条


    

        
热议话题虎嗅热议：如何看待每到年终的巨额“奖励”，鼓励or噱头？
        
特朗普总统就职典礼的音乐会，有人演出，有人不来
        
郭台铭计划全球各处密集建厂，心急可吃不了热豆腐
        
我为什么特别讨厌贾跃亭？
        
发达社会的诅咒：香港互联网停滞的五年
        
一家卖香蕉的公司，赞助了10年东京马拉松
        
百度任命陆奇为集团总裁兼COO，这可能是李彦宏最正确的决定
        
三个人与共享单车的故事
    



    

        
热议话题虎嗅热议：如何看待每到年终的巨额“奖励”，鼓励or噱头？
        
特朗普总统就职典礼的音乐会，有人演出，有人不来
        
郭台铭计划全球各处密集建厂，心急可吃不了热豆腐
        
我为什么特别讨厌贾跃亭？
        
发达社会的诅咒：香港互联网停滞的五年
        
一家卖香蕉的公司，赞助了10年东京马拉松
        
百度任命陆奇为集团总裁兼COO，这可能是李彦宏最正确的决定
        
三个人与共享单车的故事
    

效果图:

：