响应式布局的两个例子

来源：互联网发布：js 定义私有方法编辑：程序博客网时间：2024/06/14 04:13

第一个例子–媒体查询

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style>            .a{                border: 1px solid #000000;                width: 100px;                height: 100px;                background-color: #000000;            }            @media only screen and (min-width: 300px) and (max-width: 640px) {                .a{                    background-color: red;                }            }            @media only screen and (min-width: 700px) {                .a{                    background-color: green;                }            }            @media only screen and (max-width:200px ) {                .a{                    background-color: blue;                }            }        </style>    </head>    <body>        <div class="a"></div>    </body></html>

第二个例子—-栅格系统

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width, initial-scale=1">        <title></title>        <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">        <style>            /*通配符选择器*/            [class*="col-"]{                border: 1px solid gray;            }            @media only screen and (max-width: 768px) {                #demo{                    display: none;                }            }        </style>    </head>    <body>        <div class="container-fluid">            <div class="row">                <div id="demo" class="col-lg-2 col-md-1 col-sm-1">左侧导航</div>                <div class="col-lg-8 col-md-11 col-sm-11 col-lg-offset-2">右侧内容</div>            </div>        </div>    </body></html>

阅读全文

0 0