響應(yīng)式布局是就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端,而不是為每個(gè)終端做一個(gè)特定的版本枣抱。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的久锥,響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn),而且隨著目前大屏幕移動(dòng)設(shè)備的普及乎莉,可以說響應(yīng)式的布局是大勢(shì)所趨,現(xiàn)在越來越多的網(wǎng)站開始采用響應(yīng)式的布局方案
?使用響應(yīng)式布局的優(yōu)點(diǎn)比較明顯奸笤,就是面對(duì)不同分辨率設(shè)備靈活性強(qiáng)惋啃,還有就是能夠快捷解決多設(shè)備顯示適應(yīng)問題,也就是在非響應(yīng)式web設(shè)計(jì)中监右,多設(shè)置中訪問視覺不統(tǒng)一边灭,非最佳視覺,
而在響應(yīng)式設(shè)計(jì)中能達(dá)到多終端視覺和操作體驗(yàn)非常風(fēng)格統(tǒng)一健盒。并且可以做到兼容當(dāng)前和未來設(shè)備绒瘦,另外響應(yīng)式web設(shè)計(jì)中的大部分技術(shù)都可以用在WebApp開發(fā)中,這是是現(xiàn)在比較流行的開發(fā)模式味榛。還可以節(jié)約開發(fā)成本椭坚,維護(hù)成本也輕松很多。
?當(dāng)然也存在缺點(diǎn)搏色,像兼容各種設(shè)備工作量大善茎,效率低下;代碼累贅频轿,會(huì)出現(xiàn)隱藏?zé)o用的元素垂涯,加載時(shí)間加長(zhǎng)(相比較手機(jī)定制網(wǎng)站,流量稍大航邢,但比較加載一個(gè)完整pc端網(wǎng)站顯然是小得多)耕赘;多方面因素影響而達(dá)不到最佳效果;在一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)膳殷,會(huì)出現(xiàn)用戶混淆的情況操骡。所以是否在你的產(chǎn)品中使用響應(yīng)式布局方案可以折衷考慮。
在CSS3中的Media Queries模塊中支持對(duì)外部樣式表的引用赚窃,
使用方法類型如下代碼:
@importurl(color.css) screen and (min-width:1000px);
或:
media="only screen and (max-width: 480px),only screen and
(max-device-width: 480px)"href="link.css"rel="externalnofollow" />/*使用link導(dǎo)入外部css文件*/
簡(jiǎn)寫:
上面使用中only可省略册招,限定于計(jì)算機(jī)顯示器,第一個(gè)條件max-width是指渲染界面最大寬度勒极,第二個(gè)條件max-device-width是指設(shè)備最大寬度是掰。