CSS實現(xiàn)響應式布局的方法
發(fā)布時間：2018-07-24 15:53:49 作者：酷酷的波 
我要評論
我要評論這篇文章主要介紹了CSS實現(xiàn)響應式布局的方法的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
用CSS實現(xiàn)響應式布局
響應式布局感覺很高大上，很難，但實際上只用CSS也能實現(xiàn)響應式布局
要用的就是CSS中的沒接查詢，下面就介紹一下怎么運用：
使用@media 的三種方法
1.直接在CSS文件中使用：
@media 類型 and (條件1) and (條件二){
css樣式
}
@media screen and (max-width:1024px) {
body{
background-color: red;
}
}
2.使用@import導入
@import url("css/moxie.css") all and (max-width:980px);
3.也是最常用的方法--直接使用link連接，media屬性用于設置查詢方法
<link rel="stylesheet" type="text/css" href="css/moxie.css" media=“all and (max-width=980px)”/>
下面是一個簡單的響應式的布局HTMl代碼：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>響應式</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>
</head>
<body>
<div class="header">頭部</div>
<div class="main clearfix">
<div class="left">左邊</div>
<div class="center">中間</div>
<div class="right">右邊</div>
</div>
<div class="footer">底部</div>
</body>
</html>
下面是CSS樣式：
*{
margin:0;
padding:0;
text-align:center;
color:yellow;
}
.header{
width:100%;
height:100px;
background:#ccc;
line-height:100px;
}
.main{
background:green;
width:100%;
}
.clearfix:after{
display:block;
height:0;
content:"";
visibility:hidden;
clear:both;
}
.left,.center,.right{
float:left;
}
.left{
width:20%;
background:#112993;
height:300px;
font-size:50px;
line-height:300px;
}
.center{
width:60%;
background:#ff0;
height:400px;
color:#fff;
font-size:50px;
line-height:400px;
}
.right{
width:20%;
background:#f0f;
height:300px;
font-size:50px;
line-height:300px;
}
.footer{
width:100%;
height:50px;
background:#000;
line-height:50px;
}
<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>樣式代碼
.right{
float:none;
width:100%;
background:#f0f;
clear:both;
}
.left{
width:30%;
}
.center{
width:70%;
}
.main{
height:800px;
}
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>樣式代碼
.left,.center,.right{
float:none;
width:100%;
}
當窗口大于1024px 時，指揮被壓縮，并不會發(fā)生其他變化：
當窗口小于1024px，大于720px的時候，右側欄取消浮動，在下邊顯示：
當窗口小于720px的時候，左中右三欄，全都取消浮動，寬度100%：
好了，布局就這么簡單，細節(jié)的把握還靠不斷地練習。持續(xù)更新，歡迎大家指教
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
- 這篇文章主要介紹了詳解使用CSS3的@media來編寫響應式的頁面,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-01
- 下面小編就為大家?guī)硪黄猚ss3 media 響應式布局的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-03
- 響應式網(wǎng)站設計的理念就是頁面的設計與開發(fā)應當根據(jù)用戶行為以及設備環(huán)境進行相應的響應和調(diào)整，這篇文章就帶大家簡單了解一下響應式設計，感興趣的小伙伴們可以參考一下2016-07-15
- 下面小編就為大家?guī)硪黄猚ss3media響應式布局實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-08
像素密度與CSS3的viewport在移動端Web響應式布局中的運用
viewport是CSS3中調(diào)整縮放的利器,特別適用于移動端Web界面的操作與布局,接下來我們就來詳解像素密度與CSS3的viewport在移動端web響應式布局中的運用.2016-05-27- CSS3的rem屬性除了設置字體大小,還經(jīng)常被用來做頁面布局中的很多尺寸控制,這里我們就來看一下使用CSS3的rem屬性制作響應式頁面布局的要點解析2016-05-24
- 這篇文章主要介紹了自適應屏幕的CSS響應式布局設計技巧總結,響應式設計是現(xiàn)在移動端頁面開發(fā)的熱門話題,需要的朋友可以參考下2016-04-22
- 下面小編就為大家?guī)硪黄褂肅SS媒體查詢創(chuàng)建響應式布局教程。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家個參考。一起跟隨小編過來看看吧2016-03-29
- 這篇主要講利用css3設計一個響應式設計的菜單。單擊列表圖標，當你顯示屏大小可以完全水平放下所有菜單項時，菜單水平顯示。當你的顯示屏不能水平放置所有菜單項時，菜單垂2014-11-05
css3的@media屬性實現(xiàn)頁面響應式布局示例代碼
使用css3的@media屬性可以實現(xiàn)頁面響應式布局，下面有個不錯的示例，大家可以參考下2014-02-10