移动端:项目实战

项目实战


一、flexible.js库

  1. 作用
    • flexible是淘宝推出的弹性布局方案,可以解决移动端设备适配问题
  2. 功能
    • 添加<meta>标签,并动态改写 <meta> 标签
    • 给 <html> 元素添加 data-dpr 属性,并且动态改写 data-dpr 的值
    • 给 <html> 元素添加 font-size 属性,并且动态改写 font-size 的值
  3. flexible.js下载:https://github.com/amfe/lib-flexible
  4. 使用步骤
    • 项目中引入flexible.js、视口标签不要写
    • css写法
      • 单位大小都根据750设计稿的尺寸,转换成rem单位的值,转换方法为:设计稿尺寸 / 设计稿基准字体大小
      • 设计稿基准字体大小 = 设计稿宽度 / 10,如设计稿宽为750,设计稿基准字体大小为75;设计稿宽为640,设计稿基准字体大小为64;(淘宝的方案是可以在任意设计稿尺寸下使用的)

二、 iScroll框架

  1. 解决痛点
    • iScroll会诞生,主要是因为无论是在iphone、ipad、android 或是更早前的移动webkit上都没有提供一种原生的方式来支持在一个固定高度的容器内滚动内容 
    • 上述情况导致所有web-app要模拟成app的样子时,只能由一个绝对定位的header 或是footer再加上一个可以内容滚动的中间区域组成
    • iScroll框架解决的痛点就是可以模拟这个缺失的功能,提供了一种类似于原生的方式支持在一个固定高度的容器内滚动内容
  2. 官网
  3. 兼容性
    • iPhone/Ipod touch >=3.1.1
    • iPad >=3.2
    • Android >=1.6
    •  Desktop Webkit, Firefox, Opera 等
  4. 特性
    • 拉动刷新、精确捕捉元素
    • 速度和性能提升
    • 兼容性问题
  5. 项目中主要作用
    • iScroll框架的本身功能-模拟app功能
    • 处理移动端的兼容性问题,还能在速度和性能上提升项目
    • 至于框架本身的参数方法我们这里不用

三、 Less使用

