網上關於響應式設計的教程好複雜,我寫一個簡版的。 簡單說呢就針對不同的屏幕分辨率應用不同的CSS樣式。比如在電腦、Pad設備上,屏幕比較寬,就可以一行放2個Div。到了手機上,或者Pad豎着拿的的時候,一行就只放1個Div。 這裏有2個關鍵點:
以上兩點都應該不依賴與JS。 實現第一點依靠的是流式佈局。就是所有參與佈局的DIV都用float:left,寬度都用百分比表示。比如下圖,黃色部分的寬度是60%,橘色寬度是40%。 如果將黃色和橘色的寬度都width=100%,那麼從1行變成2行了,如下圖。從而實現不修改Dom實現佈局變化。 那麼如何不使用JS而實現動態調整CSS樣式就是第二個關鍵點。 HTML5中提供了一種新的CSS語法——@media,學名是Media Query,可以爲不同的分辨率設定不同的樣式。 CSS 上面這段代碼的含義就是當屏幕寬度小於等於320像素時應用大括號中的樣式。 下圖是在CSS生效時在瀏覽器中的效果: @media還有一些更復雜的用法,比如: CSS 這段語句就是針對iPhone橫屏的。即,瀏覽器寬度在321-480像素之間,且方向是“橫向”時生效。 不過自從Retina這中妖豔的屏幕推出,分辨率已經不能代表世界的真相了。小小的Note3的分辨率比一些17“顯示的分辨率還高。 所以還有必要判斷一下設備的像素密度-device-pixel-ratio。 CSS 比如上面的語句就是判斷終端的像素比是2的話,所渲染的樣式。可以適用於iPhone4,iPhone5等設備。 除了上述兩點,還需要在頁面上增加一個viewport的meta標籤,否則在手機上可能會有頁面自動縮放的情況。例如: HTML 總結一下:響應式佈局有三個關鍵點:
具體細節就請大家自己研究相關的語法了。 Media Query的語法比較複雜,這裏個大家推薦一個工具,可以方便的設計佈局,並可以針對各種設備自動生成Media Query的語句: http://www.responsivewebcss.com/ 轉載自:AlloyTeam |
想學習超流行的響應式設計?來看看這篇教程
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.