【CSS in Depth 2 精译_045】7.1 CSS 响应式设计中的移动端优先设计原则(上)

当前内容所在位置(可进入专栏查看其他译好的章节内容)

  • 第一章 层叠、优先级与继承(已完结)
    • 1.1 层叠
    • 1.2 继承
    • 1.3 特殊值
    • 1.4 简写属性
    • 1.5 CSS 渐进式增强技术
    • 1.6 本章小结
  • 第二章 相对单位(已完结)
    • 2.1 相对单位的威力
    • 2.2 em 与 rem
    • 2.3 告别像素思维
    • 2.4 视口的相对单位
    • 2.5 无单位的数值与行高
    • 2.6 自定义属性
    • 2.7 本章小结
  • 第三章 文档流与盒模型(已完结)
    • 3.1 常规文档流
    • 3.2 盒模型
    • 3.3 元素的高度
    • 3.4 负的外边距
    • 3.5 外边距折叠
    • 3.6 容器内的元素间距问题
    • 3.7 本章小结
  • 第四章 Flexbox 布局(已完结)
    • 4.1 Flexbox 布局原理
    • 4.2 弹性子元素的大小
    • 4.3 弹性布局的方向
    • 4.4 对齐、间距等细节处
    • 4.5 本章小结
  • 第五章 网格布局(已完结)
    • 5.1 构建基础网格
    • 5.2 网格结构剖析 (上)
      • 5.2.1 网格线的编号(下)
      • 5.2.2 网格与 Flexbox 配合(下)
    • 5.3 两种替代语法
      • 5.3.1 命名网格线
      • 5.3.2 命名网格区域
    • 5.4 显式网格与隐式网格(上)
      • 5.4.1 添加变化 (中)
      • 5.4.2 让网格元素填满网格轨道(下)
    • 5.5 子网格(全新增补内容)
    • 5.6 对齐相关的属性
    • 5.7 本章小结
  • 第六章 定位与堆叠上下文(已完结)
    • 6.1 固定定位
      • 6.1.1 创建一个固定定位的模态对话框
      • 6.1.2 在模态对话框打开时防止屏幕滚动
      • 6.1.3 控制定位元素的大小
    • 6.2 绝对定位
      • 6.2.1 关闭按钮的绝对定位
      • 6.2.2 伪元素的定位问题
    • 6.3 相对定位
      • 6.3.1 创建下拉菜单(上)
      • 6.3.2 创建 CSS 三角形(下)
    • 6.4 堆叠上下文与 z-index
      • 6.4.1 理解渲染过程与堆叠顺序(上)
      • 6.4.2 用 z-index 控制堆叠顺序(上)
      • 6.4.3 深入理解堆叠上下文(下)
    • 6.5 粘性定位
    • 6.6 本章小结
  • 第七章 响应式设计(概述)
    • 【7.1 移动端优先设计原则】(上篇) ✔️​
    • 7.2 媒体查询(精译中 ⏳)

文章目录

    • 7.1 移动端优先设计原则 Mobile first

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
铺垫了好几天,今天终于要开始学习 CSS 响应式设计的第一个大原则了——移动端优先(mobile first)。第七章有个特点——每一节篇幅都比较长,因为涉及整个页面的谋篇布局和响应式处理,不再仅仅聚焦于一个个具体的知识点上,学习时一定要在头脑里构建一个宏观的视角。篇幅原因,本节拟分上下两篇进行介绍,本篇为上篇,对应 7.1 节的概述部分。只要跟着作者的思路进行本地实战演练,其实也没有想象中的那么抽象。一起加油吧!

7.1 移动端优先设计原则 Mobile first

