這篇文章主要介紹響應(yīng)式布局的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司，提供網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)，網(wǎng)頁設(shè)計，建網(wǎng)站，PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);可快速的進(jìn)行網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展；專業(yè)做搜索引擎喜愛的網(wǎng)站，是專業(yè)的做網(wǎng)站團(tuán)隊，希望更多企業(yè)前來合作!

響應(yīng)式

響應(yīng)式：根據(jù)不同的設(shè)備、不同的寬度、不同的特性、對頁面上內(nèi)容的樣式做出相應(yīng)的調(diào)整

媒詢  媒體查詢
    顯示設(shè)備

    @media
        只有滿足所有查詢條件的時候，里面的樣式才會被解析

    all         所有媒體
    braille     盲文觸覺設(shè)備
    embossed    盲文打印機(jī)
    print       手持設(shè)備
    projection  打印預(yù)覽
    screen      彩屏設(shè)備
    speech      ‘聽覺’類似的媒體類型
    tty         不適用像素的設(shè)備
    tv          電視

    and  用來鏈接多個查詢條件

    min-width :  大于等于
    max-width:   小于等于

寫一個范圍，在這個范圍內(nèi)使用這種樣式

 <style>
        @media screen and (min-width:1000px) and (max-width:1300px){            
        .box{                
        width:100px;                
        height: 100px;                
        background: #333333;            
        }
        }    
</style>

響應(yīng)式-像素比

媒體特性；
    min-width:1000px  當(dāng)屏幕寬度大于等于1000的時候會被解析
    max-width:1300px  當(dāng)屏幕寬度小于等于1300的時候會被解析

    -webkit-min-device-pixel-ratio  最小像素比
    -webkit-max-device-pixel-ratio  最大像素比

    orientation:portrait  
    （指定輸出設(shè)備中的頁面可見區(qū)域高度大于或等于寬度）
    orientation:landscape
    （除portrait值情況外，都是landscape）

<style>
        @media (-webkit-min-device-pixel-ratio:2) and (orientation:landscape){
                    .box{           
                             width:100px;                   
                             height: 100px;                    
                             background: #333333;            
                        }
        }   
</style>

響應(yīng)式引入的多種寫法

  @import "css/a.css" all and (min-width:800px);
        /* 寬度滿足800-999的時候，只會引入a.css樣式表 *        
        @import "css/b.css" all and (min-width:1000px);
        /* 寬度滿足1000-1199的時候，會同時引入a和b.css這兩個樣式表，后者覆蓋前者 *        
        @import "css/c.css" all and (min-width:1200px);        
        /* 寬度滿足1200的時候，會同時引入a和b、c.css這三個樣式表，后者覆蓋前者 */
        /* 同時會滿足多個樣式的查詢條件，這種方式引入樣式表要注意樣式表的順序 */

 @import "css/a.css" all and (min-width:800px) and (max-width:999px);        
 /* 寬度滿足800-999的時候，只會引入a.css樣式表 */
        @import "css/b.css" all and (min-width:1000px) and (max-width:1199px);        
        /* 寬度滿足1000-1199的時候，引入b.css樣式表*/
        @import "css/c.css" all and (min-width:1200px);        
        /* 寬度滿足1200的時候，引入c.css樣式表 */

        /* 因為同時只會滿足一個樣式表的查詢條件，所以不需要太注意順序 */

百分比布局

<style>
        .box{        
            width:100%;        
           }

        .item_long{          
          width:100%;        
          }

        .item_long img{     
               width:100%;        
               }

        .item{         
           width:46%;            
           height:270px;            
           float: left;        
           }

        .item:nth-child(even){     
               float: right;        
               }
        .item img{           
         width:100%;        
         }
    </style>
 <!--百分比布局適用于  布局不會發(fā)生改變  并且要求看到左右的內(nèi)容-->

當(dāng)值給百分比的時候，根據(jù)誰來計算
width  根據(jù)父級的寬度來來計算
height 根據(jù)父級的高度
margin 始終根據(jù)父級的寬度來計算
top    根據(jù)（定位_絕對定位）父級的高度來計算
left   根據(jù)（定位_絕對定位）父級的寬度來計算
padding根據(jù)父級的寬度來計算
translatX,Y  根據(jù)自身的寬高來計算
行高的表示方法 ： font:20px/1.2 ‘宋體’;  表示文字大小的1.2倍

以上是“響應(yīng)式布局的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前文章：響應(yīng)式布局的示例分析
文章出自：http://jinyejixie.com/article38/iisisp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、營銷型網(wǎng)站建設(shè)、企業(yè)建站、手機(jī)網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站設(shè)計

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)