做网站图片分辨率,如何做外国网站销售,查询公司名字是否被注册,做网站需要什么基础当前内容所在位置#xff08;可进入专栏查看其他译好的章节内容#xff09; 第一章 层叠、优先级与继承#xff08;已完结#xff09; 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位#xff08;已完结#xff09; 2.1 相对… 当前内容所在位置可进入专栏查看其他译好的章节内容 第一章 层叠、优先级与继承已完结 1.1 层叠1.2 继承1.3 特殊值1.4 简写属性1.5 CSS 渐进式增强技术1.6 本章小结 第二章 相对单位已完结 2.1 相对单位的威力2.2 em 与 rem2.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 响应式设计的第一个大原则了——移动端优先mobile first。第七章有个特点——每一节篇幅都比较长因为涉及整个页面的谋篇布局和响应式处理不再仅仅聚焦于一个个具体的知识点上学习时一定要在头脑里构建一个宏观的视角。篇幅原因本节拟分上下两篇进行介绍本篇为上篇对应 7.1 节的概述部分。只要跟着作者的思路进行本地实战演练其实也没有想象中的那么抽象。一起加油吧 7.1 移动端优先设计原则 Mobile first
响应式设计的第一原则就是 移动端优先mobile first顾名思义就是移动端布局的构建要先于桌面端布局。这是确保两个版本都能生效的最佳方案。
开发移动端页面就像戴着脚镣跳舞除了屏幕大小受限、网速偏慢外页面交互所使用的控件controls也和 PC 端不太一样虽然可以打字但总感觉不太顺手更没法将鼠标悬停在元素上触发一些特定效果。倘若一开始就设计一个功能全面的网站然后企图根据移动端的诸多限制削减某些功能这么做往往都会以失败告终。
而选用移动端优先的方式则会让您在网站设计之初就开始考虑这些制约因素。一旦解决了移动端的用户体验问题至少做了相关规划后续就可以通过“渐进式增强progressive enhancement”技术去改善大尺寸屏幕用户的交互体验。
本章最终要实现的页面效果如图 7.1 所示。没错这就是一版移动端的页面设计。 【图 7.1 待实现的移动端页面设计效果图】
该页面有三个主要部件标题栏header、带了些文字内容的页面主图hero image、以及主内容区main content。要是轻触或单击页面右上角那个图标还能弹出一个隐藏菜单如图 7.2 所示。这个由三条横线组成的图标因为形似汉堡包中的面包和肉饼通常也被称作 汉堡hamburger 图标。 【图 7.2 点击或轻触移动端页面的“汉堡”图标后打开的菜单效果】
移动端布局一般是很朴素的设计。除了这个带交互效果的菜单移动端更侧重于内容的展示。相对于大屏有大块的空间来布局标题栏、页面主图和菜单区移动端用户往往浏览网页的目的性更强。他们很可能与友人在户外玩耍只想快速查到商店营业时间或者像价格、地址这样的具体信息。
因此移动端的设计就是围绕内容展开的。试想有这么一个 PC 端页面一边设计为文章内容另一边则是包含链接的侧边栏里面还有些不太重要的内容。要是换到移动端来肯定是希望先看到文章内容。换句话说我们希望最重要的内容先出现在 HTML 里。这一点恰好与页面可访问性关注的焦点不谋而合一款读屏工具会优先读到“重要的内容good stuff”或者让用户通过键盘操作率先获取到这篇文章中的链接其次才是侧边栏里的。
话虽如此上述原则也并非放之四海而皆准。比如上面谈到的示例页尽管页面主图没有下方的内容重要但它不失为整个页面最抢眼的部分因此考虑将其留在页面顶部的位置也是合理的。另外它还带有少量文字内容浏览起来也不费工夫。 重点 做响应式设计时一定要确保 HTML 里涵盖了各种屏幕尺寸所需的全部内容。每个屏幕尺寸固然可以有各自的 CSS 样式但它们必须共享同一份 HTML。 再来看看稍大一些的视口viewport该如何设计。屏幕较小的移动端布局固然要先行但在一头扎进移动端样式之前大屏需要的整体设计也得做到心里有数以便在代码结构方面合理决策。
移动端样式一旦就绪就需要在页面上分别设置一中一大两个 断点breakpoint。这可以借助 媒体查询media queries 叠加额外的样式来实现。额外引入的这些样式仅对尺寸更大的屏幕生效。 断点的定义 断点breakpoint 是一个特殊的临界点。它对应于浏览器的某个宽度或高度。页面样式会在屏幕尺寸跨过该点时发生改变旨在为当前的屏幕尺寸提供最佳的布局效果。 本章后续还将对这些断点的设置细节做深入考察现阶段只要知道页面会添加这些断点就行了此外还需要考虑在更大尺寸的屏幕下页面布局一般都会涉及哪些样式调整。图 7.3 显示的是中等屏幕下的页面布局效果 【图 7.3 中等屏幕视口下的页面效果】
这时的视口尺寸相比移动端稍微多了一些可供发挥的余地。标题栏和页面主图可以设置更大的内边距各菜单项由于刚好可以在一行铺开因此也无需隐藏了汉堡图标因为不用控制菜单的开合也随即去掉了而主内容区则可以设计三个等宽列并让大部分元素填充在距离视口边缘 1em 的范围内。
而尺寸更大的视口则与上面一样但也可以适当增加页面的外边距或者让页面主图再大些如图 7.4 所示 【图 7.4 大尺寸屏幕视口下的页面效果】
由于要先实现移动端设计所以才更有必要了解清楚页面在大尺寸屏幕视口下的渲染效果以便在一开始就确定出合理的 HTML 结构。我们先创建一个新页面和一个新样式表然后将代码清单 7.1 中的 HTML 标记添加到新页面中。
这些代码看起来很像非响应式设计下的版本但我针对移动端设计融入了好几处调整稍后再详述。
代码清单 7.1 响应式设计下的页面 HTML 标记
!doctype html
html lang”en-US”
headmeta charsetUTF-8titleWombat Coffee Roasters/titlelink hrefstyles.css relstylesheet typetext/css /
/head
body
header idheader classpage-headerdiv classtitleh1Wombat Coffee Roasters/h1div classsloganWe love coffee/div/div
/headernav classmenu idmain-menubutton classmenu-toggle idtoggle-menu !-- 定义移动端菜单的“汉堡”状按钮 --toggle menu/buttondiv classmenu-dropdown !-- 在移动端设备上默认隐藏的主菜单 --ul classnav-menulia href/about.htmlAbout/a/lilia href/shop.htmlShop/a/lilia href/menu.htmlMenu/a/lilia href/brew.htmlBrew/a/li/ul/div
/nav
aside idhero classheroWelcome to Wombat Coffee Roasters! We arepassionate about our craft, striving to bring youthe best hand-crafted coffee in the city.
/aside
main classmainsection classcolumn!-- 用于中等尺寸和大尺寸视口的三列布局元素 --h2 classsubtitleSingle-origin/h2pWe have built partnerships with small farmsaround the world to hand-select beans at thepeak of season. We then carefully roast ina href/batch-size.htmlsmall batches/ato maximize their potential./p/sectionsection classcolumn!-- 用于中等尺寸和大尺寸视口的三列布局元素 --h2 classsubtitleBlends/h2pOur tasters have put together a selection ofcarefully balanced blends. Our famousa href/house-blend.htmlhouse blend/ais available year round./p/sectionsection classcolumn!-- 用于中等尺寸和大尺寸视口的三列布局元素 --h2 classsubtitleBrewing Equipment/h2pWe offer our favorite kettles, Frenchpresses, and pour-over cones. Come to one ofour a href/classes.htmlbrewingclasses/a to learn how to brew the perfectpour-over cup./p/section
/main
/body
/html上述代码中切换移动端菜单的按钮位于 nav 元素内。nav-menu 元素放置的位置也恰好可以同时满足移动端和桌面端的设计需求。样式类 main 和 column 则用于桌面端的布局设计构建新页面时可能一开始还摸不清这些元素的作用不过不要紧后面会演示。
接下来给页面添加样式。先处理比较简单的元素样式如页面字体、标题、字体颜色等如图 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 则指明了阴影的颜色。 译注 代码清单 7.2 第 8 行用到了工具函数 clampfont-size: clamp(0.9rem, 0.5svw 0.6em, 1.125rem);。原文只提示参阅第二章没有解释具体含义这里补充说明。它表示字号设为 0.5svw 0.6em且最小不低于 0.9rem、最大不超过 1.125rem。更多详情可参考本专栏第 14 篇 《【CSS in Depth 2 精译_014】2.4 视口的相对单位》 的第 2.4.2 小节相关内容。 关于《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 版高分译文专栏全网首发精译精校持续更新计划今年内完成全书翻译敬请期待
