• 响应式布局


    一、自定义:

      自定义响应式布局主要是媒体查询,通过设置@media来实现响应式布局;

       语法结构:@media 设备名only (选取条件) not (选取条件) and(设备选取条件)

       示例一:在link 中使用@media:
        <link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px),
          only screen and (max-device-width: 480px)” href=“link.css”/>
        上面使用中only 可省略,限定于计算机显示器,第一个条件max-width 是指渲染界面
        最大宽度,第二个条件max-device-width 是指设备最大宽度。
        

       示例二:在样式表中内嵌@media:
        @media ( min-device-1024px ) and ( max-989px ), screen and
        (max-device-480px),(max-device-480px) and (orientation:landscape),
        (min-device-480px) and (max-device-1024px) and (orientation:portrait)
        

      <meta name=“viewport” content=“width=device-width; initial-scale=1.0”>在页面的head中一定要写:
        meta viewport 这个属性是在移动设备上设置原始大小显示和是否缩放的声明。

      

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--meta viewport 这个属性是在移动设备上设置原始大小显示和是否缩放的声明-->
    
        <title></title>
        <style>
            *{
                padding:0;
                margin:0;
    
            }
            .container{
                background-color: #ffff00;
                margin:auto;
            }
            header{
                100%;
                height:100px;
                background: red;
            }
            .left-nav{
                background: blue;
                height:500px;
            }
            .content{
                background: green;
                height:500px;
            }
            .right-aside{
                background: bisque;
                height:500px;
            }
            footer{
                100%;
                height:100px;
                background: #00ffff;
                clear:both;
            }
            .left-nav input{
                display: none;
            }
    
            @media screen and (min- 992px){
                .container{
                    992px;
                }
                .left-nav{
                    200px;
                    float:left;
                }
                .content{
                    500px;
                    float:left;
                }
                .right-aside{
                    292px;
                    float:left;
                }
    
            }
            @media screen and (min-768px) and (max-992px){
                .container{
                    768px;
                }
                .left-nav{
                    150px;
                    float:left;
                }
                .content{
                    618px;
                    float:left;
                }
                .right-aside{
                    display:none;
                }
            }
            @media screen and (max-768px){
                .container{
                    100%;
                }
                .left-nav{
                    100%;
                    height:50px;
                }
                .content{
                    100%;
                }
                .right-aside{
                    display:none;
                }
                .left-nav input{
                    display: block;
                }
            }
            .height{
                height:500px;
            }
        </style>
    
    </head>
    <body>
        <div class="container">
            <header>
    
            </header>
            <nav class="left-nav">
                <input type="button" value="更多" onclick="more()"/>
            </nav>
            <section class="content">
    
            </section>
            <aside class="right-aside">
    
            </aside>
            <footer>
    
            </footer>
        </div>
    </body>
    <script src="../js/jquery-1.9.1.min.js"></script>
    <script>
    
        function more(){
            $(".left-nav").toggleClass("height");
        }
    </script>
    </html>
    

      最大样式992px:

      中等样式768px:

      最小样式>768px:

      

    二、Bootstrap响应式布局

      

      通过使用这些工具class可以根据屏幕和不同的媒体查询显示或隐藏页面内容,加速针对移动设备的开发。

      尝试使用这些class并避免创建同一个网站的不同版本,从而能够完善不同设备上的显示效果。响应式工具目前只是针对块级元素, 不支持inline元素和表格元素。

      栅格布局:

      

     超小屏幕设备 手机 (<768px)小屏幕设备 平板 (≥768px)中等屏幕设备 桌面 (≥992px)大屏幕设备 桌面 (≥1200px)
    栅格系统行为 总是水平排列 开始是堆叠在一起的,超过这些阈值将变为水平排列
    最大.container宽度 None (自动) 750px 970px 1170px
    class前缀 .col-xs- .col-sm- .col-md- .col-lg-
    列数 12
    最大列宽 自动 60px 78px 95px
    槽宽 30px (每列左右均有15px)
    可嵌套 Yes
    Offsets N/A Yes
    列排序 N/A Yes

        在不同的尺寸银幕上显示或是影藏: 

    超小屏幕手机 (<768px)小屏幕平板 (≥768px)中等屏幕桌面 (≥992px)大屏幕桌面 (≥1200px)
    .visible-xs 可见
    .visible-sm 可见
    .visible-md 可见
    .visible-lg 可见
    .hidden-xs 可见 可见 可见
    .hidden-sm 可见 可见 可见
    .hidden-md 可见 可见 可见
    .hidden-lg 可见 可见 可见

      通过组合栅格式布局和在不同的尺寸的银幕上显示来实现响应式布局:

      例:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>自定义响应式布局</title>
        <link rel="stylesheet" href="css/bootstrap.min.css"/><!--引用bootstrap.css这句必不可少,用于栅格化布局-->
        <style>
            .header{
                height: 100px;
                background: greenyellow;
            }
            .nav{
                height: 500px;
                background: #ffff00;
            }
            .section{
                height: 500px;
                background: green;
            }
            .aside{
                height: 500px;
                background: blue;
            }
            .footer{
                height: 100px;
                background: blueviolet;
            }
            .col-xs-nav{
                height: 100px;
                background: #ffff00;
            }
            .col-xs-nav-height{
                height: 500px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <header class="col-xs-12 header"></header>
            </div>
            <div class="row" >
                <nav class="col-xs-12 visible-xs col-xs-nav"><input type="button" value="more" onclick="more()"/></nav>
                <nav class="col-xs-12 hidden-xs col-md-4 col-lg-3 nav"></nav>
                <section class="col-md-8 visible-md col-lg-6 visible-lg section"></section>
                <aside class="col-lg-3 visible-lg aside"></aside>
            </div>
            <div class="row" >
                <nav class="col-xs-12 visible-xs col-xs-nav"></nav>
            </div>
            <div class="row">
                <footer class="col-xs-12 footer"></footer>
            </div>
        </div>
    </body>
    <script src="js/jquery-1.11.2-min.js"></script><!--编写js的框架-->
    <script src="js/html5shiv.min.js"></script><!--实现响应式布局的js-->
    <script src="js/respond.min.js"></script><!--实现响应式布局的js-->
    <script src="js/common.js"></script> <script> function more(){
      $(".col-xs-nav").toggleClass("col-xs-nav-height")
      }
    </script>
    </html>

      这样的样式同上面的自定义响应式布局的页面样式基本相同;

    结论:在使用bootstrap的响应式布局相对于自己写的响应式布局,两者的写代码效率显而易见,因此虽然个人的喜爱不同,但是就我个人而言使用bootstrap的响应式布局的效率要明显高于是用自己编写的响应式布局。

  • 相关阅读:
    React Native学习(一)——搭建开发环境
    Linux 命令系列之 seq
    Linux 提高操作效率之 tab 命令补全
    Atlassian 系列软件安装(Crowd+JIRA+Confluence+Bitbucket+Bamboo)
    代码质量管理 SonarQube 系列之 安装
    kworkerds 挖矿木马简单分析及清理
    shell 脚本常用调试方法
    JVM 调优之 Eclipse 启动调优实战
    基于 Njmon + InfluxDB + Grafana 实现性能指标实时可视监控
    nmon 的下一代工具 njmon
  • 原文地址:https://www.cnblogs.com/wanb/p/4559009.html
Copyright © 2020-2023  润新知