移動端：自適應和響應式佈局

自適應和響應式佈局

---

1、 自適應

1. 自適應體驗    http://m.ctrip.com/html5/
2. 自適應：爲了解決在不一樣大小的設備上呈現相同的網頁
3. 如何實現
• 自適應主要是指的寬度的自適應
• 百分比的流式佈局

2、 swiper插件

1. 網站    http://www.swiper.com.cn/
2. 定義：開源、免費、強大的移動端觸摸滑動插件
3. 做用
• 純javascript打造的滑動特效插件，面向手機、平板電腦等移動終端
• 能實現觸屏焦點圖、觸屏Tab切換、觸屏多圖切換等經常使用效果
4. 案例    http://www.swiper.com.cn/demo/index.html
5. 使用方法    http://www.swiper.com.cn/usage/index.html
• 加載插件     swiper.min.js和swiper.min.css文件
• HTML內容
• 初始化Swiper：最好是挨着</body>標籤
• 若是不能寫在HTML內容的後面，則須要在頁面加載完成後再初始化
6. API     http://www.swiper.com.cn/api/index.html
• Swiper4.x的所有配置選項、方法、函數
• Basic（Swiper通常選項）
• speed：切換速度
• 組件
• effect：切換效果

3、響應式設計（RWD，Responsive Web Design）

1. 由伊桑·馬科特（Ethan Marcotte）提出
2. 將三種已有的開發技術整合起來，並命名
• 彈性佈局
• 彈性圖片
• 媒體和媒體查詢

4、 媒體查詢

1. 媒體查詢(Media Queries)
• 媒體類型  All     Screen
• 引入方式
  • @media方式 
  • link方法
• 媒體特性
  • 是CSS3對媒體類型的加強版
  • 能夠將媒體特性當作：媒體類型（判斷條件）+ CSS（符合條件的樣式規則）

  • 語法：@media  媒體類型  and  （媒體特性）{  CSS樣式 }

• 關鍵詞
  • and：同時知足這二者時生效，到達限定範圍
  • only：指定某種特定的媒體類型，能夠用來排除不支持媒體查詢的瀏覽器

  • not：排除某種指定的媒體類型，即排除符合表達式的設備

2. 兼容性
   1. 移動終端上通常對css3支持比較好的高級瀏覽器不須要考慮響應式佈局的媒體查詢的兼容問題
   2. IE8及如下版本瀏覽器不支持媒體查詢

5、 響應式佈局優缺點

1. 優勢
• 不一樣分辨率設備靈活性強
• 多終端視覺和操做體驗好
• 響應式web設計中的大部分技術均可以用在WebApp開發中
• 節約開發成本，維護成本也輕鬆不少
2. 缺點
• 兼容各類設備工做量大，效率低下
• 代碼累贅，會出現隱藏無用的元素，加載時間加長

6、 與自適應的區別

• 響應式的概念覆蓋了自適應，可是包括的東西更多。響應式佈局能夠根據屏幕的大小自動的調整頁面的展示方式，以及佈局
• 自適應仍是暴露出一個問題，若是屏幕過小，即便網頁可以根據屏幕大小進行適配，也會感受在小屏幕上查看，內容過於擁擠
• 響應式解決了自適應佈局的問題。它能夠自動識別屏幕寬度、並作出相應調整，佈局和展現的內容可能會有所變更

7、 rem響應式佈局

• 若是移動端頁面只在移動端訪問，那麼使用rem能夠實現響應式佈局
• 實現原理
• 動態改變 html的font-size值的大小，來完成rem實現響應式佈局
• rem 的值都是根據html的fontsize進行計算的
• 統一縮放元素大小，只要修改html的fontsize

8、 使用rem開發響應式佈局步驟

• 從Ui設計師拿到設計稿，通常尺寸都是以iphone 6的尺寸爲準 750*1334（638*1136）
• 在樣式中給html設定一個fontsize的值，咱們通常設置一個方便後續計算的值，例如10px、100px等，咱們使用100px
• 寫樣式
• 徹底按照設計稿的尺寸來寫樣式，設計稿上的長度、height、margin、padding、字體的值是多少，咱們就寫多少，這樣能夠100%還原設計稿
• 注意：須要把獲得的像素值/100px,轉換爲rem單位
• 根據當前屏幕的寬度和設計稿的寬度來從新計算html的FontSize的大小
• 根據當前屏幕寬度和設計稿的寬度的比例，動態計算當前寬度下的fontsize值大小，若是fontsize值改變了，以前設定的全部的rem單位的值自動會跟着改變

9、總結