移动端开发技巧-优快云博客

对前边的总结进行补充：

onscroll

在移动端项目中，滚动监听是经常用到的：
eg:

  //获取搜索盒子
    var searchBox = document.querySelector(".header_box");
    //获取轮播图盒子
    var bannerBox = document.querySelector(".banner");
    //获取高度
    var height = bannerBox.offsetHeight;
    //监听滚动事件
    window.onscroll = function () {
        //目的不断的观察当前滚动的距离是否超过轮播图的高度
        //当前滚动的距离
        var top = document.body.scrollTop;
        var opacity = 0;
        //如果当前滚动的距离大于轮播图的高度的时候不做颜色的改变
        if (top > height) {
            opacity = 0.85;
        }
        // 如果当前滚动的距离小于轮播图的高度的时候不做颜色的改变
        else {
            opacity = 0.85 * (top / height);
        }
        searchBox.style.background = "rgba(201,21,35," + opacity + ")";

    }

touch事件

1.touch事件的三个常用事件，以及执行顺序？

三个事件：
      1.touchsatrt   当手指触摸屏幕的时候触发
      2.touchmove   当手指在屏幕上滑动的时候连续触发    /
      3.touchend   当手指离开的时候触发*/
        他的顺序根据演示得到1,2,3

2.touch事件下ev对象包含哪些移动端特有的属性？

这里写图片描述

changedTouches 页面上最新更改的所有触摸
targetTouches 目标元素的所有当前触摸只会包含目标元素之内的触摸点集合，之外的就不会包含在内了
touches 页面上的所有触摸包含目标元素内的和目标元素之外的

注意
touchend只会记录更新的触摸点：changedTouches

触摸事件的触摸点信息属性：
console.log(e.touches[0])
这里写图片描述

文本环绕
这里写图片描述

左边浮动，右边overflow：hidden，主要是通过BFC

图片的显示

1>一个是以内容显示  background-clip:content-box
2>一个是以内容定位  background-origin:content-box

动画插件
https://daneden.github.io/animate.css

滑动
通过swipe

S.iScroll({
        swipeDom:document.querySelector(".category_right"), //父容器
        swipeType:"y", //滑动方向
        swipeDistance:100 //缓冲距离
    })

响应式开发原理 media query

这里写图片描述

对比移动web开发
这里写图片描述

响应式开发 bootstrap的引用：
Html5shiv: 当浏览器不支持html标签的时候我们引用这个js来帮浏览器来查询
Respond：当我们的浏览器不支持媒体查询的时候respond帮助浏览器来查询

 <!-- Bootstrap -->
    <!-- 核心css文件 -->
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"/>
    <!--[if lt IE 9]-->
    <script src="lib/html5shiv/html5shiv.min.js"></script>
    <script src="lib/respond/respond.js"></script>
    <!--[endif]-->
    <!--自己的CSS文件-->
    <link rel="stylesheet" href="css/index.css"/>

--------------------
<!--jQuery-->
<!--因为  bootstrap  是依赖 jquery  引用jquery文件-->
<script src="lib/jQuery/jquery.min.js"></script>
<!-- js 核心文件-->
<script src="lib/bootstrap/js/bootstrap.js"></script>
<!--自己的js-->
<script src="js/index.js"></script>

bootstrap的隐藏：
这里写图片描述

zepto简介

默认构建包含以下模块： Core、Ajax、Event、Form、IE。
这里写图片描述

注意：zepto不支持eq()选择器
必须引用selector模块才可以

$("#some_element").animate({
        opacity: 0.25,
        left:
        '50px',
        color:
        '#abcdef',
        rotateZ:
        '45deg',
        translate3d: '0,10px,0'
        }, 500,
        'ease-out')

tap

兄弟选择器
div+div{} 下一个元素

div~div{} 目标元素下的同级元素

less

Less环境安装

安装nodejs

运行 npm install –g less

less语法：

变量

@mainColor:#E93223;
body{
  color: @mainColor;
}

Mixin混入

/*-----------------mixin 混入----------------*/
/*颜色*/
.red{
  color: @mainColor;
}
.border{
  border: 1px solid #ccc;
}
.redBorder(){
  color: @mainColor;
  border: 1px solid #ccc;
}
.mixin-class{
  .red();
  .border();
}
.mixin-fuc{
  .redBorder();
}

嵌套

/*------------------嵌套------------------*/
/*轮播图*/
#banner{
  .carousel-inner{
    > div.item{
      a.img_box{
        background: url("../images/slide_01_2000x410.jpg") no-repeat center center;
        height: 410px;
        /*调用redBorder mixin*/
        display: block;
        .redBorder();
        /*调用@mainColor 变量*/
        &:hover{
          color: @mainColor;
        }
      }
      a.img_mobile{
        width: 100%;
        display: block;
        img{
          width: 100%;
          display: block;
        }
      }
    }
  }
}

Import 导入

/*---------------------Import 引入------------------------*/
@import "base";
.f_left{
  float: @right;
}

