响应式布局初体验

最新推荐文章于 2020-12-22 10:16:26 发布

蛋糕老板

最新推荐文章于 2020-12-22 10:16:26 发布

阅读量474

点赞数 2

分类专栏：学习笔记文章标签：响应式布局

本文链接：https://blog.csdn.net/yzcforit/article/details/73433654

版权

学习笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

响应式布局初体验

1.兼容移动端

 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

2.媒体查询

    <style type="text/css">
         /*这里是兼容PC端的显示界面*/   
        @media only screen and (min-width: 768px) {
            body{
                background: red;
            }

        }
        /*这里是兼容移动端的显示*/     
        @media only screen and (min-width: 320px )and (max-width:768px)  {
            body{
                background: #ddd;
            }

        }
    </style>

3.简单样例


    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <title></title>
        <!--兼容移动端-->
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            @media only screen and (min-width: 768px) {
                header {
                    height: 40px;
                    width: 1008px;
                    border-radius: 5px 5px 0px 0px;
                    margin: 0 auto;
                    background: #000;
                }
                header ul {
                    list-style: none;
                }
                header ul li {
                    float: left;
                    color: #fff;
                    height: 40px;
                    line-height: 40px;
                    width: 100px;
                    text-align: center;
                }
                .top{
                    display: none;
                }
            }

            @media only screen and (min-width: 100px)and (max-width:768px) {
                header{
                    height: 40px;
                    width: 100%;
                }
                header ul {
                    list-style: none;
                    display: block;
                }
                header ul li {
                    height: 40px;
                    line-height: 40px;
                    display: block;
                    text-indent: 20px;
                }
                header ul li:hover{
                    background: #CCCCCC;
                }
                .top{
                    display: block;
                        height: 40px;
                    border-bottom: 2px solid #ccc;
                }
                .logo{
                    float: left;
                    font-family: "微软雅黑";
                    line-height: 40px;
                }
                .navbar{
                    width: 40px;
                    height: 40px;
                    float: right;   
                    margin-top: 10px;           
                }
                .navbar span{
                    display: block;
                    width: 20px;
                    height: 6px;
                    border-bottom:1px solid #000 ;
                }
            }
            /*媒体查询*/
            /*@media only screen and (min-width: 768px) {
                body{
                    background: red;
                }

            }

            @media only screen and (min-width: 320px )and (max-width:767px)  {
                body{
                    background: #ddd;
                }

            }*/
        </style>
    </head>

    <body>
        <div id="top">
            <header>
                <div class="top">
                    <div class="logo">
                        公司网站
                    </div>
                    <div class="navbar">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <ul>
                    <li>首页</li>
                    <li>关于我们</li>
                    <li>产品中心</li>
                    <li>新闻资讯</li>
                    <li>招聘</li>
                    <li>联系我们</li>
                </ul>
            </header>
        </div>

    </body>

    </html>

4.使用css外部链接方式

    <link rel="stylesheet" type="text/css" href="css/index_pc.css" media="only screen and (min-width:768px)" />
    <link rel="stylesheet" type="text/css" href="css/index_phone.css" media="only screen and (min-width:100px) and (max-width:767px)" />

蛋糕老板

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
响应式布局初体验

响应式布局初体验1.兼容移动端 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />2.媒体查询 <style type="text/css"> /*这里是兼容PC端的显示界面*/
复制链接

扫一扫

专栏目录