襄阳网站建设告诉你-用CSS如何实现响应式布局

建站学堂     |      2019-12-05 | 阅读数:103次

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

@media 类型 and (条件1 最小) and (条件二 最大)

{

css样式

}

第二:使用@import导入

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

 

第三,也是最常用的:使用link连接,media属性用于设置查询方式

我们只需用到max-width这个属性,定义输出设备中的页面可见区域宽度样式即可。



  1. <html>

  2. <head>

  3. <meta charset="UTF-8">

  4. <title>响应式布局title>

  5. <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />

  6. <meta name="format-detection" content="telephone=no,email=no"/>

  7. <link rel="stylesheet" type="text/css" href="css/mo2.css"/>

  8. head>

  9. <body>

  10. <div>

  11. <header id="head">

  12. <ul>

  13. <li>header1li>

  14. <li>header2li>

  15. <li>header2li>

  16. <li>header2li>

  17. <li>header2li>

  18. ul>

  19. <div>icondiv>

  20. header>

  21. <section id="main">

  22. <div class="left">

  23. left

  24. div>

  25. <div class="center">

  26. center

  27. div>

  28. <div class="right">

  29. right

  30. div>

  31. section>

  32. <footer id="foot">

  33. footer

  34. footer>

  35. div>

  36. body>

  37. 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: 100%;

  82.         display: block;

  83.         height: 200px;

  84.         line-height: 200px;

  85.     }

  86.     .center{

  87.         border: hidden;

  88.         border-top: 10px  solid #FFFFFF;

  89.         border-bottom: 10px solid #FFFFFF;

  90.         height: 600px;

  91.         line-height: 600px;

  92.     }

  93.     #head ul{

  94.         display: none;

  95.     }

  96.     #head div{

  97.         display: block;

  98.     }

  99. }



窗口大于1200px时显示的样子

 

 

 窗口小于1200大于980时,只会被压缩,并不会发生其他变化

 

 

当大于640小于980时,右侧栏隐藏

 

 

当小于640时,导航栏折叠,body三部分竖直排列显示,若窗口持续缩小,不在发生变化,区域被压缩

 

 


襄阳网站建设告诉你-用CSS如何实现响应式布局

移动端扫描浏览

网站优化、网站建设、APP开发、小程序开发