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

前端开发的流程图
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前端开发流程
小公司前端开发流程
前端开发的流程
» 本文来自:前端开发者 » 《前端开发自定义CSS实现响应式布局(栅格化)》
» 本文链接地址:https://www.rokub.com/7133.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!