移动端

WangYunN
556 阅读9分钟

移动端 指运行在移动设备浏览器（或webview）中的h5页面；在移动端没有IE浏览器的兼容性问题，可以使用新技术

  • 原生App 直接运行在操作系统中的应用
  1. 优势 运行流畅 下载一次 永久使用
  2. 劣势 可移植性差 IOS 和 Android 不通用 时效性差 升级在用户手里
  • web app
  1. 优点 开发效率高 没有平台限制 服务供应商拥有更新主动权
  • Hybrid App
    1. 原生app中中嵌 webview(类似浏览器的东西)，业务功能使用html+js完成

HTML5 新增的标签

  • 常用标记
    • 块级元素 div p h1-h6 ul li ol table form
    • 行内 span a label i br
    • 行内块 input img button
  • h5 新增标签的语义化
    • header 头
    • nav 导航
    • section 块
    • footer 底部
    • figcation 图片描述
    • article 文章
    • mark 高亮
    • audio 音频
    • video 视频

less 预编译语言 让css具备面向对象编程思想，有变量、有函数、有作用域，是浏览器不能识别和渲染less代码 因此在使用时 先编译成CSS再进行使用

  1. 修改link标签的rel属性
  2. 引入编译JS的文件 开发环境编译

less 中的变量

  1. 声明一个变量 @变量名
@bg-src:"../img/";  /*使用图片资源变迁引入 变量存储，以及拼接*/
@link-color: #000; /* 可以使用 - */
@wid: 200px;

less中的嵌套语法

  1. less中使用嵌套表示层级
<div class="outer">
  <div class="inner">
    <div class="center"><a href="" class="link"></a></div>
  </div>
</div>

.outer {
  .inner {

    .center {
      a {

      }
    }
  }
}
  1. 在less的嵌套语法中使用 &表示花括号外面的选择器后面紧跟着XX
.pub{
    .bg{
        //后代选择器
    }
    & > .bg{
       //子级选择器 
    }
    &.bg{
        //交集选择器
    }
    &:hover{
        //伪类选择器
    }
}
  1. less嵌套会形成作用域
  2. less中使用函数 less中可以声明函数
.transition(@property: all, @duration: .5s, @timing-function: linear, @delay: 0s) {
  transition: @arguments;
}

.cc {
  .transition; /*啥也不传时使用默认值*/
  .transition(@duration: 1s); /*只修改duration*/
}

CSS3新增的特性

  1. border-redius
  2. bbox-shadow :[h 阴影水平偏移值 ,v 阴影竖直偏移值,blur 模糊尺寸（可选）,spread 阴影尺寸（可选）,color 阴影颜色（可选） inset 内置阴影（可选）]
  3. text-shadow: h-shadow v-shadow blur color;
  4. background-size :[100px 100px 具体值,100% 100% 宽高百分比（相对于所在容器）,cover 以合适的比例把图片整个容器覆盖，但是容器不一定漏出整个图片,contain 保证图片纵横比例不变铺满容器的尺寸较小一个方向，另一边根据图片综合比例计算（当一边铺满后，另一边不一定铺满）]
  5. background-clip :[border-box 裁切到边框,padding-box 裁切到padding,content-box 裁切到内容区域,text 只填充文本（需要-webkit）]

CSS 过渡动画

  • transition属性
    • transition-property: 要过渡的属性，默认all
    • transition-duration: 过渡时间
    • transition-timing-function: 过渡效果，默认linear
    • transition-delay: 动画延迟时间

CSS3变形动画

  • transform属性
    • scale: 缩放
    • translate: 平移
    • rotate: 旋转
    • skew: 倾斜
  • ransform-origin: 设置旋转动画的中心点位置
    • 水平： left center right
    • 竖直：top center bottom*

关键帧动画 @keyframes 定义 使用animation属性调用

  • @keyframes 动画名{ 0%{ transfrom: } . . . . . .

    100%{ transfrom: } }

  • animation属性

    • animation-name: 运动轨迹名称 @keyframes 定义一个轨迹名称
    • animation-duration: 运动轨迹运动时间
    • animation-timing-function: 运动效果 (linear ease-in ease-out..)
    • animation-delay: 延迟时间
    • animation-iteration-count: 动画执行次数，默认1，infinite 无数次

3D变换

  • transform: translate3d(x, y, z) 设置在x、y、z轴上的偏移距离
  • transform: translateZ(z) 设置元素在z轴的偏移距离
  • transform: rotateX(deg) 设置元素绕着x轴转动的角度，角度为正上边缘向屏幕内转动
  • transform: rotateY(deg) 设置元素绕着y轴转动的角度，角度为正右侧向屏幕内转动
  • transform: rotateZ(deg) 设置元素绕着Z轴转动的角度，角度为顺时针转动

perpective 和 transform-style:preserve-3d

  • perspective: 视距，眼睛到元素的距离（透视的概念），默认值是0，有了视距值以后才能有近大远小的效果 没有视距 就没有3d效果
  • transform-style: preserve-3d; 保留元素的3d视图，默认情况下浏览器不保留

字体图标的使用

  1. 下载字体图标
  2. 将字体图标放到项目目录中
  3. 使用@font-face创建字体

在页面中引入css文件

在需要的地方使用字体图标

  1. 使用伪类 font-family: iconfont;
  2. 引入图标字体的CSS文件 使用类名引用 字体图标
  3. 在需要的地方 给元素添加iconfont i-字体图标名称

媒体查询

