响应式设计

一个创建友好移动端网站的初学者教程.

“响应式设计”意味着你的网站显示在各个端应该都相似.他是一个网站设计和开发消除差异化的过程.

响应式通过media queries css完成.media queries检测用户设备告诉浏览器什么忽略或者什么显示什么.

Diagram: HTML content pointing to media queries, which point to mobile, tablet, and desktop devices

媒体查询让我们对同样的HTML内容展示不通的CSS布局.所以我们只要维护一份HTML就可以了.

我们逐渐可以发现,开发一个响应式布局还是挺容易的.自适应图片是另外一回事.

创建一个项目,命名responsive-design以及一个responsive.html.

代码如下

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Responsive Design</title>
    <link rel='stylesheet' href='styles.css'/>
  </head>
  <body>
    <!-- There's nothing here! -->
  </body>
</html>

同时需要下载一些图片为后面的章节使用download some images .解压到同样的文件下.

Screenshot: Atom’s file browser with project files in it

css media queries

我们会简单的根据设备宽度,更新body元素的背景颜色.这样会保证媒体查询可以工作.

Diagram: mobile device with red background, tablet with yellow background, desktop with blue background. Background colors set with media queries.

让我们区别一下,狭窄,中等和宽的布局.创建一个styles.css样式,添加下面内容:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Mobile Styles */
@media only screen and (max-width: 400px) {
  body {
    background-color: #F09A9D; /* Red */
  }
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
  body {
    background-color: #F5CF8E; /* Yellow */
  }
}

/* Desktop Styles */
@media only screen and (min-width: 961px) {
  body {
    background-color: #B2D6FF; /* Blue */
  }
}

当你调整你的浏览器大小,你会见到三种不同的背景颜色:大于960px蓝色,黄色,当尺寸在401px到960px之间,小于400px会是红色.

媒体查询每次起始于@media “at-rule”跟随一些条件语句,打大括号.在括号里放一些CSS,浏览器会根据条件显示.

补充:

At-rule

一、什么是at-rules

eg:@charset "utf-8";

at-rule 是CSS样式声明,以@开头,紧跟着是标识符(charset),最后以分号(;)结尾。

二、几个at-rules

1、@charset—定义被样式表使用的字符集

2、@import——告诉CSS引擎包含外部的CSS样式表

3、@namespace——告诉CSS引擎所有的内容都必须考虑使用XML命名空间前缀

4、嵌套at-rules

   (1)@media——条件组规则。如果设备符合标准定义的条件查询则使用该媒体

   (2)@font-face——描述了一个将从外部下载的字体

   (3)@keyframes——描述了中间步骤在CSS动画的序列

   (4)@page——描述了文件的布局变化,当要打印文档时。

   (5)@supports——条件组规则,如果浏览器满足给出的规则,则把它应用到内容中

   (6)@document——条件组规则,如果被用到文档的CSS样式表满足了给定的标准,那么将被应用到所有的内容中。

Diagram: media query composed of the @media at-rule, a media type, a media feature, then a bunch of ordinary CSS

only screen “media type” 意思是只有设备当前的窗口的样式会被启用.

相反的例子是CMD+P,浏览器的打印.min-width和max-width如字面意思.

其他的条件 other conditions .

 

一些设计的提示

现在让我们看看具体要实现哪种布局.下面是例子

Mockups of mobile, tablet, and desktop web pages

真实的场景,设计师会提供类似的模型(mockups).作为开发者是去事实对应的布局,通过media queries去应用不通的CSS规则.

一些良好设计的模式well defined patterns .我们选用其中的layout shifter.

作为开发者有两个必须明白的概念:

  • 一个“fluid”布局,会根据屏幕自适应的放大缩小.就像 flexible boxes
  • 一个‘fixed-width’固定宽度布局相反.宽度固定.

Diagram: fluid layout expanding to fill entire width of the browser, fixed-width layout staying the same even if browser gets wider

choosing breakpoints 选择断点

多数的响应式设计, responsive design patterns. 有个共同点,使用流式布局给移动端平板设备.固定宽度布局对应更宽的屏幕.

流式布局让我们指定一个范围内的屏幕宽度,而不是具体的移动设备.

 

移动优先开发

让我们深入实现.先从移动端入手是个不错的想法.然后再去实现桌面版本.

