html5+css3適配問題（手機、平板、PC）
阿新 • • 發佈：2018-12-23
隨著網際網路的快速發展，以及html5+css3的迅速崛起。漸漸的響應式佈局，也會慢慢的出現在我們的視野裡，身為專業的web前端人員，還不學習新技術你就out啦！為什麼這樣說呢？因為響應式佈局能同時相容多個終端，比如（手機、平板、PC）做一個網站轉眼間就可以變成3個網站，和現在相比是不是更加具有優勢呢!
可能有些人對“什麼是響應式佈局”還不是很瞭解，下面就跟大家簡單說下什麼是響應式佈局：
響應式佈局：簡單點說，就是做一個網站同時能相容多個終端，由一個網站轉變成多個網站，為我們大大節省了資源。
那麼響應式佈局的優點和缺點又有哪些呢？
優點：1.面對不同解析度裝置靈活性強
2.能夠快捷解決多裝置顯示適應問題
缺點：不能完全相容所有瀏覽器，程式碼累贅，載入時間加長。
說了這麼多，可能還有很多人，不明白響應式佈局該怎麼去做，以及它的開發原理是什麼？
原理：簡單點說響應式佈局它是通過CSS中Media Query（媒介查詢）@media功能，來判斷我們的終端裝置寬度在多少畫素內，然後就執行與之對應的CSS樣式。
下面我就以我最近做的一個簡單的響應式佈局框架為案列給大家講講：
程式碼如下：
通過上面程式碼可知：它是通過@media媒介查詢判斷來執行的CSS樣式，也就是說：如果我要做一個響應式佈局網站，同時相容手機、平板、PC的話就得寫三個與之對應的CSS樣式，通過@media媒介查詢來完成響應式佈局。
值得注意的是：在手機裝置上，我們要禁止使用者來縮放螢幕。不禁止的話，可能在顯示上會造成錯位，以及顯示的不是手機網站的樣式。所以，我們要通過程式碼來禁止使用者在手機端上縮放螢幕，已達到正常的手機網站效果。
禁止程式碼如下:
1
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
加在頭部標籤裡
寫在最後：以上純屬個人對響應式佈局的理解，隨著技術的更新，我們還不學習一些新技術，那麼等待我們的就是淘汰。
本文由段亮部落格原創出品，如需轉載請註明出處
本文出處：http://www.duanliang920.com/learn/web/html5/252.html
可能有些人對“什麼是響應式佈局”還不是很瞭解，下面就跟大家簡單說下什麼是響應式佈局：
響應式佈局：簡單點說，就是做一個網站同時能相容多個終端，由一個網站轉變成多個網站，為我們大大節省了資源。
那麼響應式佈局的優點和缺點又有哪些呢？
優點：1.面對不同解析度裝置靈活性強
2.能夠快捷解決多裝置顯示適應問題
缺點：不能完全相容所有瀏覽器，程式碼累贅，載入時間加長。
說了這麼多，可能還有很多人，不明白響應式佈局該怎麼去做，以及它的開發原理是什麼？
原理：簡單點說響應式佈局它是通過CSS中Media Query（媒介查詢）@media功能，來判斷我們的終端裝置寬度在多少畫素內，然後就執行與之對應的CSS樣式。
下面我就以我最近做的一個簡單的響應式佈局框架為案列給大家講講：
程式碼如下：
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>響應式佈局</title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> *{margin:0;padding:0;text-decoration:none;list-style:none; font-size:14px;font-family:"微軟雅黑";text-align:center; color:#fff;} .clear{clear:both;} #header,#content,#footer{margin:0 auto;margin-top:10px;} #header,#footer{margin-top:10px;height:100px;} #header,#footer,.left,.right,.center{background:#333;} /*通用樣式*/ /*手機*/ @media screen and (max-width:600px){ #header,#content,#footer{width:400px;} .right,.center{margin-top:10px;} .left,.right{height:100px;} .center{height:200px;} } /*平板*/ @media screen and (min-width:600px) and (max-width:960px){ #header,#content,#footer{width:600px;} .right{display:none;} .left,.center{height:400px;float:left;} .left{width:160px;margin-right:10px;} .center{width:430px;} } /*PC*/ @media screen and (min-width:960px){ #header,#content,#footer{width:960px;} .left,.center,.right{height:400px;float:left;} .left{width:200px;margin-right:10px;} .center{width:540px;margin-right:10px;} .right{width:200px;} } </style> </head> <body> <!--header start--> <div id="header">header</div> <!--end header--> <!--content start--> <div id="content"> <div>left</div> <div>center</div> <div>right</div> <div></div> </div> <!--end content--> <!--footer--> <div id="footer">footer</div> <!--end footer--> </body> </html>
通過上面程式碼可知：它是通過@media媒介查詢判斷來執行的CSS樣式，也就是說：如果我要做一個響應式佈局網站，同時相容手機、平板、PC的話就得寫三個與之對應的CSS樣式，通過@media媒介查詢來完成響應式佈局。
值得注意的是：在手機裝置上，我們要禁止使用者來縮放螢幕。不禁止的話，可能在顯示上會造成錯位，以及顯示的不是手機網站的樣式。所以，我們要通過程式碼來禁止使用者在手機端上縮放螢幕，已達到正常的手機網站效果。
禁止程式碼如下:
1
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
加在頭部標籤裡
寫在最後：以上純屬個人對響應式佈局的理解，隨著技術的更新，我們還不學習一些新技術，那麼等待我們的就是淘汰。
本文由段亮部落格原創出品，如需轉載請註明出處
本文出處：http://www.duanliang920.com/learn/web/html5/252.html