移动端开发案例（Bootstrap布局，响应式开发）

注意事项：
1.屏幕缩放发现中屏幕和大屏幕布局是一致的，因此我们列定义为col-md- 就可以了，md是大于等于970px以上的。
2.先布局PC端布局，最后根据实际需求在修改小屏幕和超小屏幕的特殊布局样式。
3.Bootstrap 的字体图标，默认加一个before，所以要设置字体图标样式，要用before设置

4.图片默认与文字的基线对齐，所以用 vertical-align:middle; 设置
5.盒子占50%，但是有空白缝隙，这个空白缝隙用内边距设置，里面的盒子100%

6.Bootstrap默认给了清除浮动的clearfix类
7.Bootstrap 有列的地方，一定有行，为了消除内边距
8.没有分列的地方，默认占所有所有

案例

大屏，中屏样式相同
pad屏不同
手机屏不同

    
    
    
    
    
    
    
    
    



    

        
        
        

            

                

                    
                        
                        阿里百秀
                    
                
                

                    

                        
生活馆
                        
自然汇
                        
科技潮
                        
奇趣事
                        
美食杰
                    
                
            
            

                
                

                    

                        

                            
                                
                                
阿里百秀
                            
                        
                        

                            
                                
                                
奇了 成都一小区护卫长得像马云 市民纷纷求合影
                            
                        
                        

                            
                                
                                
奇了 成都一小区护卫长得像马云 市民纷纷求合影
                            
                        
                        

                            
                                
                                
奇了 成都一小区护卫长得像马云 市民纷纷求合影
                            
                        
                        

                            
                                
                                
奇了 成都一小区护卫长得像马云 市民纷纷求合影
                            
                        
                    
                
                
                

                    

                        

                            
 警惕！这3种水果竟是胃病癌变的“催化剂”
                            
阿里百秀 发布于 2015-11-23
                            
一年四季水果不断，但多吃对身体也不好，有没有发现吃得胃有些不舒服？建议一些“老胃病”应该少吃三种果儿
                            
阅读(6741)赞 (124)标签：成都 / 长相 / 门卫 / 马云
                        
                        

                            
                        
                    
                    

                        

                            
 警惕！这3种水果竟是胃病癌变的“催化剂”
                            
阿里百秀 发布于 2015-11-23
                            
一年四季水果不断，但多吃对身体也不好，有没有发现吃得胃有些不舒服？建议一些“老胃病”应该少吃三种果儿
                            
阅读(6741)赞 (124)标签：成都 / 长相 / 门卫 / 马云
                        
                        

                            
                        
                    
                    

                        

                            
 警惕！这3种水果竟是胃病癌变的“催化剂”
                            
阿里百秀 发布于 2015-11-23
                            
一年四季水果不断，但多吃对身体也不好，有没有发现吃得胃有些不舒服？建议一些“老胃病”应该少吃三种果儿
                            
阅读(6741)赞 (124)标签：成都 / 长相 / 门卫 / 马云
                        
                        

                            
                        
                    
                
            
            

                
                    
                
                
                    热搜
                    
欢迎加入中国博客联盟
                    
一年四季水果不断，但多吃对身体也不好，有没有发现吃得胃有些不舒服？建议一些“老胃病”应该少吃三种果儿.一年四季水果不断，但多吃对身体也不好，有没有发现吃得胃有些不舒服？建议一些“老胃病”应该少吃三种果儿一年四季水果不断，但多吃对身体也不好，有没有发现吃得胃有些不舒服？建议一些“老胃病”应该少吃三种果儿.....
                
            
        
    

/* 修改container的最大宽度为1280 根据设计稿改de */

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: #666;
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

body {
    background-color: #f5f5f5;
}

.container {
    background-color: #fff;
}

@media screen and (min-width: 1280px) {
    .container {
        width: 1280px;
    }
}

header {
    /* 权重问题 */
    padding-left: 0!important;
}

.logo {
    background-color: #469DD2;
}

.logo img {
    display: block;
    /* width: 100%; */
    /* logo图片不需要缩放 */
    /* max-width: 100%; */
    margin: 0 auto;
}


/* 1.如果进入了超小屏幕下 logo里面的图片就隐藏起来 */


/* 事先准备好一个盒子 在logo里面，它平时是隐藏起来的，只有在超小屏幕下显示 */

.logo span {
    display: block;
    height: 50px;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    text-align: center;
}

.nav {
    background-color: #eee;
    border-bottom: 1px solid #ccc;
}

.nav a {
    display: block;
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    font-size: 16px;
}

.nav a:hover {
    background-color: #fff;
    color: #333;
}

.nav a::before {
    vertical-align: middle;
    padding-right: 5px;
}


/* 当进入小屏幕和超小屏幕的时候 nav里面的li浮动起来 且宽度为20% */


/* 响应式 要用媒体查询 */

@media screen and (max-width: 991px) {
    .nav li {
        float: left;
        width: 20%;
    }
    article {
        margin-top: 10px;
    }
}


/* 当进入超小屏幕的时候  文字变小 14px*/

@media screen and (max-width: 767px) {
    .nav li a {
        font-size: 14px;
        padding-left: 3px;
    }
    /* 当处于超小屏幕是 第一个li宽度为100% 剩下的各占50% */
    .news li:nth-child(1) {
        /* 权重不够时，可以直接用!important */
        width: 100%!important;
    }
    .news li {
        width: 50%!important;
    }
    .publish h3 {
        font-size: 14px;
    }
}

.news li:nth-child(1) {
    width: 50%;
    height: 266px;
    /* background-color: pink; */
}

.news li:nth-child(1) p {
    line-height: 41px;
    font-size: 20px;
    padding: 0 10px;
}


/* 当处于超小屏幕是 第一个li宽度为100% 剩下的各占50% */

.news li {
    float: left;
    width: 25%;
    height: 128px;
    padding-right: 10px;
    margin-bottom: 10px;
}

.news li a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    /* background-color: purple; */
}

.news li a img {
    width: 100%;
    height: 100%;
}

.news li a p {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 41px;
    padding: 5px 10px;
    margin-bottom: 0;
    background: rgba(0, 0, 0, .5);
    font-size: 12px;
    color: #fff;
}

.publish {
    border-top: 1px solid #ccc;
}

.publish .row {
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
}

.pic {
    margin-top: 10px;
}

.pic img {
    width: 100%;
}

.banner img {
    width: 100%;
}

.hot {
    display: block;
    /* height: 20px; */
    margin-top: 20px;
    border: 1px solid #ccc;
    padding: 0 20px 20px;
}

.hot p {
    font-size: 12px;
}

.hot span {
    height: 30px;
    line-height: 16px;
    border-radius: 0;
    margin-top: 10px;
    margin-bottom: 28px;
}