1. 程式人生 > >靜態、自適應、流式、響應式

靜態、自適應、流式、響應式

OS 分享 col 優缺點 log pan 大小 設計 支持

靜態布局:頁面的寬高是固定的,超出頁面的內容用戶手動拖拽。手機端的話,另外設計一套。

自適應布局:用媒體查詢(@media)根據不同屏幕定義不同的寬高,比靜態布局少了用戶手動拖拽的幾率。

(因為媒體查詢範圍不能做到無窮的剛剛符合各個屏幕,頁面內容不多不多少的和屏幕大小一樣,不用到拖拽)

流式布局:頁面的寬度用百分比來分配,屏幕度數跨度太大頁面整體瀏覽效果不好,用戶體驗差(跨度可以說是從pc到手機)

響應式布局:是用了自適應的媒體查詢 和 流式布局的百分比相結合。(圖片、視頻用百分比。字體用rem或em)

響應式優缺點:

優:

  靈活性:面對不同分辨率設備靈活性強

  節省成本:不需要開發pc端和移動端兩套頁面

  SEO友好:pc端和移動端的公用一套頁面積累url用戶訪問和分享

缺:

  對老IE的不兼容:不支持媒體查詢

  瀏覽速度慢:兼容不同的分辨率設備,樣式隨之也會增多

靜態、自適應、流式、響應式