移动端学习笔记（三）

响应式媒体查询——媒体设备：

all 所有媒体
braille 盲文触觉设备
embossed 盲文打印机
print 手持设备
projection 打印预览
screen 彩屏设备
speech '听觉'类似的媒体类型
tty 不适用像素的设备
tv 电视

min-width: 当屏幕大小 大于等于 某个值的时候识别 max-width: 当屏幕大小 小于等于 某个值的时候识别 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #box{
                width:100px;
                height:100px;
                background-color:red;
            }
            @media all and (min-width: 500px) {
                #box{
                    background-color: green;
                }
            }
            
            @media all and (max-width: 500px) {
                #box{
                    background-color: yellow;
                }
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
</html>

屏幕水平和垂直（orientation:portrait | landscape）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            div{
                width:100px;
                height:100px;
                background-color:red;
            }
            @media (orientation:portrait) {
                div{
                    background-color: yellow;
                }
            }
            @media (orientation:landscape) {
                div{
                    background-color: green;
                }
            }
        </style>
    </head>
    <body>
        <!--
            @media (orientation:portrait)
                屏幕垂直
            @media (orientation:landscape）
　　　　　　 屏幕水平
 　　　　　　--> 

<div>1</div> </body> </html>

媒体查询样式引入方式：

方法一：

<link rel="stylesheet" href="01.css" media="all and (min-width:400px)"/>

方法二：

<style>
@import url(01.css) (min-width:400px);
    body{
        margin: 0;
    }
</style>

bootstrap：

container容器：

<!--
            容器：
                container
                    固定宽度
                
                container-fluid
                    百分比宽度
            
        -->
        <div class="container">container</div><br />
        <div class="container-fluid">container-fluid</div>

栅格系统对应的不同屏幕：

lg 大屏幕 大桌面显示器 (≥1200px)
md 中等屏幕 桌面显示器 (≥992px)
sm 小屏幕 平板 (≥768px)
xs 超小屏幕 手机 (<768px)

<div class="container-fluid">
            <div class="row">
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
                <div class="col-lg-1 col-md-2 col-sm-4 col-xs-12"></div>
            </div>
        </div>

col-md-offset-*设置列偏移

<div class="container-fluid">
            <div class="row">
                <div class="col-md-2 col-md-offset-1">1</div>
                <div class="col-md-2 col-md-offset-4">2</div>
            </div>
        </div>

更多关于bootstrap内容，参考官网：http://www.bootcss.com/

posted @ 2017-07-05 17:30  波克比520  阅读(142)  评论(0)  编辑  收藏  举报