桌面版本一般会比移动端更加复杂.而且移动端优先可以重用一些css.

首先我们需要给body添加一些box

<div class='page'>
  <div class='section menu'></div>
  <div class='section header'>
    <img src='images/header.svg'/>
  </div>
  <div class='section content'>
    <img src='images/content.svg'/>
  </div>
  <div class='section sign-up'>
    <img src='images/sign-up.svg'/>
  </div>
  <div class='section feature-1'>
    <img src='images/feature.svg'/>
  </div>
  <div class='section feature-2'>
    <img src='images/feature.svg'/>
  </div>
  <div class='section feature-3'>
    <img src='images/feature.svg'/>
  </div>
</div>

这是我们的基础样式,应当影响到所有端的布局.确保添加@media规则.

.page {
  display: flex;
  flex-wrap: wrap;
}

.section {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu {
  background-color: #5995DA;
  height: 80px;
}

.header {
  background-color: #B2D6FF;
}

.content {
  background-color: #EAEDF0;
  height: 600px;
}

.sign-up {
  background-color: #D6E9FE;
}

.feature-1 {
  background-color: #F5CF8E;
}

.feature-2 {
  background-color: #F09A9D;
}

.feature-3 {
  background-color: #C8C6FA;
}

如果你把浏览器窗口缩窄,就能见到移动端的布局了.不需要媒体查询,这个就是移动端优先的意思了.移动端版本不需要任何特殊处理.

另外,flex-warp属性在.page div里.对实现布局很有帮助.

Web page showing layout created with mobile-first CSS (no media queries)

通过维护这些在媒体查询外的样式.我们可以覆盖和添加实现指定的布局.这对于一些全局的样式修改会很有帮助.只要修改后就能改变所有端的展示.

平板布局

移动端和平板的的区别就是 Sign Up 和 feature 选项放在一个2×2的网格里.而不是一行一行展示.

Flexbox实现这个效果很简单.代码如下.

 

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) {
  .sign-up,
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 50%;
  }
}

要观看变化,确保浏览器窗口保持在400到960宽度之间.

Web page showing the grid created from tablet media query

桌边端布局

现在就是展示桌面端布局了.我们不希望页面无限拉伸.所以我们给一个固定宽度在中心和auto-margins.和平板一样放在媒体查询里.

/* Desktop Styles */
@media only screen and (min-width: 961px) {
  .page {
    width: 960px;
    margin: 0 auto;
  }
  .feature-1,
  .feature-2,
  .feature-3 {
    width: 33.3%;
  }
  .header {
    height: 400px;
  }
}

这样我们就获得了所有正确的宽度.然后调整一下位置顺序.

Desktop layout of web page before and after flexbox re-ordering

这个就是flexbox的亮点之处.这种调整,从左图到右边.用floats会很麻烦.flexbox有哥order属性.只需要几行就可以做到这样的效果.

.sign-up {
  height: 200px;
  order: 1;
}
.content {
  order: 2;
}

一切就这样搞定了.一个响应式的布局网站.只需要很少的CSS代码,更重要的是不需要改变html去适应移动平板和桌面端布局.

灵活运用以上知识,你可以创建属于你自己的响应式布局.

关闭viewport缩放

We’ve got one final task for making a responsive web page. Before responsive design was a thing, mobile devices only had a desktop layout to work with. To cope with this, they zoomed out to fit the entire desktop layout into the width of the screen, letting the user interact with it by zooming in when necessary.

最后还有就是.zoomed out会将桌面端的布局缩放后填满视窗.

Diagram: zoom enabled (desktop layout rendered in a tablet device) versus zoom disabled (tablet layout rendered in a tablet device)

这个默认行为会阻止移动设备使用我们的布局.所以我们要关闭这个,就像<meta charset='UTF-8'/>一样,每个页面都最好加上.

<meta name='viewport'
      content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />

身为一个前端必须懂怎么在chrome里开启手机调试.

Screenshot: responsive icon in Chrome’s developer toolbar

然后查看相应的效果.

总结

信不信由你,这就是开发响应式布局的全部.我们看看关心的3件事情.

  • 自适应设计
  • css规则实现布局
  • 媒体查询

下次会讲讲,图片响应式.是较复杂的内容.

发表评论

邮箱地址不会被公开。