“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”的核心，就是CSS3引入的 Media Query模塊它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件上面的代碼意思是，如果屏幕寬度小于400像素maxdevicewidth 400px，就加載tinyScreencss文件如果屏幕寬度在400像素到600像素之間，則加載smallScreencss文件除了用html標(biāo)簽。

4不支持css3html5的腦殘瀏覽器特別是lt=ie8系列則需要用js以及resize事件來(lái)控制html的布局標(biāo)簽寬度了 5寬度自適應(yīng)需要對(duì)每個(gè)顯示模塊進(jìn)行不同寬度的計(jì)算，在做html布局時(shí)需要大量的計(jì)算與適配 6寬度自適應(yīng)為不同寬度顯示器寫(xiě)布局元素時(shí)常用的css。

html5中是通過(guò)css3的backgroundsize來(lái)控制自適應(yīng)的backgroundsize神奇之處就在于它的自我調(diào)整能力我以前常常擔(dān)心當(dāng)瀏覽器窗口發(fā)生變化，當(dāng)有resize事件發(fā)生時(shí)，頁(yè)面會(huì)出現(xiàn)不可預(yù)測(cè)的變化但backgroundsize卻能根據(jù)客戶端瀏覽器的大小自我的調(diào)整適應(yīng)backgroundsize在火狐瀏覽器， Safari瀏覽器。

解決辦法，CSS代碼修改如下col2 background#F63 boxflex1 webkitboxflex1 mozboxflex1 width 0% * 加上這行代碼 * #col3 background#690 boxflex3 webkitboxflex3 mozboxflex3 width 0% * 加上這行代。

3支持css3html5的高級(jí)瀏覽器可以利用CSS3 Media Queries讓網(wǎng)頁(yè)在不同分辨率下自動(dòng)調(diào)節(jié)布局標(biāo)簽 4不支持css3html5的腦殘瀏覽器特別是lt=ie8系列則需要用js以及resize事件來(lái)控制html的布局標(biāo)簽寬度了 5寬度自適應(yīng)需要對(duì)每個(gè)顯示模塊進(jìn)行不同寬度的計(jì)算，在做html布局時(shí)需要大量的計(jì)算與適配6。

1首先打開(kāi)html5編輯器，新建一個(gè)html文件，在里面寫(xiě)入一個(gè)button按鈕，被button按鈕設(shè)置一個(gè)樣式，這里給它的class屬性設(shè)置為btn2在上方引入style標(biāo)簽，在里面設(shè)置btn類的樣式，這里設(shè)置寬度和高度使用width和height屬性就可以了，最后在美化一下按鈕，設(shè)置背景色和字體顏色以及文字橘子效果3最后。

HTML5與CSS3深度探索全能開(kāi)發(fā)指南HTML5和CSS3作為現(xiàn)代網(wǎng)頁(yè)開(kāi)發(fā)的核心工具，革新了網(wǎng)頁(yè)設(shè)計(jì)和交互體驗(yàn)本文將帶你走入它們的奧秘，詳細(xì)解讀新增特性使用策略以及應(yīng)對(duì)挑戰(zhàn)的技巧，助你提升開(kāi)發(fā)技能HTML5的新篇章語(yǔ)義化標(biāo)簽 header， nav， section， article， aside， main， footer等，賦予網(wǎng)頁(yè)結(jié)構(gòu)新的。

“自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)”的核心，就是CSS3引入的Media Query模塊它的意思就是，自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的CSS文件上面的代碼意思是，如果屏幕寬度小于400像素maxdevicewidth 400px，就加載tinyScreencss文件如果屏幕寬度在400像素到600像素之間，則加載smallScreencss文件除了用html標(biāo)簽。