响应式开发从原理到实战案例

其他 2018-05-13 16:32:45 阅读次数: 2

一、静态页面

这里写图片描述

/* index.html */

<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
    <meta charset="UTF-8">  
    <link href="index.css" type="text/css" rel="stylesheet"/>  
    <title>自定义响应式开发(静态页面)</title>  
</head>  
<body>  
<div id="main-container">  
    <div class="header-wrapper">  
        <div class="more-list fr">  
            <button id="btnMore">  
                <div class="i-line"></div>  
                <div class="i-line"></div>  
                <div class="i-line"></div>  
            </button>  
        </div>  
        <div class="nav-collapse">  
            <ul class="nav-list">  
                <li><a href="#">Bootstrap2中文文档</a></li>  
                <li><a href="#">Bootstrap3中文文档</a></li>  
                <li><a href="#">Bootstrap4中文文档</a></li>  
                <li><a href="#">Less 教程</a></li>  
                <li><a href="#">jQuery API</a></li>  
                <li><a href="#">网站实例</a></li>  
                <li><a href="#">看视频学前端</a></li>   
            </ul>  
        </div>  
    </div>  
</div>  
</body>  
</html>  
/* index.css */

body{  
    margin: 0;  
    padding:0;  
    font: normal 12px/12px "Microsoft YaHei";  
    background-color: #00ff00;  
}  
ul,li{  
    padding: 0;  
    margin: 0;  
    list-style: none;  
}  
#main-container .header-wrapper{  
    background-color: #3c3f41;  
    height:50px;  
    line-height: 50px;  
    position: relative;  
}  
.header-wrapper .nav-list li{  
    float: left;  
}  
.header-wrapper .nav-list {  
    background-color: #333;  
}  
.header-wrapper .nav-list li a{  
    display: block;  
    height:50px;  
    line-height: 50px;  
    padding: 0 18px 0 18px;  
    color: #9d9d9d;  
    text-decoration: none;  
    font-size:14px;  
}  
.header-wrapper .nav-list li a:hover{  
    background-color: #1c1c1c;  
}  
.header-wrapper .nav-list li.active{  
    background-color: #1c1c1c;  
}  
.fr{  
    float: right;  
}  
.more-list{  
    padding: 2px 0;  
}  
.more-list button{  
    display: none;  
    border: 1px solid #cccccc;  
    border-radius: 4px;  
    background-image: linear-gradient(rgb(21, 21, 21), rgb(4, 4, 4));  
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  
    padding: 1px 13px 1px 13px;  
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);  
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  
    outline: none;  
    width: 40px;  
    height:30px;  
}  
.i-line{  
    height:2px;  
    line-height: 2px;  
    width:100%;  
    background-color: #fff;  
    margin: 3px 0 3px 0;  
}

静态页面demo

二、响应式页面（传统方法）

传统方法需要分别设计样式（宽屏、窄屏各一套），如下：

宽屏设计的一套样式

/* index-large-screen.css */


.header-wrapper .nav-list li{  
    float: left;  
}  
.more-list button{  
    display: none;  
}

窄屏设计的一套样式

/* index-small-screen.css */ 


 .header-wrapper .nav-collapse{  
     position: relative;  
     top:40px;  
     background-color: #3c3f41;  
 }  
 .header-wrapper .nav-list li:not(:first-child){  
     margin-top: 1.2px;  
 }  
 .more-list button {  
     display:block;  
 }

效果图：
响应式页面（传统方法）demo

完整代码如下：

/* index.html */


<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
    <meta charset="UTF-8">  
    <title>响应式开发(传统方法)</title>
    <link type="text/css" href="index.css" rel="stylesheet"/>  
    <script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>  
<body>  
<div id="main-container">  
    <div class="header-wrapper">  
        <div class="more-list fr">  
            <button id="btnMore">  
                <div class="i-line"></div>  
                <div class="i-line"></div>  
                <div class="i-line"></div>  
            </button>  
        </div>  
        <div class="nav-collapse">  
            <ul class="nav-list"> 
                <li><a href="#">Bootstrap2中文文档</a></li>  
                <li><a href="#">Bootstrap3中文文档</a></li>  
                <li><a href="#">Bootstrap4中文文档</a></li>  
                <li><a href="#">Less 教程</a></li>  
                <li><a href="#">jQuery API</a></li>  
                <li><a href="#">网站实例</a></li>  
                <li><a href="#">看视频学前端</a></li>  
            </ul>  
        </div>  
    </div>  
</div> 

