Rainy113
JD_M案例知识点（移动端）

JD_M案例知识点

基础布局+顶部通栏+顶部轮播图+导航栏

知识点

  1. base.css
  • ::before,::after 伪元素

  1. 统一设置文字 sans-serif 移动端 的默认字体
    font-family: '微软雅黑',sans-serif;

  2. 设置背景图片的大小压缩了一倍 目的是为了防止用户看到像素颗粒，如果要一行写完background，size要加“/”

  3. 轮播图——左右两张的无限轮播图

  • 最左边加上最后一张
  • 最右边加上第一张图
  • 默认给用户看的是：如果用索引来说，是索引为1的那一张（最前面一张的索引为0）
  1. 图片分辨率问题
  • ios中，会准备多张图片
  • 早期的web开发中也会准备多张图片
  • 现在流行的是准备一张大图然后进行压缩
  1. 为了保证零头不影响布局
  • 设置：width: 33.33333%;
  • 而不是：width: 33%;
  1. 移动端屏幕适配布局方式：
  • 宽度百分比，定高
  • viewport
  1. 抽取通用样式的目的：
  • 方便使用
  • 将常用的样式定义为通用的资源，使用时直接添加class名字就可以

技术点：less

  • 优点

    1. 为CSS赋予了动态的语言特性
    2. 变量、继承、运算、函数等，方便CSS的编写与维护

  • sublime安装less插件

    1. 下载压缩包
    2. sublime 菜单的 倒数第二项
    • 第一个选项
    • 把弹出的文件夹的路径，复制
    1. 双击压缩包
    • 解压到
    • 将复制的路径 拷贝进去
    • 确定解压
    1. 开关sublime 即可

  • less只是一个纯文本

    1. 装插件与否 仅仅影响的是 高亮效果
    2. 不影响代码的编写
    3. webstorm 我需要研究一下再告诉大家

  • less使用

    1. 创建后缀是.less的文件
    2. 运行考拉
    3. 讲less的文件夹拖入考拉
    4. 只要保存.less文件 ctrl+s 考拉 会自动帮助我们进行 编译
    • 编译的作用是: 讲less 转化为 .css文件
    • 讲less中的语法 根据一定的规则 替换为 对应的css代码

  • 考拉编译注意点

    1. 如果弹出红色框框 意味着 写错了代码
    2. 如果放.less文件的 文件夹 叫做 less
    • 在编译的时候 会在跟less文件夹同级的目录下 创建一个 叫css的文件 编译好的代码就在那里面
    1. 如果文件夹名不叫 less 而是 其他的 那么 会在统计目录下

  • less的作用

    • 变量的作用
      1. 实现 替换变量值,所有使用变量的地方 都会被替换
      2. 比如 页面大量使用jd红,要换位 淘宝红 只需要替换变量值即可
    • 京东m使用less来写
      1. jd红 定义变量
      2. 嵌套多的结构 使用 less的 嵌套写法
      3. 混合的 写法 可以 先别急着 用上去：width:100%;

less语法

  1. 注释
  • //注释：less支持跟js一样是注释，并且这样的注释
  • /我是一行注释，编译时，该注释会被保留/
  1. 变量定义
//格式：变量名:变量值
@jdRed: rgb(201,21,35);

//定义宽度
@minWidth:100px;

//定义图片尺寸
@imgSize:100px 100px;
  1. 类似于函数用法
  • 括号中 参数名: 参数的默认值
  • 如果使用 该class 进行混合时，如果不传递参数,会使用默认值
.red{
  background-color: red;
  border:1px solid red;
  color:red;
}

.oneColor(@color:#0094ff){
  background-color: @color;
  border:1px solid @color;
  color:@color;
}

body{
  .red();
}

ul{
  .oneColor(yellow);
}

div{
  .oneColor();
}
  1. 嵌套
//css
.box {
    background: #fff;
}
.box ul {
    color: red;
}


//less
.box {
    background: #fff;
    ul {
        color: red;
    }
}

js基础

1. 滚动后顶部通栏透明度

  • scrollTop获取滚动后，导航栏距离顶部的距离，最新版本浏览器（chrome和火狐，其他没有测试）不能使用document.body.scrollTop获取，只能使用document.documentElement.scrollTop获取。

2. 倒计时

  • 先获取一些必要元素
  • 每个一秒执行一次代码（定时器）
  • 易错点1：dom元素修改文本，需要用.innerHTML
  • 易错点2：时分秒的十位数记得取整，否则显示的是小数

