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

自適應和響應式布局

---

一、 自適應

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

二、 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：切換效果

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

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

四、 媒體查詢

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

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

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

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

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

五、 響應式布局優缺點

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

六、 與自適應的區別

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

七、 rem響應式布局

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

八、 使用rem開發響應式布局步驟

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

九、總結