秦小

CSSMM4E 笔记 - 3.15 - 响应式Web 设计

发表于 | 分类于

响应式 Web 设计基础 ref

三个主要idea:

  • flexible grids for layout
  • flexible media for images and videos
  • CSS media queries to create diffrent styles for different screen widths

设置响应式的页面

<meta name="viewport" content-width="device-width">
指示浏览器设置其视口 (viewport) 宽度为设备 (device) 宽度.

媒体查询 (Media Queries) w3 ref

使用 Media Queries 的策略

设置断点 (Breakpoints)

Media queries 让你设置breakpoint来调整styles.

桌面优先 vs. 移动端优先

  • 桌面优先
  • 移动端优先

html 中创建媒体查询

1
2
3
<link href="css/small.css" rel="stylesheet" media="(max-width: 480px)">
<link href="css/medium.css" rel="stylesheet" media="(min-width: 481px) and (max-width: 768px)">
<link href="css/large.css" rel="stylesheet" media="(min-width: 769px)">

样式表中创建媒体查询

  • Use the @import directive

    1
    2
    3
    @import url(css/base.css); /* no media query, applies to all */
    @import url(css/medium.css) (min-width:481px) and (max-width:768px);
    @import url(css/small.css) (max-width:480px);

  • Embed the media query in the style sheet

    1
    2
    3
    4
    5
    6
    7
    8
    @media (max-width: 480px) {
      body {
        /* style properties go here */
      }
      .style1 {
        /* style properties go here */
      }
    }

基本的样式表结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Put your reset styles here */
/* Put styles for **DESKTOP** and basic styles for all devices here */
body {
  /* properties for body here */
}
/ *medium display only */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    /* properties that only apply to tablets */
  }
}
/* small display only */
@media (max-width: 480px) {
  body {
    /* properties that only apply to **PHONES** */
  }
}

移动端优先

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* Put your reset styles here */
/* Put styles for **MOBILE** and basic styles for all devices here */
body {
  /* properties for body here */
}
/ *medium display only */
@media (min-width: 481px) and (max-width: 768px) {
  body {
    /* properties that only apply to tablets */
  }
}
/* large display only */
@media (min-width: 769px) {
  body {
    /* properties that only apply to **DESKTOP** */
  }
}

弹性网格

例子: two-column design

1
2
3
4
5
6
7
8
<div class="columns">
  <div class="one-third">
    ...content goes here...
  </div>
  <div class="two-thirds">
    ...content goes here...
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* CSS styles to create fluid layout */
.columns {
  width: auto; /* same as 100% */
  max-width: 1200px;
}
.columns:after { /* See "Use the Micro Clear Fix" */
  content: "";
  clear: both;
  display: table;
}
.one-third {
  float: left;
  width: 33%;
}
.two-thirds {
  float: left;
  width: 67%;
}

HTML 源码顺序很重要

Desktop => phone: Float columns side by side => top to bottom

Rest the Box Model

为国避免 Float drops,

1
2
3
* {
  box-sizing: border-box;
}

将固定宽度转为弹性网格

element width / container width = result

流式图片

尽管flexible columns会隨屏幕变窄, 但图片通常不会.

两步设置流式图片

  1. 最大宽度

    1
    img { max-width: 100%; }

  2. 删去 <img> 标签的 height and width 属性

    1
    <img src="bunny.jpg" width="320" height="200" alt="bunny">

    into:

    1
    <img src="bunny.jpg" alt="bunny">

上述方法假设, 让所有images 填满列宽的.
或许, 你想让图片比列小一些:

1
2
3
4
5
6
7
<img class="imgSmal imgLeft" src"bunny.jpg" alt="bunny" >
.imgSmall {
  max-width: 40%;
}
.imgLeft {
  float: left;
}

流式图片的缺点

在小屏上仅缩小尺寸, 而不是用更小的图片代替, 不省流量.
解决方法1: responsive-images-in-practice
解决方法2: Adaptive images

视频 和 Flash

1
2
3
img, video, embed, object {
  max-width: 100%;
}

videos using iframe: Responsive-Design-Create-Fluid-YouTube-amp-Vimeo-Content
Embed Responsively service: embedresponsively