媒體查詢響應式設計

yanbingyun1990 發布于2019-08-02 11:00 / 917人閱讀

摘要：一媒體查詢作用使用查詢，你可以針對不同的媒體類型定義不同的樣式。可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

一、媒體查詢

<1>作用

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

<2>使用方式1

<(min-width:1024px)>代表當視口的寬大于1024px時所表現的狀態,一般用與PC端；
<(max-width:1024px) and (min-width:680px)>代表當視口的寬大于680px小于1024px時所表現的狀態，一般用與paid；
<(max-width:680px）>代表視口大小小于680px是所表現的狀態，一般用于手機；
<2>使用方式2
@medis screen and (max-width:600px){

body{
    background-color:red;
}

}
@medis screen and (max-width:960px){

body{
    background-color:yelow;
}

}
@medis screen and (min-width:600px) and (max-width:960px){

body{
    background-color:blue;
}

}

二、響應式設計

（1）<效果圖>

（PC端）

（paid顯示器沒PC的大所以中間放不下三個div就把右邊的移到下邊）

（手機端顯示器相對于其他倆個最小，中間的部分只能放一個div說以只能讓三個div豎直排列）
（2）代碼如下：



    
        
        響應式設計
        
        
        
        
        
        
    
    
        這是頭部
        
            這是右邊
            這是中間
            這是左邊
        
        這是最下面的
    


.hidden{
    height:100px;
    background:red;
}
.content{
    height:100%;
    background:green;
    overflow:hidden;
}
.footer{
    height:100px;
    background:blue;
}
.right{
    width:20%;
    height:300px;
    float:left;
    background:#ff0;
}
.center{
    width:55%;
    height:300px;
    margin:0 2.5%;
    float:left;
    background:#0ff;
}
.left{
    width:20%;
    height:300px;
    float:left;
    background:#f0f;
}

（PC端）
----------
body{
    margin:0;
}
.hidden{
    height:100px;
    background:red;
}
.content{
    height:100%;
    background:green;
    overflow:hidden;
}
.footer{
    height:100px;
    background:blue;
}
.right{
    width:20%;
    height:300px;
    float:left;
    background:#ff0;
}
.center{
    width:75%;
    height:300px;
    margin:0 2.5%;
    float:left;
    background:#0ff;
}
.left{
    width:100%;
    height:300px;
    /* float:left; */
    background:#f0f;
    clear:both;
    padding:10px 0px;;
}

paid
----------


body{
    margin:0;
}
.hidden{
    height:100px;
    background:red;
}
.content{
    height:100%;
    background:green;
    overflow:hidden;
}
.footer{
    height:100px;
    background:blue;
}
.right{
    width:100%;
    height:300px;
    background:#ff0;
}
.center{
    width:100%;
    height:300px;
    background:#0ff;
}
.left{
    width:100%;
    height:300px;
    background:#f0f;
}

手機
----------

當你停下來休息的時候，不要忘記別人還在奔跑。

GPU云服務器云服務器響應式設計響應式響應式布局響應式網站

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52700.html

響應式布局的實現

摘要：響應式布局的概念響應式布局，即，在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。框架實現響應式布局利用中柵格系統可以簡單實現響應式布局，這里就需要去理解一下啥是柵格系統代表在端上顯示在一行的個柵欄，也就是一半。響應式布局的概念響應式布局，即 Responsive design，在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏...

syoya 2019-08-30 10:55 評論0 收藏0
談談響應式布局

摘要：今天在這里就略微談一下響應式布局吧想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一接下來我們從小到大來談談響應式網頁設計的基本原則為什么為什么需要響應式設計想必這點不說大家都能想到答案現在是一個移動為先的時代我們要今天在這里就略微談一下響應式布局吧,想必大家都知道響應式布局已經在這個移動端為主流的時代成為了避不開的話題之一,接下來我們從小到大來談談響應式網頁...

smallStone 2019-08-29 11:30 評論0 收藏0
響應式web設計--媒體查詢

摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如...

Eric 2019-08-29 16:07 評論0 收藏0
響應式web設計--媒體查詢

摘要：媒體查詢的用法媒體查詢包含一個可選的媒體類型和，滿足規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為或。還有一個與眾不同的是，在其他瀏覽器中不要像其他屬性一樣在不同的瀏覽器中添加前綴。媒體查詢的用法 media 媒體查詢包含一個可選的媒體類型和，滿足CSS3規范的條件下，包含零個或多個表達式，這些表達式描述了媒體特征，最終會被解析為true或false。如...

Salamander 2019-08-02 11:00 評論0 收藏0
媒體查詢響應式設計

摘要：一媒體查詢作用使用查詢，你可以針對不同的媒體類型定義不同的樣式。可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。一、媒體查詢作用使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。 @media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設...

worldligang 2019-08-29 16:07 評論0 收藏0