运算及函数
http://www.1024i.com/demo/less/reference.html

escape(@string); // 通过 URL-encoding 编码字符串
e(@string); // 对字符串转义
%(@string, values...); // 格式化字符串
unit(@dimension, [@unit: ""]); // 移除或替换属性值的单位
color(@string); // 将字符串解析为颜色值
data-uri([mimetype,] url); // * 将资源内嵌到css中，可能回退到url()
ceil(@number); // 向上取整
floor(@number); // 向下取整
percentage(@number); // 将数字转换为百分比，例如 0.5 -> 50%
round(number, [places: 0]); // 四舍五入取整
sqrt(number); // * 计算数字的平方根
abs(number); // * 数字的绝对值
sin(number); // * sin函数
asin(number); // * arcsin函数
cos(number); // * cos函数
acos(number); // * arccos函数
tan(number); // * tan函数
atan(number); // * arctan函数
pi(); // * 返回PI
pow(@base, @exponent); // * 返回@base的@exponent次方
mod(number, number); // * 第一个参数对第二个参数取余
convert(number, units); // * 在数字之间转换
unit(number, units); // * 不转换的情况下替换数字的单位
color(string); // 将字符串或者转义后的值转换成颜色
rgb(@r, @g, @b); // 转换为颜色值
rgba(@r, @g, @b, @a); // 转换为颜色值
argb(@color); // 创建 #AARRGGBB 格式的颜色值
hsl(@hue, @saturation, @lightness); // 创建颜色值
hsla(@hue, @saturation, @lightness, @alpha); // 创建颜色值
hsv(@hue, @saturation, @value); // 创建颜色值
hsva(@hue, @saturation, @value, @alpha); // 创建颜色值
hue(@color); // 从颜色值中提取 hue 值（色相）
saturation(@color); // 从颜色值中提取 saturation 值（饱和度）
lightness(@color); // 从颜色值中提取 'lightness' 值（亮度）
hsvhue(@color); // * 从颜色中提取 hue 值，以HSV色彩空间表示（色相）
hsvsaturation(@color); // * 从颜色中提取 saturation 值，以HSV色彩空间表示（饱和度）
hsvvalue(@color); // * 从颜色中提取 value 值，以HSV色彩空间表示（色调）
red(@color); // 从颜色值中提取 'red' 值（红色）
green(@color); // 从颜色值中提取 'green' 值（绿色）
blue(@color); // 从颜色值中提取 'blue' 值（蓝色）
alpha(@color); // 从颜色值中提取 'alpha' 值（透明度）
luma(@color); // 从颜色值中提取 'luma' 值（亮度的百分比表示法）
saturate(@color, 10%); // 饱和度增加 10%
desaturate(@color, 10%); // 饱和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 设定透明度为 50%
spin(@color, 10); // 色相值增加 10
mix(@color1, @color2, [@weight: 50%]); // 混合两种颜色
greyscale(@color); // 完全移除饱和度，输出灰色
contrast(@color1, [@darkcolor: black], [@lightcolor: white], [@threshold: 43%]); // 如果 @color1 的 luma 值 > 43% 输出 @darkcolor，否则输出 @lightcolor
multiply(@color1, @color2);
screen(@color1, @color2);
overlay(@color1, @color2);
softlight(@color1, @color2);
hardlight(@color1, @color2);
difference(@color1, @color2);
exclusion(@color1, @color2);
average(@color1, @color2);
negation(@color1, @color2);
iscolor(@colorOrAnything); // 判断一个值是否是颜色
isnumber(@numberOrAnything); // 判断一个值是否是数字（可含单位）
isstring(@stringOrAnything); // 判断一个值是否是字符串
iskeyword(@keywordOrAnything); // 判断一个值是否是关键字
isurl(@urlOrAnything); // 判断一个值是否是url
ispixel(@pixelOrAnything); // 判断一个值是否是以px为单位的数值
ispercentage(@percentageOrAnything); // 判断一个值是否是百分数
isem(@emOrAnything); // 判断一个值是否是以em为单位的数值
isunit(@numberOrAnything, "rem"); // * 判断一个值是否是指定单位的数值

/*-------------------运算和函数--------------------------*/
@back:#333;
.test{
  border: 1px solid @back*2;
  background: lighten(#000, 10%);
  color:darken(#000, 10%);
}

less在浏览器上的使用

<link rel="stylesheet/less" type="text/css" href="styles.less" />

<script src="less.js" type="text/javascript"></script>

Less文件是通过http来异步加载的
注意：它是异步的加载less文件然后解析
一定要求是使用http形式访问否则无法加载less文件
不建议使用lessjs这种形式来用less

rem

1、em和rem都有一个默认的初始大小为16px
2、em是根据父元素的font-size来设置的
3、root，根，在页面中，html标签为根元素
4、rem是根据html标签的font-size来设置的
5、rem让文字和标签的大小随着屏幕的尺寸做变话 等比缩放

移动web学习