最后還有一個(gè)不可或缺的東東,那就是meta標(biāo)簽,可以說,在響應(yīng)式設(shè)計(jì)中如果沒有這個(gè)meta標(biāo)簽,你就是蹩腳的,響應(yīng)式設(shè)計(jì)就是空談。
個(gè)meta標(biāo)簽被稱為可視區(qū)域meta標(biāo)簽,其使用方法如下。
<meta name=”viewport” content=”” />
在content屬性中主要包括以下屬性值,用來處理可視區(qū)域。
在實(shí)際項(xiàng)目中,為了讓Responsive設(shè)計(jì)在智能設(shè)備中能顯示正常,也就是瀏覽Web頁面適應(yīng)屏幕的大小,顯示在屏幕上,可以通過這個(gè)可視區(qū)域的meta標(biāo)簽進(jìn)行重置,告訴他使用設(shè)備的寬度為視圖的寬度,也就是說禁止其默認(rèn)的自適應(yīng)頁面的效果,具體設(shè)置如下:
<meta name=”viewport” content=”width=device-width,initial-scale=1.0” />
另外一點(diǎn),由于Responsive設(shè)計(jì)是結(jié)合CSS3的Media Queries屬性,才能盡顯Responsive設(shè)計(jì)風(fēng)格,但大家都清楚,在IE6-8中完全是不支持CSS3 Media。下面我們一起來看看CSS3 Meida Queries在標(biāo)準(zhǔn)設(shè)備上的運(yùn)用,大家可以把這些樣式加到你的樣式文件中,或者單獨(dú)創(chuàng)建一個(gè)名為“responsive.css”文件,并在相應(yīng)的條件中寫上你的樣式,讓他適合你的設(shè)計(jì)需求。
腳本下載地址:
media-queries.js(http://code.google.com/p/css3-mediaqueries-js/) respond.js(https://github.com/scottjehl/Respond) <!—[if lt IE9]> <scriptsrc=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script> ?<![endif]>
本部分無練習(xí)內(nèi)容。
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報(bào)