响应式布局模板

效果图：

HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="keywords" content="关键词" />
    <meta name="description" content="描述" />
    <title>响应式布局</title>
    <link rel="stylesheet" href="style/style.css">
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <ul class="list bc clearfix">
        <li class="bg_blue">A</li>
        <li class="bg_green">B</li>
        <li class="bg_red">C</li>
        <li class="bg_yellow">D</li>
    </ul>
</body>
</html>

CSS 代码：

html {
    -webkit-text-size-adjust: none;
}

html, body, ul, li {
    margin: 0;
    padding: 0;
}
ul{ list-style: none;}

.bc{ margin-left: auto; margin-right: auto;}

/*清除浮动*/
.clearfix {
    zoom: 1;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.bg_blue{ background: blue;}
.bg_yellow{ background: yellow;}
.bg_red{ background: red;}
.bg_green{ background: green;}

.list {
    /*background: green;*/
    margin-top: 100px;
}

.list li {
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    /* xs 超小屏幕设备手机 */
    .list {
        padding: 20px;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    /* sm 小屏幕设备平板 */
    .list {
        padding: 20px;
    }
    .list li {
        float: left;
        width: 50%;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    /* md 中等屏幕设备桌面 */
    .list li {
        float: left;
        width: 25%;
    }
}
@media (min-width: 1200px) {
    /* lg 大屏幕设备桌面 */
    .list {
        width: 1200px;
    }
    .list li {
        float: left;
        width: 25%;
    }
}

涉及知识点：

1.媒体查询

　　参考资料：利用@media screen实现网页布局的自适应

2.respond.js 解决 IE9 以下浏览器不支持媒体查询

3.clearfix

4.Reset CSS

兼容浏览器：

IE7-10 、 Chrome 、火狐、Safari 、Opera

补充：

设置视窗宽度为浏览器宽度，并且禁止用户缩放

    <!--设置视窗宽度为浏览器宽度，并且禁止用户缩放-->
    <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" />

设置 body 子元素高度 100% 失效
解决办法：

html, body {
    height: 100%;
}

参考资料：css height 100% CSS成功设置DIV高度百分之百

设置统一盒子模型：

*, *:after, *:before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
*{zoom:1}

html5shiv：解决ie9以下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题。

respond：让不支持css3 Media Query的浏览器包括IE6-IE8等其他浏览器支持查询。

<!--[if lt IE 9]>
　　<script src="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>
 　 <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]—>

清除浮动

IE6、IE7不支持:after，需要添加 zoom:1 兼容代码

/*清除浮动*/
.clearfix:after {
    content: " ";
    display: block;
    clear: both;
    height: 0;
}

.clearfix {
    zoom: 1;
}

处理文字溢出　

/*ellipsis*/
.ellipsis {
    width:100%;
    display: block;;
    white-space: nowrap; /*文本不换行*/
    -o-text-overflow: ellipsis; /* Opera */
    text-overflow: ellipsis;
    overflow: hidden; /*不允许出现滚动条*/
}

弹性图片

/*弹性图片*/
.img-responsive{
    display: block;
    max-width: 100%;
    height: auto;
}

媒体查询

@media (max-width: 767px) {
    /* xs 超小屏幕设备手机 */
}
@media (min-width: 768px) and (max-width: 991px) {
    /* sm 小屏幕设备平板 */
}
@media (min-width: 992px) and (max-width: 1199px) {
    /* md 中等屏幕设备桌面 */
}
@media (min-width: 1200px) {
    /* lg 大屏幕设备桌面 */
}

posted @ 2017-06-01 21:57 linyongqin 阅读(266) 评论(0) 编辑收藏举报

刷新页面返回顶部

linyongqin

响应式布局模板

公告