html中怎么寫響應式布局代碼

這篇文章主要講解了“html中怎么寫響應式布局代碼”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“html中怎么寫響應式布局代碼”吧！

　　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屬性用于設置查詢方法

　　下面是一個簡單的響應式的布局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;

　　}

　　樣式代碼

　　.right{

　　float:none;

　　width:100%;

　　background:#f0f;

　　clear:both;

　　}

　　.left{

　　width:30%;

　　}

　　.center{

　　width:70%;

　　}

　　.main{

　　height:800px;

　　}

　　樣式代碼

　　.left,.center,.right{

　　float:none;

　　width:100%;

　　}

　　當窗口大于1024px 時，指揮被壓縮，并不會發生其他變化：

　　當窗口小于1024px，大于720px的時候，右側欄取消浮動，在下邊顯示：

　　當窗口小于720px的時候，左中右三欄，全都取消浮動，寬度100%：

感謝各位的閱讀，以上就是“html中怎么寫響應式布局代碼”的內容了，經過本文的學習后，相信大家對html中怎么寫響應式布局代碼這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！