移動端：項目實戰

時間  2019-11-18
標籤 移動 項目 實戰 欄目 無線 简体版
原文   原文鏈接

項目實戰

1、flexible.js庫

  1. 做用
    • flexible是淘寶推出的彈性佈局方案，能夠解決移動端設備適配問題
  2. 功能
    • 添加<meta>標籤，並動態改寫 <meta> 標籤
    • 給 <html> 元素添加 data-dpr 屬性，而且動態改寫 data-dpr 的值
    • 給 <html> 元素添加 font-size 屬性，而且動態改寫 font-size 的值
  4. 使用步驟
    • 項目中引入flexible.js、視口標籤不要寫
    • css寫法
      • 單位大小都根據750設計稿的尺寸，轉換成rem單位的值，轉換方法爲：設計稿尺寸 / 設計稿基準字體大小
      • 設計稿基準字體大小 = 設計稿寬度 / 10，如設計稿寬爲750，設計稿基準字體大小爲75；設計稿寬爲640，設計稿基準字體大小爲64；（淘寶的方案是能夠在任意設計稿尺寸下使用的）

2、 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功能
    • 處理移動端的兼容性問題，還能在速度和性能上提高項目
    • 至於框架自己的參數方法咱們這裏不用

3、 Less使用

4、 動畫庫  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. 兩種方法比較：
      • 第一種會形成代碼冗餘，使用起來簡單
      • 第二種不會有代碼冗餘，使用起來相對複雜，可是仍然推薦第二種方式
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程