27
2017
09

响应式布局的两个例子

第一个例子–媒体查询

<!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>
上一篇:表单验证 下一篇:Android MagicaSakura多主题框架