雲南雲豹網絡科技股份有限公司

爲企業創品牌·從營銷型網站建設開始·互赢懂(dǒng)技術·更懂(dǒng)品牌營銷

24小時(shí)熱(rè)線

159 7210 9576027-89992189

您的(de)位置:首頁 > 新聞資訊 > 行業百科 > 技術百科

響應式設計簡介

作者:龍 時(shí)間:2018-07-25 浏覽:

網上的(de)教程好複雜(zá),我寫一個(gè)簡版的(de)。

簡單說呢(ne)就針對(duì)不同的(de)屏幕分(fēn)辨率應用(yòng)不同的(de)CSS樣式。比如在電腦(nǎo)、Pad設備上,屏幕比較寬,就可(kě)以一行放2個(gè)Div。
到了(le)手機上,或者Pad豎著(zhe)拿的(de)的(de)時(shí)候,一行就隻放1個(gè)Div。
 
這(zhè)裏有2個(gè)關鍵點:
一是如何在不修改Dom結構的(de)前提下(xià)調整布局。
二是如何判斷屏幕分(fēn)辨率并應用(yòng)對(duì)應的(de)CSS。
 
以上兩點都應該不依賴與JS。
 
實現第一點依靠的(de)是流式布局。就是所有參與布局的(de)DIV都用(yòng)float:left,寬度都用(yòng)百分(fēn)比表示。比如下(xià)圖,黃(huáng)色部分(fēn)的(de)寬度是60%,橘色寬度是40%。
寬
 
 
如果将黃(huáng)色和(hé)橘色的(de)寬度都width=100%,那麽從1行變成2行了(le),如下(xià)圖。從而實現不修改Dom實現布局變化(huà)。
窄
 
 
那麽如何不使用(yòng)JS而實現動态調整CSS樣式就是第二個(gè)關鍵點。
HTML5中提供了(le)一種新的(de)CSS語法——@media,學名是Media Query,可(kě)以爲不同的(de)分(fēn)辨率設定不同的(de)樣式。
 

上面這(zhè)段代碼的(de)含義就是當屏幕寬度小于等于320像素時(shí)應用(yòng)大(dà)括号中的(de)樣式。下(xià)圖是在CSS生效時(shí)在浏覽器中的(de)效果:

 

css
 
@media還(hái)有一些更複雜(zá)的(de)用(yòng)法,比如:

這(zhè)段語句就是針對(duì)iPhone橫屏的(de)。即,浏覽器寬度在321-480像素之間,且方向是“橫向”時(shí)生效。

 

不過自從Retina這(zhè)中妖豔的(de)屏幕推出,分(fēn)辨率已經不能代表世界的(de)真相了(le)。小小的(de)Note3的(de)分(fēn)辨率比一些17“顯示的(de)分(fēn)辨率還(hái)高(gāo)。
所以還(hái)有必要判斷一下(xià)設備的(de)像素密度-device-pixel-ratio。
 
比如上面的(de)語句就是判斷終端的(de)像素比是2的(de)話(huà),所渲染的(de)樣式。可(kě)以适用(yòng)于iPhone4,iPhone5等設備。
 
除了(le)上述兩點,還(hái)需要在頁面上增加一個(gè)viewport的(de)meta标簽,否則在手機上可(kě)能會有頁面自動縮放的(de)情況。例如:
總結一下(xià):響應式布局有三個(gè)關鍵點:
1、流式布局 Liquid Layout
2、Media Query
3、viewport
 
具體細節就請大(dà)家自己研究相關的(de)語法了(le)。
 
Media Query的(de)語法比較複雜(zá),這(zhè)裏個(gè)大(dà)家推薦一個(gè)工具,可(kě)以方便的(de)設計布局,并可(kě)以針對(duì)各種設備自動生成Media Query的(de)語句:

最新動态

常見問題百寶箱

全國服務熱(rè)線

027-89992189

掃一掃關注微信

Copyright 2013-2020 All Rights Reserved 雲南雲豹網絡科技股份有限公司

獲取品牌營銷方案

快(kuài)速填寫

馬上獲取

互聯網低成本創名牌從此開始!