四、 动画库  animate.css库

  1. 解决痛点
    • 自行设计比较复杂动画效果的时候,比较浪费时间,效率比较低
    • 为了有效地去完成各种动画效果,于是就把比较常用的一些动画效果写到了一个动画库里面,方便大家去完成css3动画
  2. 简介
    • animate.css内置了很多典型的css3动画,兼容性好,使用方便,可以跨浏览器使用的一个动画库。很值得我们在需要写动画的项目中使用
    • https://daneden.github.io/animate.css/
  3. 动画库使用方法
    1. 第一种
      • 首先引入animate.css库文件
      • 给指定的元素加上指定的动画样式名
      • <div class="animated shake"></div>  这里包括两个class名,第一个是基本的,必须添加的样式名,任何想实现动画的元素都得添加这个类名。第二个是指定的动画样式名
      • 如果说想给某个元素动态添加动画样式,可以通过jquery来实现
      • $(‘#demoId‘).addClass(‘animated shake‘)
    1. 第二种
      • 不需引入animate.css库文件
      • 通过效果展示找到所需动画名称,打开动画库,通过名称找到所需效果代码
      • 把动画库中的效果代码直接拷贝到自己的css中
      • 自己添加animation规则使用即可
    2. 两种方法比较:
      • 第一种会造成代码冗余,使用起来简单
      • 第二种不会有代码冗余,使用起来相对复杂,但是仍然推荐第二种方式

原文地址:https://www.cnblogs.com/guisenbin/p/10454423.html

时间: 2024-10-03 14:45:30

移动端:项目实战的相关文章

妙味WEB前端开发全套视频教程+项目实战+移动端开发(99G)

一共99GB的视频教程,全部存于百度网盘中,13个栏目,每个栏目里还划分有独立的小栏目 最基本的web前端学习介绍,到项目实战,再到移动端的开发,真正彻底掌握前端开发的精髓: 视频教程在线预览:(百度网盘,大家可以自行保存下,不用下载,自己看) 此教程绝对够全够完整,也因为内容较多,大家不可能真的全部看完,选择自己薄弱的环节,多看看.多测试下. 下载地址:http://fu83.cn/thread-52-1-1.html

第31章 项目实战-PC端固定布局8

第31 章项目实战-PC 端固定布局[8]学习要点:1.归类合并2.子导航 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.归类合并在前面几节课中,有一部分HTML 代码比较松散,没有统一到一个类别块里.比如:很多的标签超链接没有归类到UL 里,导致一些问题等.//松散的<a>标签<a href="###">曼谷(12)</a><a href="###">东京

第31章 项目实战-PC端固定布局7

第31 章项目实战-PC 端固定布局[7]学习要点:1.侧栏制作2.详细代码 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.侧栏制作本节课,主要设计一下内容页面的侧栏部分,分三个小块.经过思考,侧栏会包含一些图片,而主要部分也会包含图片,那么侧栏放在左边可能会和主栏的图片冲突导致不协调,所以,我们把侧栏更换到右边.//实际上,还去掉了高度,让其自适应#container {width: 1263px;margin: 30px auto

第31章 项目实战-PC端固定布局3

第31 章项目实战-PC 端固定布局[3]学习要点:1.搜索区2.插入大图3.搜索框 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.搜索区本节课,我们接着header 头部往下,来设计一块搜索区.这个区域,可以是广告大图,也可以是用户注册,也可以是一个搜索条,都是一个大幅背景,内嵌一个表单.具体造型如下:从表面上来分析,就是插入一张背景大图,然后居中一个搜索条.但是,我们要求最小在1280 分辨率.最大在1920 分辨率能保持最佳的观

第31章 项目实战-PC端固定布局5

第31 章项目实战-PC 端固定布局[5]学习要点:1.底部区域2.说明区域3.版权及证件区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.底部区域本节课,我们将探讨一下首页中最底部的区域.这部分区域由两个部分组成,一个是说明内容,有:合作伙伴.旅游FAQ 和联系方式,还有一个就是版权声明及各种手续证件编号.//底部区域父元素<footer id="footer">...</footer>//底部父元

第32 章项目实战-移动端流体布局3

第32 章项目实战-移动端流体布局[3]学习要点:1.搜索部分2.旅游部分3.媒体查询 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局.一.搜索部分搜索部分包含三个内容,背景区块.文本框和按钮.//HTML 部分<div id="search"><input type="text" class="search" placeholder="请输入旅游景点或城市"

第32 章项目实战-移动端流体布局6

第32 章项目实战-移动端流体布局[6]学习要点:1.旅游资讯2.机票预定 本章主要开始如果通过第一个PC 端项目进行重构,设计成移动端可访问的页面,这个项目采用的是流体布局.一.旅游资讯这个如果做成移动端,那么一切从简,否则缩小时就无法容纳太多的文字.//html,布局和PC 端差不多<figure><img src="img/tour1.png" ><figcaption><hgroup><h2 class="titl

第31章 项目实战-PC端固定布局4

第31 章项目实战-PC 端固定布局[4]学习要点:1.热门旅游区2.标题介绍区3.旅游项目区 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.热门旅游区本节课,我们将探讨一下首页最核心的部分,旅游区.这块内容由两个部分组成,一个是大标题,表示热门旅游区域.其次就是旅游项目的图片展示区域.具体如下://热门旅游区父元素<div id="tour">...</div>//旅游父元素#tour {width

第31 章项目实战-PC 端固定布局10

第31 章项目实战-PC 端固定布局[10]学习要点:1.机票预定2.代码详解 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.机票预定机票预定页面,具体如下:二.代码详解//全部代码<form action="###"><h2>机票预定</h2><div class="type"><p>航程类型<mark>单程</mark>

第31章 项目实战-PC端固定布局9

第31 章项目实战-PC 端固定布局[8]学习要点:1.资讯内容2.代码详解 本章主要开始使用学习用HTML5 和CSS3 来构建Web 页面,第一个项目采用PC 端固定布局来实现.一.资讯内容和首页一样,只不过这里,布局方式有所不同,具体如下:二.代码详解//全部代码<figure class="tour"><img src="img/tour1.jpg" alt="曼谷-芭提雅6 日游"><figcaption&