如何设计响应式网页计 第1篇
和视口元标签一起,你可以使用另外几个设定,但大体说来,上面那行就是你想要使用的。
你应该避免使用minimum-scale
、maximum-scale
,尤其是将user-scalable
设为no
。用户应该有权力尽可能大或小地进行缩放,阻止这种做法会引起访问性问题。
响应式设计指的是一个响应浏览环境的网页或者应用设计。它涵盖了很多 CSS 和 HTML 的功能和技术,现在基本上就是我们默认建设网站的方式。想一下你在手机上访问的网站,遇到一个缩放的桌面版网站,或者你需要向侧边滚动来寻找东西的网站可能是相当不寻常的。这是因为 Web 已经迁移到了这种响应式设计的方式上。
在这些课里学到的布局方式的帮助下,实现响应式设计也变得愈加简单。如果你今天新近了解 Web 开发,那么你与响应式设计早期相比,手边有多得多的工具。因而,你有必要检查下你所引用的任何材料的年纪。尽管历史上的文章仍然有用,现代的 CSS 和 HTML 的使用让创建一个优雅且实用的设计变得远远更加容易,且无论你的访客使用什么设备浏览网站。
如何设计响应式网页计 第2篇
这里有一个解决方法,它使用了calc()
,如果你将vw
单位加到了使用固定大小(例如em
或者rem
)的值组,那么文本仍然是可放缩的。基本来说,是vw
加在了放缩后的值上。
这就是说,我们只需要指定标题的字体大小一次,而不是为移动端设定它,然后再在媒介查询中重新定义它。字体会在你增加视口大小的时候逐渐增大。
如何设计响应式网页计 第3篇
让我们按照以下方式添加基本的 HTML5 结构:
此部分的列划分是指网站线框图中显示的布局。因此,正如您从刚刚添加的代码中看到的那样,每个功能列表项都分配了medium-6
列,因此每个项目的列宽将相等。
我们只是按照 Foundation 指南构建了网站内容和部分的 HTML 标记。我们还在途中添加了额外的类,以便稍后自定义 Foundation 默认样式。
自从构建 HTML 标记以来,我们还没有添加任何样式;此时的网站看起来是白色和简单的,如下面的屏幕截图所示:
我们刚刚添加的 HTML 的完整代码也可以在找到。
本章有效地开始了我们的第三个项目。在这个项目中,我们使用 Foundation 为一家初创公司构建网站。我们浏览了 Foundation 的特性,并将其中一些特性应用到了网站中。不过,本章中我们只添加了网站的 HTML 结构。此时的网站看起来仍然是白色和简单的。我们需要编写样式来定义网站的外观和感觉,这正是我们将在下一章中做的事情。
我们将使用 Sass 来编写网站样式,Sass 是 CSS 预处理器,也定义了 Foundation 基本样式。因此,在下一章的开始,我们将首先学习如何使用 Sass 变量、混合、函数和其他 Sass 特性,然后再编写网站样式。
看起来还有很多工作要做才能完成这个项目。因此,话不多说,让我们继续下一章吧。