<script>
    var btnMore;  
    ;$(function () {  
        btnMore = $("#btnMore");  
        $(btnMore).click(function () {//按钮点击事件  
            $(".nav-collapse").toggle("slow", "linear");//菜单显示和隐藏之间切换  
        });  
        reSize_ChangeStyle();//调用大小调节的方法  
    });  


    //调节窗体的大小  
    function reSize_ChangeStyle() {  
        var lnk_Large = $("#lnk-large");//获取引用宽屏的样式  
        var lnk_Small = $("#lnk-small");//获取引用窄屏的样式  

        var innerWidth = $(this).innerWidth();//获取窗体的宽度  
        if (innerWidth > 992) { //宽屏的情况  
            if (lnk_Small.length > 0) {  
                lnk_Small.remove();//移除窄屏样式文件的引用  
            }  
            if (lnk_Large.length == 0) {//宽频文件不存在，则引入  
                $("head").append('<link id="lnk-large" href="index-large-screen.css" type="text/css" rel="stylesheet"/>');  
                $(btnMore).hide("slow");//隐藏更多按钮  
                $(".nav-collapse").show("slow"); //  
            }  
        } else {//窄屏处理  
            if (lnk_Large.length > 0) {//移除宽屏样式文件  
                lnk_Large.remove();
            }  
            if (lnk_Small.length <= 0) {//引入窄屏样式文件  
                $("head").append('<link id="lnk-small" href="index-small-screen.css" type="text/css" rel="stylesheet"/>');  
                $(btnMore).show("slow");
            }
        }  
    }  

    //窗体大小改变事件  
    $(this).resize(function () {  
        reSize_ChangeStyle()  
    });  

</script> 
</body>  
</html>  

/* index.css */



body{  
    margin: 0;  
    padding:0;  
    font: normal 12px/12px "Microsoft YaHei";  
    background-color: #00ff00;  
}  
ul,li{  
    padding: 0;  
    margin: 0;  
    list-style: none;  
}  
#main-container .header-wrapper{  
    background-color: #3c3f41;  
    height:50px;  
    line-height: 50px;  
    position: relative;  
}  
/*.header-wrapper .nav-list li{  
    float: left;  
}  */
.header-wrapper .nav-list{  
    background-color: #333;  
}  
.header-wrapper .nav-list li a{  
    display: block;  
    height:50px;  
    line-height: 50px;  
    padding: 0 18px 0 18px;  
    color: #9d9d9d;  
    text-decoration: none;  
    font-size:14px;  
}  
.header-wrapper .nav-list li a:hover{  
    background-color: #1c1c1c;  
}  
.header-wrapper .nav-list li.active{  
    background-color: #1c1c1c;  
}  
.fr{  
    float: right;  
}  
.more-list{  
    padding: 2px 0;  
}  
.more-list button{  
    display: none;  
    border: 1px solid #cccccc;  
    border-radius: 4px;  
    background-image: linear-gradient(rgb(21, 21, 21), rgb(4, 4, 4));  
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  
    padding: 1px 13px 1px 13px;  
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);  
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  
    outline: none;  
    width: 40px;  
    height:30px;  
}  
.i-line{  
    height:2px;  
    line-height: 2px;  
    width:100%;  
    background-color: #fff;  
    margin: 3px 0 3px 0;  
}

宽屏设计的一套样式

/* index-large-screen.css */


.header-wrapper .nav-list li{  
    float: left;  
}  
.more-list button{  
    display: none;  
}

窄屏设计的一套样式

/* index-small-screen.css */ 


 .header-wrapper .nav-collapse{  
     position: relative;  
     top:40px;  
     background-color: #3c3f41;  
 }  
 .header-wrapper .nav-list li:not(:first-child){  
     margin-top: 1.2px;  
 }  
 .more-list button {  
     display:block;  
 }

三、响应式页面（媒体查询）

响应式页面（媒体查询）demo

/* index.html */


<!DOCTYPE html>  
<html lang="zh-cn">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>自定义响应式开发(bootstrap方法)</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
</head>  
<body>  
<div id="main-container">  
    <div class="header-wrapper">  
        <div class="more-list fr">  
            <button id="btnMore">  
                <div class="i-line"></div>  
                <div class="i-line"></div>  
                <div class="i-line"></div>  
            </button>  
        </div>  
        <div class="nav-collapse">  
            <ul class="nav-list">  
                <li><a href="#">Bootstrap2中文文档</a></li>  
                <li><a href="#">Bootstrap3中文文档</a></li>  
                <li><a href="#">Bootstrap4中文文档</a></li>  
                <li><a href="#">Less 教程</a></li>  
                <li><a href="#">jQuery API</a></li>  
                <li><a href="#">网站实例</a></li>  
                <li><a href="#">看视频学前端</a></li>  
            </ul>  
        </div>  
    </div>  
