建站學堂

襄陽網(wǎng)站建設告訴你-用CSS如何實現(xiàn)響應式布局

建站學堂

2571次

字體： 小 中 大

第一： 直接在CSS文件中使用

@media 類型 and (條件1 最小) and (條件二 最大)

{

css樣式

}

第二：使用@import導入

@import url("css/moxie.css") all and (max-width:980px);

 

第三，也是最常用的：使用link連接，media屬性用于設置查詢方式

我們只需用到max-width這個屬性，定義輸出設備中的頁面可見區(qū)域?qū)挾葮邮郊纯伞?/span>



  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>響應式布局title>
  6. <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
  7. <meta name="format-detection" content="telephone=no,email=no"/>
  8. <link rel="stylesheet" type="text/css" href="css/mo2.css"/>
  9. head>
  10. <body>
  11. <div>
  12. <header id="head">
  13. <ul>
  14. <li>header1li>
  15. <li>header2li>
  16. <li>header2li>
  17. <li>header2li>
  18. <li>header2li>
  19. ul>
  20. <div>icondiv>
  21. header>
  22. <section id="main">
  23. <div class="left">
  24. left
  25. div>
  26. <div class="center">
  27. center
  28. div>
  29. <div class="right">
  30. right
  31. div>
  32. section>
  33. <footer id="foot">
  34. footer
  35. footer>
  36. div>
  37. body>
  38. html>

這是CSS樣式


  1. *{

  2.     margin: 0px;

  3.     padding: 0px;

  4.     font-family: "微軟雅黑";

  5. }

  6. #head,

  7. #foot,

  8. #main

  9. {

  10.     height: 100px;

  11.     width: 1200px;

  12.     /*width: 85%;*/

  13.     background-color: goldenrod;

  14.     text-align: center;

  15.     font-size: 48px;

  16.     line-height: 100px;

  17.     margin: 0 auto;

  18. }

  19. #head div{

  20.     display: none;

  21.     font-size: 20px;

  22.     height: 30px;

  23.     width: 100px;

  24.     background-color: green;

  25.     float: right;

  26.     line-height: 30px;

  27.     margin-top: 35px;

  28. }

  29. #head ul{

  30.     width: 80%;

  31. }

  32. #head ul li{

  33.     width: 20%;

  34.     float: left;

  35.     text-align: center;

  36.     list-style: none;font-size: 20px;

  37. }

  38. #main{

  39.     height: auto;

  40.     margin: 10px auto;

  41.     overflow: hidden;

  42. }

  43. .left,

  44. .center,

  45. .right{

  46.     height: 600px;

  47.     line-height: 600px;

  48.     float: left;

  49.     width: 20%;

  50.     background-color: red

  51. }

  52. .center{

  53.     width: 60%;

  54.     border-left: 10px solid #FFF;

  55.     border-right: 10px solid #FFF;

  56.     box-sizing: border-box;

  57. }

  58. @media only screen and (max-width: 1200px) {

  59.     #head,

  60.     #foot,

  61.     #main{

  62.     width: 100%;

  63.     }

  64. }

  65. @media only screen and (max-width: 980px) {

  66.     .right{

  67.         display: none;

  68.     }

  69.     .left{

  70.         width: 30%;

  71.     }

  72.     .center{

  73.         width: 70%;

  74.         border-right: hidden;

  75.     }

  76. }

  77. @media only screen and (max-width: 640px) {

  78.     .left,

  79.     .center,

  80.     .right{

  81.         width:

    [聲明]原創(chuàng)不易，請轉(zhuǎn)發(fā)者備注下文章來源（hbsjsd.cn）【速建時代】。