新疆18选7官方网站:做響應式網站離不開css響應式布局查詢代碼寫法

css響應式布局代碼編寫演示

做響應式網站離不開css響應式布局查詢代碼寫法,為了方便以后備用,今天總結了一下css3響應網站設計布局媒體查詢,適應手機、ipod、電腦PC網站版本。

1.首先要了解一下什么是媒體查詢

18选7走势图300期 www.gcfyd.icu 媒體查詢可以讓我們根據設備顯示器的特性(如視口寬度、屏幕比例、設備方向:橫向或縱向)為其設定CSS樣式,媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color (等)。使用媒體查詢,可以在不改變頁面內容的情況下,為特定的一些輸出設備定制顯示效果。

2.如何在css中引入媒體查詢

媒體查詢寫在CSS樣式代碼的最后,CSS是層疊樣式表,在同一特殊性下,靠后的的樣式會重疊前面的樣式


?咳咳?;氐懔?br /> ?
?

3.開始在html中寫入Media

1.在html頭部添加以下代碼,用來顯示兼容移動設備的顯示效果

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

參數詳解:
?。width=device-width :寬度等于當前設備的寬度
?。initial-scale=1 :初始的縮放比例。(默認為1)
?。minimum-scale=1 :允許用戶縮放到的最小比例。(默認為1)
?。maximum-scale=1 :允許用戶縮放到的最大比例。(默認為1)
?。user-scalable=no :用戶是否可以手動縮放(默認為no)
2.引入包含Media的css文件

?一般情況html和css代碼都是分開寫的,media也不例外

<link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/>
<link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/>

3.寫Media中的代碼

?以某個網頁的響應式布局為例

結構:@media 設備類型 and (設備特性){樣式代碼}

/*媒體查詢*/
/*當頁面大于1200px 時,大屏幕,主要是PC 端*/
@media (min-width: 1200px) {
    
}
/*在992 和1199 像素之間的屏幕里,中等屏幕,分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {
    #adver .center {
        width: 50%;
        margin: -10px 0 0 -25%;
    }
    main .center h2 {
        font-size: 40px;
    }
}
/*在768 和991 像素之間的屏幕里,小屏幕,主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
    #adver .center {
        width: 60%;
        margin: -10px 0 0 -30%;
    }
    #adver .search, #adver .button {
        font-size: 20px;
    }
    main .center h2 {
        font-size: 35px;
    }
}
/*在480 和767 像素之間的屏幕里,超小屏幕,主要是手機*/
@media (min-width: 480px) and (max-width: 767px) {
    header, header .center, header .link {
        height: 45px;
    }
    header .logo, .sm-hidden,.sidebar,.md-hidden {
        display: none;
    }
    header .link {
        width: 100%;
        line-height: 45px;
    }
    #adver {
        padding: 45px 0 0 0;
    }
    #adver .center {
        width: 70%;
        height: 53px;
        margin: -10px 0 0 -35%;
    }
    #adver .search, #adver .button {
        height: 45px;
        font-size: 18px;
    }
    .sm-visible {
        display: block;
    }
    main .center h2 {
        font-size: 30px;
    }
    main .center p {
        font-size: 15px;
    }
    main figure {
        width: 49.2%;
    }
}
/*在小于480 像素的屏幕,微小屏幕,更低分辨率的手機*/
@media (max-width: 479px) {
    header, header .center, header .link {
        height: 45px;
    }
    header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden  {
        display: none;
    }
    header .link {
        width: 100%;
        line-height: 45px;
    }
    header .link li {
        width: 25%;


    }
    #adver {
        padding: 45px 0 0 0;
    }
    #adver .center {
        width: 80%;
        height: 48px;
        margin: -10px 0 0 -40%;
    }
    #adver .search, #adver .button {
        height: 40px;
        font-size: 16px;
    }
    .sm-visible {
        display: block;
    }
    footer .bottom, footer .version {
        font-size: 13px;
    }
    main .center h2 {
        font-size: 26px;
    }
    main .center p {
        font-size: 14px;
    }
    main figure {
        width: 99%;
    }
}

響應式布局的原理就是在不同的窗口大小下顯示不同的結構和樣式。只要掌握好css的樣式,響應式布局就沒問題(≧▽≦)/啦啦啦

 

?最后再補充一點常用的設備類型(媒體類型)
1.all (所有的設備)
2.screen (電腦顯示器)
3.print (打印用紙或打印預覽圖)
4.handheld (便攜設備)
5.tv (電視機類型的設備)

 

下次見,、么么噠(????)~~



作者:洞聽
鏈接:https://www.jianshu.com/p/eb1123d5b20b
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯系作者獲得授權并注明出處。