程式学徒

让每一个人都能学会编程

网页设计学徒09:移动优先设计原则

2018-07-11 Zack网页设计学徒

移动优先设计

移动优先(Mobile First)设计原则是指优先设计手机版的网页,再设计平板与桌面版本。

这一课我们要讲移动优先(Mobile First)设计原则。这个原则很简单,就是从小到大:先设计手机版的网页界面,再透过媒体请求完成版面较大的平板与桌面版的设计。

视频连结

  1. YouTube

  2. BiliBili

  3. YouKu

我们以上一课的例子来实作一下,让大家能够了解这一思路。

移动优先设计原则实例

首先我们要思考不同版本之间的差异。

这个例子中我们一共有两个版本,手机和桌面版本,平板就省略掉,但思路是一样的,也可能自先完成。两者的差异只有字体大小和网格的布局。

手机版为优先,与之相关的CSS便是主要的CSS内容;而桌面版非优先,其专属的CSS则要放在媒体请求当中。

因此,我们一开始的网格设计应该以手机版为主,一栏五行的设计,所以#site应该是这样:

#site {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 3rem 3rem 1fr 3rem 3rem;
  grid-template-areas:
    "header"
    "nav"
    "main"
    "aside"
    "footer"
}

另外在body里则要加入字体大小:

body {
  background: #333;
  color: #fff;
  font-size: 1.2rem;
}

其他保持原样,这样便完成手机版的设计。

桌面版非优先,所以放在媒体查询当中。我们将屏幕宽度大于600px的都当作桌面版,因此查询条件为最小宽度为600px,即宽度600px以上套用以下设定:

@media (min-width: 600px) {

}

在媒体查询当中,我们要将网格的设计改为两栏四行:

@media (min-width: 600px) {
  #site {
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 3rem 3rem 1fr 3rem;
    grid-template-areas:
      "header header"
      "nav    nav"
      "main   aside"
      "footer footer"
  } 
}

同样地,display: grid这一行不用重复。

最后再将字体缩小,最后的媒体查询如下:

@media (min-width: 600px) {
  #site {
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 3rem 3rem 1fr 3rem;
    grid-template-areas:
      "header header"
      "nav    nav"
      "main   aside"
      "footer footer"
  }
  body {
    font-size: 1rem
  }
}

总结:移动优先=从小到大地设计

移动优先设计原则就是这么简单,从宽度最小的开始设计,接著利用媒体查询的min-width一级一级地扩大。这样,整个设计便有一个系统可循,你的CSS也一层一层地分得很清楚,不会因为媒体查询的加入而让整个设计乱了套。

这便是今天的内容,下一课我们会讨论一下VS Code与GitHub的整合。

《网页设计学徒》课程链接:

  1. 网页设计学徒 01:什么是网页?
  2. 网页设计学徒 02:网页的语言、标题和图片
  3. 网页设计学徒 03:VS Code 专业程式编辑器
  4. 网页设计学徒 04:网页由哪些部分构成?
  5. 网页设计学徒 05:用 CSS 美化网页
  6. 网页设计学徒 06:CSS 盒子模型
  7. 网页设计学徒 07:CSS Grid 网页排版 2018
  8. 网页设计学徒 08:媒体查询与响应式网页设计
  9. 网页设计学徒 09:移动优先设计原则
  10. 网页设计学徒10:VS Code整合GitHub
  11. 网页设计学徒11:履历网页实作(1)
  12. 网页设计学徒12:履历网页实作(2)HTML篇
  13. 网页设计学徒13(完结):履历网页实作(3)CSS篇

《网页设计学徒》番外篇:

  1. CSS 中 px、em、rem 有什么分别?
  2. fr 介绍:CSS 网格带来的新单位
  3. CSS 网格(CSS Grid)完整教学
  4. 中文网页字体设定2018篇