css 響應式（媒介查詢）

ningwang 發布于2019-08-29 16:07 / 3503人閱讀

摘要：來實現響應式實現響應式網站的布局要用到的就是中的媒體查詢接下來來簡單介紹一下類型條件條件二樣式我們只需用到衍生出的這個屬性，定義輸出設備中的頁面可見區域寬度來控制該改變的樣式即可。

1.CSS 來實現響應式

CSS實現響應式網站的布局要用到的就是CSS中的媒體查詢接下來來簡單介紹一下：

@media 類型 and (條件1) and (條件二){css樣式}

我們只需用到width衍生出的max-width這個屬性，定義輸出設備中的頁面可見區域寬度來控制該改變的樣式即可。
html代碼如下：

demo01.css樣式如下：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:20%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:55%;
    background-color:gray;
    float:left;
    height:300px;
    margin:0 2.5%;
}
.right{
    width:20%;
    background-color:yellow;
    float:left;
    height:300px;
}

demo02的樣式如下：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    height:400px;
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:30%;
    background-color:orange;
    float:left;
    height:300px;
}
.center{
    width:70%;
    background-color:gray;
    float:left;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}

demo03的樣式：

body{
    margin:0;
    text-align:center;
}

.header{
    height:100px;
    background-color:red;
}
.container{
    background-color:pink;
}
.clearfix:after{
    display:block;
    content:"";
    visibility:hidden;
    height:0;
    clear:both;
}
.footer{
    height:100px;
    background-color:blue;
}
.left{
    width:100%;
    background-color:orange;
    height:300px;
}
.center{
    width:100%;
    background-color:gray;
    height:300px;
}
.right{
    width:100%;
    background-color:yellow;
    height:300px;
}

效果圖：

窗口大于1024px時顯示的樣子

當大于640小于980時，右側欄在底部

當小于480時，導航欄折疊，body三部分豎直排列顯示，若窗口持續縮小，不在發生變化，區域被壓縮

效果總圖：

持續更新，歡迎大家！

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

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

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

css 響應式（媒介查詢）

摘要：來實現響應式實現響應式網站的布局要用到的就是中的媒體查詢接下來來簡單介紹一下類型條件條件二樣式我們只需用到衍生出的這個屬性，定義輸出設備中的頁面可見區域寬度來控制該改變的樣式即可。 1.CSS 來實現響應式 CSS實現響應式網站的布局要用到的就是CSS中的媒體查詢接下來來簡單介紹一下： @media 類型 and (條件1) and (條件二){css樣式} 我們只需用到widt...

OBKoro1 2019-08-02 11:00 評論0 收藏0
Web移動端頁面 --響應式和動態REM

摘要：當媒介最大寬度為且是橫屏時里面的樣式生效目前前端開發項目類型可以分為兩種方式，和。這樣我們的響應式網頁才完全生效了。移動端特點移動端特點沒有有沒有滾動條沒有沒有因為移動端是沒有事件的所以當我們在需要兼容移動端的頁面中應該盡量少用事件。鄙人最近才剛剛開始學習一些關于移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。響應式什么是響應式頁面呢？顧名思義響應式頁面就是能做...

BLUE 2019-04-23 13:44 評論0 收藏0
面試前端時遇到的CSS題目

摘要：昨天面試了本地的一家公司，面試的前端。行內元素，不可設置寬高其實正確答案應該是設置無效，單行顯示直到一行排列不下，才會換新一行。頭部有固定的高度像素，內容容器是像素而側邊欄是像素。它根據條件告訴瀏覽器如何為指定視圖寬度渲染頁面。昨天面試了本地的一家公司，面試的Web 前端。題目共有CSS和JS兩部分，因為我對于CSS不是很熟悉，所以這里就只列出CSS相關的筆試題，僅供學習。盒模型的...

kycool 2019-08-29 12:18 評論0 收藏0
css相關 - 收藏集 - 掘金

摘要：在正式前端一些小細節前端掘金英文原文，翻譯未來的太讓人興奮了一方面，是全新的頁面布局方式另一方面，是酷炫的濾鏡顏色等視覺效果。老司機教你更好的進行編程個技巧前端掘金并不總是容易處理。 CSS3 實現文字流光漸變動畫 - 前端 - 掘金來自百度前端技術學院的實踐任務：有趣的鼠標懸浮模糊效果，參考：http://ife.baidu.com/course/d...，用CSS3實現了一下，順便...

molyzzx 2019-08-29 12:38 評論0 收藏0
響應式布局設計

摘要：詳細講解響應式布局響應式設計網格系統響應式實用工具響應式設計的步驟設置標簽通過媒介查詢來設置樣式設置多種試圖寬度設置標簽大多數移動瀏覽器將頁面放大為寬的視圖以符合屏幕分辨率。詳細講解響應式布局Bootstrap 響應式設計Bootstrap 網格系統Bootstrap 響應式實用工具響應式設計的步驟設置 Meta 標簽通過媒介查詢來設置樣式 Media Queries 設置多...

Drinkey 2019-08-29 15:04 評論0 收藏0