karlew > CSS/CSS3样式 > 响应式网页的CSS写法

响应式网页的CSS写法

5-23 7,922 views

目前很多主流的前端框架都有响应式的控件样式，但有时为了响应式而引入框架没太大必要
响应式样式对前端新人来说可能不太熟悉，下面写了一个比较简单的响应式例子：
CSS:

  1. body{
  2.     padding: 0;
  3.     margin: 0;
  4. }
  5. .title{
  6.     display: none;
  7. }
  8. .container{
  9.     background-color: #E9E9EC;
  10.     text-align: center;
  11.     margin: 0 auto;
  12.     font-size: 20px;
  13. }
  14. /* PC或中大型笔记本设备 desktop */
  15. @media all and (min-width: 1201px) {
  16.     .title-desktop{
  17.         display: block !important;
  18.     }
  19.     .container {
  20.         width: 1100px;
  21.     }
  22. }
  23. /* 中小型笔记本或大平板 laptop */
  24. @media all and (min-width: 980px) and (max-width: 1200px) {
  25.     .title-laptop{
  26.         display: block !important;
  27.     }
  28.     .container {
  29.         width: 920px;
  30.     }
  31. }
  32. /* 中型平板或小型笔记本 tablet */
  33. @media all and (min-width: 768px) and (max-width: 979px) {
  34.     .title-tablet{
  35.         display: block !important;
  36.     }
  37.     .container {
  38.         width: 720px;
  39.     }
  40. }
  41. /* 手机或小平板 phone */
  42. @media all and (max-width: 767px) {
  43.     .title-phone{
  44.         display: block !important;
  45.     }
  46.     .container {
  47.         width: 90%;
  48.     }
  49. }

 

html:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>响应式网页css写法</title>
  7.     <link rel="stylesheet" type="text/css" href="style.css">
  8.     <!--[if (IE 6) | (IE 7) | (IE 8)  ]>
  9.     <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
  10.     <![endif]-->
  11. </head>
  12. <body>
  13.     <div class="container">
  14.         <div class="title title-desktop">
  15.             PC或中大型笔记本
  16.         </div>
  17.         <div class="title title-laptop">
  18.             中小型笔记本或大平板
  19.         </div>
  20.         <div class="title title-tablet">
  21.             中型平板或小型笔记本
  22.         </div>
  23.         <div class="title title-phone">
  24.             手机或小平板
  25.         </div>
  26.     </div>
  27. </body>
  28. </html>

 

演示地址：http://wx.karlew.com/xys/

需要注意的几点：
1.viewport 的 initial-scale=1.0要加上，不然手机上获取的是实际分辨率而不是浏览器分辨率
2.IE678不支持@media 规则，若要兼容，需要把响应式相关样式写到外部样式表中，并引入respond.js
3.实例中5个分辨率范围不可参考，实际生产中可看情况划分3~4个范围

版权属于: karlew

原文地址: https://www.karlew.com/archives/493

转载时必须以链接形式注明原始出处及本声明。

欢迎留言