• 响应式与bootstrap


    一.单双击问题
    <body>
    <button>按钮</button>
    <script src="./jQuery.js"></script>
    <script>
    $(function () {
    // 先做两次单击 一次双击 中间间隔 小于500ms
    var timer = null;
    $('button').click(function(event) {
    console.log(timer);
    clearTimeout(timer);
    // 定时器 300ms 一次性定时器
    timer = setTimeout(function(){
    console.log('单机了');
    }, 500);
    });
    $('button').dblclick(function(event) {
    console.log(timer);
    clearTimeout(timer);
    timer = setTimeout(function(){
    console.log('双击了');
    }, 499);
    });
    })
    </script>
    </body>
    对于一次双击,会在页面中打印两次单击和一次双击的问题,解决办法是,两次单机的时间间隔小于500毫秒,视为一次双击
    在双击的第一次点击中,会开启一个定时器,等待500毫秒后输出'单机了',但是在这500毫秒中,又点击了一次按钮
    单击事件的函数清了上一次单机的定时器,重新开启一个定时器,同时,双击事件的函数,清了这次的定时器.
    二.animate.css(css3的动画库)

    animate.css库的网址:https://github.com/daneden/animate.css

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
    <style>
    div{
    height: 200px;
    200px;

    }
    </style>
    </head>
    <body>
    <!--循环执行-->
    <h1 class="animated bounce infinite delay-2s">哈哈</h1>
    <!--提供的效果 两秒内执行结束-->
    <div class="box animated zoomIn infinite delay-2s"></div>
    </body>

    两张使用流程图片

    三.jQueryUI

    jQueryUI的网址:http://www.jqueryui.org.cn/

    流程图

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>jQuery UI 排序(Sortable) - 默认功能</title>
    <!--如果 链接的cdn资源过慢,下载后放到本地去使用-->
    <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
    <!--引用时一定要引入相应版本的jQuery,否则可能出现兼容性问题-->
    <script src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
    <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
    <script>
    $(function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
    });
    </script>
    </head>
    <body>

    <ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
    </ul>
    </body>
    </html>
    单纯的赋复制代码,就可以实现相应的功能,把代码改成自己需要的样子,插入到项目的相应位置即可

    四.移动端响应式(在不同的页面尺寸上对应不同的样式)
    定义和使用
    使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,
    特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的
    宽度和高度重新渲染页面,这对调试来说是一个极大的便利。
    @media mediaType and|not|only (media feature) {
    /*CSS-Code;*/
    }
    媒体类型(mediaType ) 类型有很多,在这里不一一列出来了,只列出了常用的几个。
    screen: 用于电脑屏幕,平板电脑,智能手机等。(最常用) speech 应用于屏幕阅读器等发声设备 媒体功能
    media feature:
    1.max-定义输出设备中的页面最大可见区域宽度
      2.min-定义输出设备中的页面最小可见区域宽度
    始编写响应式页面
    准备工作1:设置Meta标签
    首先我们在使用 @media 的时候需要先设置下面这段代码,来兼容移动设备的展示效果:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    这段代码的几个参数解释:
    width = device-width:宽度等于当前设备的宽度
    initial-scale:初始的缩放比例(默认设置为1.0,即代表不缩放)
    user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)
    准备工作2:加载兼容文件JS(ie8以下的才需要用)
    因为IE8既不支持HTML5也不支持CSS3 @media ,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    准备工作3:设置IE渲染方式默认为最高(可选) 现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事
    情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8 为了防止这种情况,我们需要下面这段代码来让IE的文档渲染模式永远都是最新的
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    ps:这段代码后面加了一个chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使
    用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。
    例:(根据文档的宽度,改变body的背景颜色)
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <style>
    @media screen and (min- 1200px){
    body{
    background-color: red;
    }
    }
    @media screen and (max- 1200px) and (min- 800px){
    body{
    background-color: #4376ff;
    }
    }
    @media screen and (max- 800px){
    body{
    background-color: #ffc585;
    }
    }
    </style>
    </head>
    <body>
    </body>
    </html>
    五.移动端单位的介绍
    字体相对单位有:em、ex、ch、rem;

    px: 绝对(固定)单位
    缺点:任何情况下都是固定值,会导致布局在不同尺寸下的设备错位

    %:相对单位(会有影响发生变化)相对于父级(自身)大小进行定位
    缺点:能确定范围的还是比较好计算的,对于不太好确定值得地方不好使用百分比,并且会导致变形,高度一般不好控制

    em: 相对单位 (会有影响发生变化) em=当前字体大小
    缺点:会根据当前容器字体大小发生变化,假如每个容器字体大小不一致,那么计算会非常麻烦

    rem:相对单位 只依赖于html字体大小 需要通过js去控制:

    例:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <title>移动端布局</title>
    <style type="text/css">
    *{
    padding: 0;
    margin: 0;
    }
    ul{
    list-style: none;
    }
    .clearfix:after{
    content: '';
    display: block;
    clear: both;
    }
    html{
    100%;
    height: 100%;
    font-size: 100px;
    overflow: hidden;
    }
    body{
    100%;
    height: 100%;
    overflow: auto;
    }
    .head-box{
    100%;
    height: 0.4rem;
    background-color: red;
    position: absolute;
    top: 0;
    left: 0;
    }
    .list{
    margin-top: 0.4rem;
    font-size: 16px;
    }

    .list .item{
    float: left;
    1rem;
    height: 1rem;
    border: 1px solid black;
    margin: 0.1rem;
    }
    </style>
    </head>
    <body>

    <header class="head-box">
    <div class="head-top"></div>
    <div class="head-bottom"></div>
    </header>

    <ul class="list clearfix">
    <li class="item">1111111</li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
    </ul>
    </body>
    </html>

    动态改变HTML的fontsize:
    !(function(doc, win) {
    //获取HTML对象
    var docEle = doc.documentElement,
    //三元运算符
    evt = "onorientationchange" in window ? "orientationchange" : "resize",
    fn = function() {
    //获取HTML文档的宽度
    var width = docEle.clientWidth;
    console.log(width);
    //动态设置HTML的fontsize
    width && (docEle.style.fontSize = 20 * (width / 320) + "px");
    };
    //只要文档或窗口发生改变是,执行fn回调函数
    win.addEventListener(evt, fn, false);
    // 每次加载时都重新计算一下页面尺寸,执行fn回调函数
    doc.addEventListener("DOMContentLoaded", fn, false);
    //自执行函数
    }(document, window));
    只要在HTML文档的最后引入此文件,就可以达到无论设备尺寸如何,都会显示我们想要的那种效果
    六.Boostrap框架
    Bootstrap支持移动设备优先
    也就是说使用Bootstrap可以在移动设备上运行。为了确保适当的绘制和触屏缩放,需要在<head>之中添加viewport元数据标签
    <meta name="viewport" content="width=device-width, initial-scale=1">
    在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功能。这样禁用
    缩放功能后,用户只能滚动屏幕,就能让你的网站看上去更像原生应用的感觉。注意,这种方式我们并不推荐所有网站使用,还是要看你自己的情况而定!
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    Bootstrap重置样式
    为了增强跨浏览器表现的一致性,我们使用了 Normalize.css,这是由 Nicolas Gallagher 和 Jonathan Neal 维护的一个CSS 重置样式库。
    布局容器
    Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器。我们提供了两个作此用处的类。注意,由于 padding 等属性的
    原因,这两种 容器类不能互相嵌套。
    .container 类用于固定宽度并支持响应式布局的容器。
    <div class="container">
    ...
    </div>
    .container-fluid 类用于 100% 宽度,占据全部视口(viewport)的容器。
    <div class="container-fluid">
    ...
    </div>
    栅格系统




    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列
    栅格系统用于通过一系列的行(row)与列(column)的组合来创建页面布局,你的内容就可以放入这些创建好的布局中。下面就介绍一下
    Bootstrap 栅格系统的工作原理:

    栅格参数

    使用单一的一组 .col-md-* 栅格类,就可以创建一个基本的栅格系统,在手机和平板设备上一开始是堆叠在一起的(超小屏幕到小屏幕这
    一范围),在桌面(中等)屏幕设备上变为水平排列。所有“列(column)必须放在 ” .row 内。

    例:
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
    <!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    </head>
    <body>
    <div class="container">
    <div class="row">
    <div class="col-lg-3 col-md-4 col-sm-6">
    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
    </div>
    <div class="col-lg-3 col-md-4 col-sm-6">
    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。
    </div>
    </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    </body>
    </html>






































  • 相关阅读:
    布隆过滤器(Bloom Filter)
    什么是分布式账本
    什么是非对称加密?非对称加密算法介绍
    ANDROID DisplayManager 服务解析一
    ANDROID DisplayManager 服务解析一
    ANDROID DisplayManager 服务解析一
    ANDROID DisplayManager 服务解析一
    第1章 数据结构绪论
    第1章 数据结构绪论
    第1章 数据结构绪论
  • 原文地址:https://www.cnblogs.com/shanghongyun/p/9750134.html
Copyright © 2020-2023  润新知