如何實現響應式佈局

1，響應式佈局：簡而言之，就是一個網站能夠相容於多個終端機－而不是為每個終端機做一個特定的版本。這個概念是為解決行動網路瀏覽而誕生的。

2，三種實現反應式佈局的方法

    1. CSS3-Media Query（最簡單的方式，但是無法滿足很多需求）

    2. 使用原生Javascript（成本高，不建議使用）

#    3. 第三方開源框架（例如bootstrap,可以很好的支援瀏覽器的響應式佈局）

3，CSS3-Media Query常見屬性

       device-width,device-height      螢幕寬高

       width,height  

       width,height  

       width,height ” ##       orientation      裝置方向

       resolution       裝置解析度

#1Media

MediaMedia

MediaMedia

MediaMedia

Media

Media
Media

Media

Media

Media

MediaMedia
MediaMedia

###Media######Media######Media######Media######Media######Media######Media######Media######Media######Media##### ###     外接CSS語法與內嵌樣式的語法############     範例：外嵌樣式表link.css(當螢幕寬度小於等於480px時背景呈紅色)#### ########               link.css語法只有一句話：body{background: red;}########################### ######5，Bootstrap##################      使用bootstrap必須引入css和js文件，總共三個，且順序不能反(版本可以換)，如下圖###############

            <script src="js/jquery.min.js"></script>
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <script src="js/bootstrap.min.js"></script>

以上是如何實現響應式佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！