3. 轮播图

  • 自动轮播图

    1. 定义index记录索引值
    2. 获取一些必须要知道的变量
    • 单个元素宽度
    • 轮播图的ul（很长的ul：1000%）
    • 索引的ul里面的li（li数组）
    1. 定时器
    • index++
    • 修改ul位置
    • 使用过渡来实现动画（缓动）效果
    1. 过渡结束事件
    • transitionend
    • 加前缀：webkitTransitionEnd
    • 需要使用addEventListener的方式添加
    • 默认的方法名为transitionend
    • 由于浏览器兼容性问题，可能需要添加前缀
      • webkitTransitionEnd
      • mozTransitionEnd
      • msTransitionEnd
      • oTransitionEnd

  • 移动端特有事件

    1. touch
    • touchstart：当手指触摸屏幕时触发，事件参数中有触摸点的值
    • touchmove：当手指在屏幕上滑动时连续的触发，事件参数中有触摸点的值
    • touchend：当手指从屏幕上移开时触发，事件参数中没有触摸点的值
    1. 特点
    • 不能通过doc.ontouchstart的方式去绑定
    • 只能addEventListener的方式进行绑定
    • 只在移动设备上支持
    1. 常见封装
    • 左滑，右滑
    • 长按
    • 捏合
    • 这些事件都是基于touch三个事件的封装

4. 注意

  • 实际开发中，页面的数据的获取
  • 如果是一个动态网站（基本上现在是所有网站都是动态的），页面中的内容是动态生成的
    • 比如：img的src属性，a标签的本质，页面布局效果等
  • 不刷新页面获取新数据：ajax技术
    • 发送请求即可
    • 在什么情况下发送请求：
      1.点击加载更多：点击发送ajax
      2. 滚动加载更多：滚动发送ajax
      3. 失去焦点验证用户名：失去焦点事件发送ajax

分类搜索页面(list.html)

1. 左侧滑动

  • 向上移动，是y的负方向
  • 移动的最小值：父盒子的长度-ul的长度
  • 移动的最大值：默认是0

2. 让代码的通用性更强

  • 关于DOM元素的值：通过先获取DOM元素，然后根据DOM元素获取：

    • 高度
    • 宽度
    • 子元素个数
    • 默认的样式等

  • 不要在代码中出现magicNumber

    • magicNumber：代码中写死具体的数值style.transition='all .3s';
    • 或者是：distance += 10;
    • 对于代码量足够大的项目，如果大量使用magicNumber，那么维护起来是致命的。
    • 实际开发中，在代码最开始的时候定义一大堆的变量
    • 成熟的代码一般都是先定义变量

  • 移动端click事件的触发，会延迟200ms

    • 为了提升用户体验，能顾实时触发，一般会自己封装一个叫tap的方法，手指触发
    • touch只有3个，左右滑动，滚动都是封装的
    • 如何算tap事件：手指点上去不移动，快速松开。用以下三个事件封装：
      • touchstart
      • touchmove：手指不动是不会触发的，只要能执行这个方法，就是失效的，因此不移动的逻辑，可以在这里实现
      • touchend：记录开始时间的差值

  • console.log();是十分消耗性能的，所以该方法只会出现在测试阶段，上线时会去掉。

  • 使用老版本的谷歌浏览器，刚切换到移动端视口时还能够看到click的延迟效果，如果刷新之后就看不到了。

  • 手机测试：

    • 比较low的方法，（公司不用）
      • 直接拷贝到手机上，通过手机的资源管理器打开html文件，指定使用的浏览器即可
      • 手机登陆qq
      • 电脑登陆qq：发送到我的设备，手机qq打开网站，选择使用的浏览器，注意iphone只支持使用qq浏览器才能打开
    • 公司里用的方法：会有一个专门的测试服务器，写好了以后上传即可
    • wamp：
      • 配置完成以后，将自己的移动站点丢到这里
      • 保证手机跟电脑在统一各局域网中（连着同一个wifi）：手机打开浏览器输入电脑的IP地址即可访问

  • 索引值的获取：

    1. 可以在for循环中获取
    2. 为每一个li保存一个索引属性：<body data-index='1'>，点击li的时候获取该属性的值即可：dom.dataSet['index'];

  • 解决左侧点击到li标签的问题：

    为了让a标签的点击范围增大，避免出现用户点击不到a标签的情况：将a标签的宽高设置为100%