响应式设计的第一原则就是 移动端优先(mobile first,顾名思义,就是移动端布局的构建要先于桌面端布局。这是确保两个版本都能生效的最佳方案。

开发移动端页面就像戴着脚镣跳舞:除了屏幕大小受限、网速偏慢外,页面交互所使用的控件(controls)也和 PC 端不太一样:虽然可以打字,但总感觉不太顺手,更没法将鼠标悬停在元素上触发一些特定效果。倘若一开始就设计一个功能全面的网站,然后企图根据移动端的诸多限制削减某些功能,这么做往往都会以失败告终。

而选用移动端优先的方式,则会让您在网站设计之初就开始考虑这些制约因素。一旦解决了移动端的用户体验问题(至少做了相关规划),后续就可以通过“渐进式增强(progressive enhancement)”技术去改善大尺寸屏幕用户的交互体验。

本章最终要实现的页面效果如图 7.1 所示。没错,这就是一版移动端的页面设计。

图 7.1 待实现的移动端页面设计效果图

【图 7.1 待实现的移动端页面设计效果图】

该页面有三个主要部件:标题栏(header)、带了些文字内容的页面主图(hero image)、以及主内容区(main content)。要是轻触或单击页面右上角那个图标,还能弹出一个隐藏菜单(如图 7.2 所示)。这个由三条横线组成的图标因为形似汉堡包中的面包和肉饼,通常也被称作 汉堡(hamburger 图标。

图 7.2 点击或轻触移动端页面的“汉堡”图标后打开的菜单效果

【图 7.2 点击或轻触移动端页面的“汉堡”图标后打开的菜单效果】

移动端布局一般是很朴素的设计。除了这个带交互效果的菜单,移动端更侧重于内容的展示。相对于大屏有大块的空间来布局标题栏、页面主图和菜单区,移动端用户往往浏览网页的目的性更强。他们很可能与友人在户外玩耍,只想快速查到商店营业时间或者像价格、地址这样的具体信息。

因此移动端的设计就是围绕内容展开的。试想有这么一个 PC 端页面,一边设计为文章内容,另一边则是包含链接的侧边栏,里面还有些不太重要的内容。要是换到移动端来,肯定是希望先看到文章内容。换句话说,我们希望最重要的内容先出现在 HTML 里。这一点恰好与页面可访问性关注的焦点不谋而合:一款读屏工具会优先读到“重要的内容(good stuff)”;或者让用户通过键盘操作,率先获取到这篇文章中的链接,其次才是侧边栏里的。

话虽如此,上述原则也并非放之四海而皆准。比如上面谈到的示例页,尽管页面主图没有下方的内容重要,但它不失为整个页面最抢眼的部分,因此考虑将其留在页面顶部的位置也是合理的。另外,它还带有少量文字内容,浏览起来也不费工夫。

重点

做响应式设计时,一定要确保 HTML 里涵盖了各种屏幕尺寸所需的全部内容。每个屏幕尺寸固然可以有各自的 CSS 样式,但它们必须共享同一份 HTML。

再来看看稍大一些的视口(viewport)该如何设计。屏幕较小的移动端布局固然要先行,但在一头扎进移动端样式之前,大屏需要的整体设计也得做到心里有数,以便在代码结构方面合理决策。

移动端样式一旦就绪,就需要在页面上分别设置一中一大两个 断点(breakpoint。这可以借助 媒体查询(media queries) 叠加额外的样式来实现。额外引入的这些样式仅对尺寸更大的屏幕生效。

断点的定义

断点(breakpoint 是一个特殊的临界点。它对应于浏览器的某个宽度或高度。页面样式会在屏幕尺寸跨过该点时发生改变,旨在为当前的屏幕尺寸提供最佳的布局效果。

本章后续还将对这些断点的设置细节做深入考察,现阶段只要知道页面会添加这些断点就行了;此外,还需要考虑在更大尺寸的屏幕下,页面布局一般都会涉及哪些样式调整。图 7.3 显示的是中等屏幕下的页面布局效果:

图 7.3 中等屏幕视口下的页面效果

【图 7.3 中等屏幕视口下的页面效果】

这时的视口尺寸相比移动端稍微多了一些可供发挥的余地。标题栏和页面主图可以设置更大的内边距;各菜单项由于刚好可以在一行铺开,因此也无需隐藏了;汉堡图标因为不用控制菜单的开合,也随即去掉了;而主内容区则可以设计三个等宽列,并让大部分元素填充在距离视口边缘 1em 的范围内。

而尺寸更大的视口则与上面一样,但也可以适当增加页面的外边距,或者让页面主图再大些,如图 7.4 所示:

图 7.4 大尺寸屏幕视口下的页面效果

【图 7.4 大尺寸屏幕视口下的页面效果】

由于要先实现移动端设计,所以才更有必要了解清楚页面在大尺寸屏幕视口下的渲染效果,以便在一开始就确定出合理的 HTML 结构。我们先创建一个新页面和一个新样式表,然后将代码清单 7.1 中的 HTML 标记添加到新页面中。

这些代码看起来很像非响应式设计下的版本,但我针对移动端设计融入了好几处调整,稍后再详述。

代码清单 7.1 响应式设计下的页面 HTML 标记

<!doctype html>
<html lang=”en-US”>
<head>
  <meta charset="UTF-8">
  <title>Wombat Coffee Roasters</title>
  <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header id="header" class="page-header">
  <div class="title">
    <h1>Wombat Coffee Roasters</h1>
    <div class="slogan">We love coffee</div>
  </div>
</header>

<nav class="menu" id="main-menu">
  <button class="menu-toggle" id="toggle-menu"> <!-- 定义移动端菜单的“汉堡”状按钮 -->
    toggle menu
  </button>
  <div class="menu-dropdown"> <!-- 在移动端设备上默认隐藏的主菜单 -->
    <ul class="nav-menu">
      <li><a href="/about.html">About</a></li>
      <li><a href="/shop.html">Shop</a></li>
      <li><a href="/menu.html">Menu</a></li>
      <li><a href="/brew.html">Brew</a></li>
    </ul>
  </div>
</nav>
<aside id="hero" class="hero">
  Welcome to Wombat Coffee Roasters! We are
  passionate about our craft, striving to bring you
  the best hand-crafted coffee in the city.
</aside>
<main class="main">
  <section class="column"><!-- 用于中等尺寸和大尺寸视口的三列布局元素 -->
    <h2 class="subtitle">Single-origin</h2>
    <p>We have built partnerships with small farms
      around the world to hand-select beans at the
      peak of season. We then carefully roast in
      <a href="/batch-size.html">small batches</a>
      to maximize their potential.</p>
  </section>
  <section class="column"><!-- 用于中等尺寸和大尺寸视口的三列布局元素 -->
    <h2 class="subtitle">Blends</h2>
    <p>Our tasters have put together a selection of
      carefully balanced blends. Our famous
      <a href="/house-blend.html">house blend</a>
      is available year round.</p>
  </section>
  <section class="column"><!-- 用于中等尺寸和大尺寸视口的三列布局元素 -->
    <h2 class="subtitle">Brewing Equipment</h2>
    <p>We offer our favorite kettles, French
      presses, and pour-over cones. Come to one of
      our <a href="/classes.html">brewing
      classes</a> to learn how to brew the perfect
      pour-over cup.</p>
  </section>
</main>
</body>
</html>

上述代码中,切换移动端菜单的按钮位于 nav 元素内。nav-menu 元素放置的位置也恰好可以同时满足移动端和桌面端的设计需求。样式类 maincolumn 则用于桌面端的布局设计(构建新页面时可能一开始还摸不清这些元素的作用,不过不要紧,后面会演示)。

接下来给页面添加样式。先处理比较简单的元素样式,如页面字体、标题、字体颜色等,如图 7.5 所示。因为当前关注的是移动端样式,所以要将浏览器的宽度调小来模拟一个移动设备的尺寸。这样就能看到小屏幕上的页面是什么样的了。

图 7.5 加上简单样式后的移动端页面效果

【图 7.5 加上简单样式后的移动端页面效果】

该页面对应的样式如代码清单 7.2 所示。将它们更新到本地样式表,以建立边框盒模型(border box sizing),并让代码设置的字体和链接颜色生效。该代码用到了第 2 章(第 2.4.1 节)中介绍过的基于视口的响应式字号,并且定义了页面标题即主内容区的相关样式。

代码清单 7.2 给页面设置初始样式

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  font-size: clamp(0.9rem, 0.5svw + 0.6em, 1.125rem); /* 基础字号会根据视口大小适当缩放(详见第2章内容) */
}

body {
  margin: 0;
  font-family: Helvetica, Arial, sans-serif;
}

a:link {
  color: #1476b8;
  font-weight: bold;
  text-decoration: none;
}
a:visited {
  color: #1430b8;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: #b81414;
}

/* 页面标题栏样式 */
.page-header {
  padding: 0.4em 1em;
  background-color: #fff;
}

/* 主标题样式 */
.title > h1 {
  color: #333;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-block: 0.2em;
}

/* 副标题样式 */
.slogan {
  color: #888;
  font-size: 0.875em;
  margin: 0;
}

.hero {
  padding: 2em 1em;
  text-align: center;
  background-image: url(coffee-beans.jpg); /* 给页面加上主图 */
  background-size: 100%;
  color: #fff;
  text-shadow: 0.1em 0.1em 0.3em #000; /* 深色的文字阴影效果确保浅色文字在复杂背景中清晰可辨 */
}

/* 主内容区样式 */
main {
  padding: 1em;
}

.subtitle {
  margin-block: 1.5em;
  font-size: 0.875rem;
  text-transform: uppercase;
}

上面的样式代码大都比较简单。它将页面标题和正文中的副标题都转换为全大写(all caps),还给页面各组件加上了内外边距,并调整了字号。

主图样式中的 text-shadow 属性可能比较陌生。该属性由若干个属性值构成。由这些值共同定义的文字阴影效果,最终将渲染到目标文字的后面。这些值的前两个,分别代表直角坐标系中的坐标位置,表征该阴影相对于文字位置的偏移量;而 0.1em 0.1em 则表明该阴影将相对于文字稍微往右下方偏移;第三个值(0.3em)为模糊半径,代表该阴影区域的模糊程度。最后的 #000 则指明了阴影的颜色。



关于《CSS in Depth》(中译本书名《深入解析 CSS》)

第 1 版 第 2 版
读者评分 原版:4.7(亚马逊);中文版:9.3(豆瓣) 原版:5.0(亚马逊);中文版:暂无,待出版
出版时间 原版:2018 年 3 月;中文版:2020 年 4 月 原版:2024 年 7 月;中文版:暂无,待出版
原价 原版:$44.99;中文版:¥139.00 原版:$59.99;中文版:暂无,待出版
现价 原版:$36.49;中文版:¥52.54 起步 原版:$52.09;中文版:暂无,待出版
原版国内预订 起步价 ¥461.00 起步价 ¥750.00

本专栏为该书第 2 版高分译文专栏,全网首发,精译精校,持续更新,计划今年内完成全书翻译,敬请期待!!!

上一篇:SQLITE 构建多表查询


下一篇:【MySQL】MySQL 数据库主从复制详解-1. 基本概念