花了十年的时间 响应式网页设计 (后轮驱动) 成为主流,因为 卡梅伦·亚当斯(Cameron Adams)首次介绍 这个概念是在 2010 年提出的。这个想法很巧妙——为什么我们不能设计适应正在查看的设备视口的网站?
什么是响应式设计?
响应式网页设计是一种设计方法,可确保网站在任何设备上提供最佳浏览体验,无论屏幕尺寸或分辨率如何。 它涉及使用灵活的布局、基于网格的布局和媒体查询来创建一个可以根据正在查看的屏幕大小进行调整的站点。 这意味着采用响应式网页设计的网站在台式电脑、平板电脑或智能手机上的外观和功能都很好。
换句话说,可以调整图像等元素以及这些元素的布局。 这是一个视频,解释了什么是响应式设计以及为什么您的公司应该实施它。 如果您要进行新的网站设计或开发 Web 应用程序,响应式 Web 设计是必须的,而不是一种选择,因为超过一半的 Web 流量来自具有不同视口宽度和高度的移动设备。
响应式设计也是网页设计师的最佳选择,他们不必根据设备或视口构建独特的独立体验。 响应式网页设计可以使用 的CSS.
响应式设计 CSS 视口查询
下面是一个使用媒体查询根据视口调整字体大小的样式表示例:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
浏览器知道它们的大小,它们从上到下加载样式表。 通过查询适用于屏幕尺寸的样式,您可以为每个最小和最大设备宽度设置特定的样式元素。 这并不意味着您必须为每种尺寸的屏幕设计不同的站点,您只需要使用媒体查询来移动必要的元素。
如今,以移动第一的心态进行操作是基线标准。 一流的品牌不仅在考虑其站点是否适合移动设备使用,还在考虑完整的客户体验。
Monetate首席执行官Lucinda Duncalfe
这是来自的信息图表 Monetate 说明为多个设备创建一个响应式设计的潜在好处:
您的网站是否响应?
查看您的站点是否响应的一种简单方法是仅扩大或缩小浏览器窗口以查看元素是否根据浏览器的宽度移动。
为了更精确,请将您的 Google Chrome 浏览器访问您的站点。 选择 查看>开发人员>开发人员工具 从菜单中。 这将在面板或新窗口中加载一堆工具。 单击开发人员工具菜单栏左侧的小图标,该图标看起来像手机和平板电脑图标。 您可以选择一些标准设备,甚至可以更改是要水平还是垂直查看页面。
您可以使用顶部的导航选项将视图从横向更改为纵向,甚至可以选择任意数量的预编程视口大小。 您可能需要重新加载页面,但这是世界上最酷的工具,用于验证您的响应式设置并确保您的网站在所有设备上看起来都不错!