display: block;
width: 100%;
height: 100%;

响应式+bootstrap

基本概念

  • 针对所有设备
  • 目的是开发一次即可
  • 会根据设备的屏幕尺寸改变而改变布局

技术的选择

  • 老项目
    • 推出的时候手机还没有这么流行
    • 重新开发一个移动端的站点
  • 新项目
    • 直接做响应式站点
  • 性能考虑
    • 在时间、金钱允许的情况下，各开发一个版本是最好的
  • 响应式网站的缺点：代码较多、维护较为复杂
  • 工作中是否选用？看leader：选择项目使用的技术
  • 开发时间：一般情况是，快于1+1

其他

  • 如果直接使用js也是能够实现效果的，只不过可能代码较多
  • 直到CSS3中推出了媒体查询：就是可以通过css去获取一些设备的信息

多媒体查询

-CSS2多媒体查询

  • @media 规则在CSS2中有介绍，针对不同的媒体类型可以定制不同的样式规则。

  • CSS3多媒体查询

    • CSS2的多媒体查询继承了CSS2多媒体类型的所以思想：取代了查找设备的类型，CSS3根据设置自适应显示。
    • 媒体查询可用于检测很多事情，例如：
      • viewport(视窗)的宽度与高度
      • 设备的宽度与高度
      • 朝向(智能手机横屏，竖屏)。
      • 分辨率
    • 目前很多针对iOS、Android手机，平板等设备都会用到多媒体查询。
    • 浏览器支持：chrome21.0，IE9.0，firefox3.5，safari4.0，opare
    • 媒体查询的基础语法：
      • 设备的屏幕尺寸大于等于480的时候，使用括号内的样式
      • 也遵循层叠样式表的
      • 为了避免样式覆盖
      • 可以修改先后顺序
    • 实例：
      @media screen and (min-width: 480px) {
      #leftsidebar {
  		  width: 200px;
      float: left;
  	  }
    #main {
      margin-left: 216px;
    }
    }

bootstrap字体图标

  • 第一步：glyphicon
    • 设置图标的位置
    .glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  line-height: 1;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
  • 第二步：glyphicon-barcode
    • 设置图标内容
    .glyphicon-barcode:before {
  content: "\e040";
}

前端框架

有一对预定义的代码

  • html，css
  • 也有一部分封装的js

可以直接使用

  • 直接使用定义好的class
  • 直接使用它定义好的html层次结构（组件）

也可以改参数使用

bootstrap

  • 2.x：早期的，目前很难看到
  • 3.x：目前较为流行的版本，其中使用较多的是3.3.5
  • 4.x：在测试中，更为侧重于移动端

全局CSS样式

  • 设置全局 CSS 样式；基本的 HTML 元素均可以通过 class 设置样式并得到增强效果；还有先进的栅格系统。

  • Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。

  • Bootstrap 是移动设备优先的。针对移动设备的样式融合进了框架的每个角落，而不是增加一个额外的文件。

  • 为了确保适当的绘制和触屏缩放，需要在 之中添加 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">

  • 预定义的CSS样式

    • 直接将需要的类添加给对应的标签，就可以得到想要的效果

  • 栅格系统

    • Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin 用于生成更具语义的布局。

    • 栅格

    • .container（固定宽度）

      • row，column
      • 在某个范围内取值是一定的

    • .container-fluid（100%宽度）

      • row，column
      • 会根据父盒子进行适当的缩放

    • 默认将一行分为12份，在col后面对应的数字表示该单元格占几份

    • 如果超过了12换行

    • 如果想要在不同的品目宽度上，实现不同的布局，可以通过添加col-lg、col-md、col-sm、col-xs

    • 如果只写了col-lg，那么会在小于1200的宽度下占一行

    • 如果只写了col-lg col-md，那么会在小于992的宽度下占一行

    • 如果只写了col-lg col-md col-ms，那么会在小于768的宽度下占一行

    • 如果只写了col-lg col-md col-ms col-xs，会在对应的屏幕宽度下使用设置的值

    • 实例：从堆叠到水平排列

    • 栅格的好处

    • 示例：微金所顶部通栏

      • 栅格搭好框架
      • 内部的子元素以及子元素的布局还是使用自己手写css的方式
posted on 2018-03-11 17:23  luoyu113  阅读(160)  评论(0)  编辑  收藏  举报

Copyright © 2024 luoyu113
Powered by .NET 8.0 on Kubernetes Powered By博客园