找回密码
当前位置：前端开发者 > CSS > 正文

前端开发自定义CSS实现响应式布局（栅格化）

2018-12-17 分类：CSS 阅读(951) 评论(0)
前端开发的流程图
web前端的整个开发流程
前端开发流程图

实现类似bootstrap的12栏的布局，当屏幕宽度大于768px时候与小于768px时候布局自动变化：

需要注意的地方是：必须要在外部div里头再定义别的元素来设置高度，颜色，内容这些属性，这里我用了span，当然也可以用div，不能直接写在控制宽度的外层div里头，不然会影响宽度。

代码如下：
html 代码

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta name=”viewport” content=”width=device-width, initial-scale=1″ />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            [class*=’col-‘] {
                float: left;
            }
            span {
                display: block;
                margin: 20px 10px;
                background-color: #eee;
                border: 1px solid #999;
                height: 48px;
            }
            @media (max-width: 768px) {
                /* 屏幕宽度大于768px时候 */
                .col-sm-1 {
                    width: 8.333333333%;
                }
                .col-sm-2 {
                    width: 16.66666667%;
                }
                .col-sm-3 {
                    width: 25%;
                }
                .col-sm-4 {
                    width: 33.33333333%;
                }
                .col-sm-5 {
                    width: 41.66666667%;
                }
                .col-sm-6 {
                    width: 50%;
                }
                .col-sm-7 {
                    width: 58.33333333%;
                }
                .col-sm-8 {
                    width: 66.66666667%;
                }
                .col-sm-9 {
                    width: 75%;
                }
                .col-sm-10 {
                    width: 83.33333333%;
                }
                .col-sm-11 {
                    width: 91.66666667%;
                }
                .col-sm-12 {
                    width: 100%;
                }
            }
            @media (min-width: 768px) {
                /* 屏幕宽度大于768px时候 */
                .col-md-1 {
                    width: 8.333333333%;
                }
                .col-md-2 {
                    width: 16.66666667%;
                }
                .col-md-3 {
                    width: 25%;
                }
                .col-md-4 {
                    width: 33.33333333%;
                }
                .col-md-5 {
                    width: 41.66666667%;
                }
                .col-md-6 {
                    width: 50%;
                }
                .col-md-7 {
                    width: 58.33333333%;
                }
                .col-md-8 {
                    width: 66.66666667%;
                }
                .col-md-9 {
                    width: 75%;
                }
                .col-md-10 {
                    width: 83.33333333%;
                }
                .col-md-11 {
                    width: 91.66666667%;
                }
                .col-md-12 {
                    width: 100%;
                }
            }
        </style>
    </head>
    <body>
        <!–
            元素border 和heigt color等属性需要一个单独的span元素来设定，不然会影响宽度
        –>
        <div class=”col-md-4 col-sm-6″><span></span></div>
        <div class=”col-md-4 col-sm-6″><span></span></div>
        <div class=”col-md-4 col-sm-12″><span></span></div>
        <div class=”col-md-3 col-sm-3″><span></span></div>
        <div class=”col-md-6 col-sm-6″><span></span></div>
        <div class=”col-md-3 col-sm-3″><span></span></div>
        <div class=”col-md-1 col-sm-2″><span></span></div>
        <div class=”col-md-1 col-sm-2″><span></span></div>
        <div class=”col-md-2 col-sm-8″><span></span></div>
        <div class=”col-md-2 col-sm-3″><span></span></div>
        <div class=”col-md-6 col-sm-3″><span></span></div>
    </body>
</html>
unity前端开发流程
小公司前端开发流程
前端开发的流程
赞(1)
前端开发者 » 前端开发自定义CSS实现响应式布局（栅格化）
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论