| CSS

CSS查漏补缺（五）-页面布局 响应式设计

最近懒癌发作，《CSS设计指南》这本书花了几周终于看完了。这应该是最后一片CSS查漏补缺笔记了~

三栏-固定宽度布局

demo
为固定宽度的盒子设置内外边距边框都会把盒子撑大，从而影响浮动效果。
解决办法：

  • 重设宽度以抵消内外边距和边框
  • 给容器内部嵌套一个盒子，在此盒子上设置内外边距和边框
  • 使用CSS3的box-sizing:border-box;属性

三栏-中栏流动布局-负外边距实现

demo
CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
*{
          margin: 0;
          padding: 0;
      }
      #main_wrapper{
          min-width: 770px;
          max-width: 1200px;
          margin: 0 auto;
      }
      header{
          background-color: #e02e1f;
          height: 80px;
      }
      header h1{
          line-height: 80px;
          height: 80px;
          text-align: center;
          font-size: 2.5em;
          color: #ffffff;
          font-family: 'Dancing Script', cursive;
      }
      #threecolwrap{
          float: left;
          width: 100%;
          background-color: #83e075;
      }
      #twocolwrap{
          float: left;
          width: 100%;
          margin-right: -210px;
      }
      nav{
          width: 150px;
          float: left;
          background-color: #83e075;
          padding: 10px 0;
      }
      nav > *{
          margin: 0 10px;
      }
      nav li{
          list-style: none;
      }
      nav li a{
          color: #ffffff;
          text-decoration: none;
      }
      article{
          width: auto;
          margin-left: 150px;
          margin-right: 210px;
          background-color: #e0c363;
          padding: 10px 0;
      }
      article > *{
          margin: 0 10px;
      }
      aside{
          width: 210px;
          float: left;
          padding: 10px;
          box-sizing: border-box;
      }
      footer{
          background-color: #787f6f;
          width: 100%;
          clear: both;
      }

三栏-中栏流动布局-CSS3单元格实现

demo
CSS代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
*{
    margin: 0;
    padding: 0;
}
body{
    min-width: 760px;
}
header{
    background-color: #e02e1f;
    height: 80px;
}
header h1{
    line-height: 80px;
    height: 80px;
    text-align: center;
    font-size: 2.5em;
    color: #ffffff;
    font-family: 'Dancing Script', cursive;
}
nav{
    width: 150px;
    background-color: #83e075;
    padding: 10px;
    display: table-cell;
}
nav li{
    list-style: none;
}
nav li a{
    color: #ffffff;
    text-decoration: none;
}
article{
    background-color: #e0c363;
    padding: 10px;
    display:table-cell ;
}
aside{
    width: 210px;
    background-color: #e06470;
    padding: 10px;
    display: table-cell;
}
footer{
    background-color: #787f6f;
}

响应式设计

响应式设计三要素

  • 媒体查询：是一种CSS语法，可以根据浏览器的特性，一般是屏幕或浏览器宽度提供CSS规则
  • 流式布局：是使用em或百分比等相对单位设定页面的总体宽度，让布局能够随屏幕大小而缩放；
  • 弹性图片：是使用相对单位确保图片再大也不会超过其容器

    媒体查询

    媒体类型：
  • all:匹配所有设备
  • handler:匹配手持设备
  • print:匹配打印预览模式
  • screen:匹配屏幕大小（常用）

媒体特性：

  • min-device-width和max-device-width:匹配设备屏幕尺寸
  • min-width和max-width：匹配视口的宽度，例如浏览器窗口的宽度
  • orientation（值为portrait和landscape）：匹配设备是横屏还是竖屏。
    使用逻辑运算符and,not,or及关键字all,only组合媒体类型和媒体特性

用标签设定视口
<meta name="viewport" content="width=device-width; maximumscale=1.0" />
这个meta标签告诉浏览器按照屏幕宽度来显示网页，不要缩小网页。