響應式布局

響應式布局可以讓乙個**相容不同解析度的裝置，並且可以給使用者帶來更好地視覺體驗

優點：解決了裝置之間的差異化展示

缺點：①相容性**多，工作量大，載入速度受影響

②對原有**布局會產生影響，使用者判斷未必精確

①移動優先

在設計的初期就要考慮到頁面在多終端的展示

②漸進增強

充分發揮硬體裝置的最大功能

①css3-media query（最簡單方式）

可以根據不同的維度，比如使用者的解析度，實際視窗的大小等來給使用者做不同的ui介面展示，但一些低端瀏覽器並不支援css3，比如ie8及以下版本的瀏覽器

②借助原生js（成本高，不推薦）

③第三方的開源框架（可以很好地支援瀏覽器的響應式布局設計）

可以減少很多**的開發量，減少很多額外的相容性的工作量

常見屬性：

device-width,device-height ——螢幕寬高（設計的物理寬高）

width,height ——渲染視窗寬高（指的是瀏覽器的實際的視窗寬高大小）

orientation ——裝置方向

resolution ——裝置解析度（由dpi來決定）

基本語法：

①外聯css語法

②內嵌樣式的語法

bootstrap是乙個移動優先的前端框架，使用它可以寫非常少的**，即可實現多終端的頁面適配（使用bootstrapclass命名是一定不能和它原有的命名重複）

待更新。。。

響應式布局 響應式布局技巧

一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...

響應式布局

裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...

響應式布局

首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...