查询不同的媒体类型，根据不同的宽度，是不同样式生效；经常应用PC端处理不同屏幕的分辨率

@media screen and (max-width: 400px){ /*当屏幕宽度小于400时生效的样式*/
    .box {
        width: 400px;
        height: 400px;
        background: #000;
    }
}

@media all and (max-width: 375px) {
    .box {

    }
}

响应式布局 根据设备不同的移动设备的尺寸 开发一套可以适应各种尺寸的页面

  1. 常见响应式布局方法
    • 媒体查询
    • rem布局
    • flexBox
    • 流式布局

flex布局 弹性布局 为盒子模型提供了最大的灵活性

  1. 容器 指定为flex布局 display:flex;
  2. 行内元素 使用flex布局 display:inline-flex 使用flex布局后 子元素的float clear vertical-align 属性自动失效

基本概念

  1. 主轴 和 交叉轴
    • 默认主轴是水平的 交叉轴是垂直的
    • 主轴开始的位置与边框的交叉点叫做 main start 结束位置叫 mian end
    • 交叉轴开始的位置叫做 cross start 结束位置叫做cross end
      项目默认主轴排列 单个项目占主轴空间叫 mian size 占交叉空间叫 cross size

容器属性

  1. flex-direction: 设置主轴方向；可选值：
    • row(默认值) 主轴为水平方向，起点在左端
    • row-reverse: 主轴为水平方向，起点在左端
    • column: 主轴为垂直方向，起点在上沿
    • column-revers: 主轴为垂直方向，起点在下沿。
  2. flex-wrap : 设置项目拍不下时如何换行
    • nowrap 默认值 不换行，压缩item的尺寸来实现
    • wrap: 换行，第一行在上方
    • wrap-reverse: 换行，第一行在下方
  3. flex-flow 是 1和2 的简写
  4. justify-content 设置项目在主轴上的对齐方式
    • flex-start: 默认值，左对齐
    • flex-end: 右对齐
    • center: 居中
    • space-between: 两端对齐，项目之间间隔相等
    • space-around: 每个项目两侧间距相等，所以项目之间的距离比项目和边框之间的距离大一倍
  5. align-items 设置项目在交叉轴上对齐方式
    • flex-start: 交叉轴起点对齐
    • flex-end: 交叉轴终点对齐
    • center: 交叉轴的终点对齐
    • baseline: 项目第一行文字基线对齐
    • stretch: 默认值，如果项目未设置高度或者设为auto，将占满整个容器的高度

项目属性

  1. order 属性定义项目的排列顺序，数值越小越靠前，默认为0
  2. flex-grow 属性：定义项目的放大比例，默认为0，如果剩余空间也不会放大；如果所有的项目的flex-grow都为1，则他们等分剩余空间，如果某一个的flex-grow 为2，其余的都为1，为2的那个占据的剩余空间比其他的大
  3. flex-shrink 属性定义了项目的缩小比例，默认为1，即空间不足，该项目将缩小；如果所有的项目的flex-shrink都为1，当空间不足时，都将等比缩小；如果一个项目的flex-shrink为0，其他的都为1时，前者不缩小；(如果容器设置了flex-wrap无效了)
  4. align-self: 允许单个项目与其他项目的对齐方式不同，可以覆盖容器的align-items属性；默认值auto，表示继承父元素的align-item属性，如果没有stretch

rem 布局 解决适屏问题

使用之前 现在HTML开头添加一个mate标签 name 是 viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  1. rem 是和px一样都是单位 rem 是相对单位 px 是绝对单位 是相对于html标签的字体大小来的，html标签的字体大小 font-size就是1rem；
  2. 真实项目中 一般设计稿的常用宽度 为 640 和 750
  3. 接下来写样式，把测量出来的px都除以100变为rem，所有的单位都基于rem来写； => 假设设计稿是750px，相当于在750的设备下，1rem = 100px

rem 计算方法

function computedFont() {
    let winW = document.documentElement.clientWidth || document.body.clientWidth;
    let desW = 750;
    document.documentElement.style.fontSize = 100 * winW / 750 + 'px';
  }
  computedFont();
  window.addEventListener('resize', computedFont)

移动端事件 有触摸事件 一般不用click 在移动端有延迟

  1. touchstart 触摸元素时触发
  2. touchmove 在元素上滑动时触发
  3. touchend 当手指离开元素时触发

swiper插件的使用

//先引入
<link rel="stylesheet" href="swiper/swiper.min.css">

//初始化swiper
var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal', // 垂直切换选项
    loop: true, // 循环模式选项
    effect: 'fade',
    autoplay: true,
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },

    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  })

vm vh布局 新增加的单位 将视口分为100份 1份宽叫做1vw；高分为100份，每份高叫做1vh。

  • 作用 让一个盒子充满屏幕

数组方法 补充

  • 数组.filter(function (item, index) {return 条件})过滤，把满足条件，即回调函数return true的项拿出来组成一个新数组；原数组不变；
  • 数组.every(function (item, index) {return 条件}):用来验证数组的每一项是否满足某个条件（条件就是回调函数返回值），如果每一个都满足条件就会返回true，否则返回false；
  • 数组.some(function (item, index) {return 条件})：验证数组中是否有一些向满足条件，满足就会返回true，否则false；
  • 数组.find(function (item, index) {return 条件})：查找数组中满足条件的第一项，找到第一个就返回，如果有多个都满足条件也只是获取第一个；如果没找到返回undefined【注意找到返回数组项，不是新数组】
avatar
文章
阅读
粉丝