</div> 
<script>
    var $btnMore;
    ;$(function () {
        $btnMore = $("#btnMore");
        $btnMore.click(function () {
            $(".nav-collapse").toggle("slow", "linear");
        });
        reSize_ChangeStyle();  
    });

    //调节窗体的大小  
    function reSize_ChangeStyle() {  
        var innerWidth = $(this).innerWidth();//获取窗体的宽度  
        if (innerWidth > 992) { //宽屏的情况    
            $(btnMore).hide("slow");  
            $(".nav-collapse").show("slow"); 
        } else {//窄屏处理  
            $(btnMore).show("slow");   
        }  
    }  

    // 窗体大小改变事件  
    $(this).resize(function () {  
        reSize_ChangeStyle();  
    });  


</script>
</body>  
</html>  
/* index.css */



    /*媒体查询，宽屏*/  
    @media screen and (min-width: 992px) {  
        .header-wrapper .nav-list li{  
            float: left;  
      }  
        .more-list button{  
            display: none;  
      }  
    }  

    /*媒体查询，窄屏*/  
    @media screen and (max-width: 992px) {  
        /*对展开列表定位、设置背景颜色*/  
        .header-wrapper .nav-collapse{  
            position: relative;  
            top:40px;  
            background-color: #3c3f41;  
        }  
        /*列表第一个元素除外列表上边距为1.2px*/  
        .header-wrapper .nav-list li:not(:first-child){  
            margin-top: 1.2px;
        }  
        .more-list button{  
            display:block;  
        }  
    } 


body{  
    margin: 0;  
    padding:0;  
    font: normal 12px/12px "Microsoft YaHei";  
    background-color: #00ff00;  
}  
ul,li{  
    padding: 0;  
    margin: 0;  
    list-style: none;  
}  
#main-container .header-wrapper{  
    background-color: #3c3f41;  
    height:50px;  
    line-height: 50px;  
    position: relative;  
}  
/*.header-wrapper .nav-list li{  
    float: left;  
}  */
.header-wrapper .nav-list{  
    background-color: #333;  
}  
.header-wrapper .nav-list li a{  
    display: block;  
    height:50px;  
    line-height: 50px;  
    padding: 0 18px 0 18px;  
    color: #9d9d9d;  
    text-decoration: none;  
    font-size:14px;  
}  
.header-wrapper .nav-list li a:hover{  
    background-color: #1c1c1c;  
}  
.header-wrapper .nav-list li.active{  
    background-color: #1c1c1c;  
}  
.fr{  
    float: right;  
}  
.more-list{  
    padding: 2px 0;  
}  
.more-list button{  
    display: none;  
    border: 1px solid #cccccc;  
    border-radius: 4px;  
    background-image: linear-gradient(rgb(21, 21, 21), rgb(4, 4, 4));  
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);  
    padding: 1px 13px 1px 13px;  
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);  
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);  
    outline: none;  
    width: 40px;  
    height:30px;  
}  
.i-line{  
    height:2px;  
    line-height: 2px;  
    width:100%;  
    background-color: #fff;  
    margin: 3px 0 3px 0;  
}

参考：
响应式开发从原理到实战案例（二）：制作没有响应式的静态页面
响应式开发从原理到实战案例（三）：静态页面转响应式页面
响应式开发从原理到实战案例（四）：媒体查询语法介绍
响应式开发从原理到实战案例（五）：使用媒体查询改进响应式页面

猜你喜欢

转载自blog.csdn.net/qq_25479327/article/details/80275937
今日推荐
富文本编辑器 Quill 2.0 重磅发布，特性、可靠性与开发者体验大幅提升
“开源信徒”周鸿祎开源360智脑大模型
周排行
Ubuntu 14.04 下Fuel6.0安装部署
香港一小巴侧翻致1死16伤 警方：未见机件故障
pikachu--XSS盲打
阅读 深入理解JVM虚拟机笔记一
java.sql.SQLException: ORA-00932: 数据类型不一致: 应为 -, 但却获得 CLOB
oracle delete all object under an user
[LeetCode]20 Valid Parentheses 有效的括号
树形DP求树的直径 【模板】
Context propagation over HTTP in Go
【PAT】（B）1053 住房空置率 (20)*
每日归档
更多
2024-04-18(0)
2024-04-17(5)
2024-04-16(70)
2024-04-15(42)
2024-04-14(0)
2024-04-13(119)
2024-04-12(38)
2024-04-11(14)
2024-04-10(68)
2024-04-09(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022