zoukankan      html  css  js  c++  java
  • 移动端学习笔记(三)

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

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

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

    方法二:

    <style>
    @import url(01.css) (min-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/

  • 相关阅读:
    .NET Core 初次上手Swagger
    SQL server字符串分割成表-表分割为字符串
    C# DataTable、DataSet、List、相互转换
    .NET core Quartz 定时任务框架 demo
    SQL 乐色干货笔记
    .NET-异步操作
    .NET Core随笔把数据库数据查出来转JSON并输出
    ASP.NET Nlog上手练习小例子
    C# 数据类型
    获取Excel
  • 原文地址:https://www.cnblogs.com/bokebi520/p/7122547.html
Copyright © 2011-2022 走看看