什么是响应式网页设计,响应式网页设计的终极指南解析?

多年来,网页设计已经发生了很大的变化。一开始,网页设计的主要目标是为桌面用户创造一个流畅的浏览体验–毕竟这是人们访问互联网的唯一方式。但从那时起,移动革命已经极大地改变了我们为网络

多年来,网页设计已经发生了很大的变化。一开始,网页设计的主要目标是为桌面用户创造一个流畅的浏览体验–毕竟这是人们访问互联网的唯一方式。但从那时起,移动革命已经极大地改变了我们为网络设计的方式。

今天,当设计师建立一个新的网站时,他们需要确保它看起来很棒,功能良好,并在各种浏览器和设备上传达正确的信息。基本上可以保证,网站设计的客户会要求提供他们网站的移动版本。响应式设计原则使之成为可能。

在这个全面的指南中,我们将涵盖你需要知道的关于响应式网页设计的一切–从围绕它的历史,到最佳实践,以及可供学习的强大实例。

响应式网页设计的终极指南

什么是响应式网页设计?

响应式网页设计的历史

适应不同的视口

用于设计响应式网站的方法

调整图像大小

响应式排版的使用

移动优先的设计

响应式网站实例

什么是响应式网站设计?

响应式网页设计是一种设计网站的方法,它可以在各种屏幕尺寸上呈现网页。这是用户界面可塑性的一个例子–一个界面能够流动,并根据可用的屏幕空间以理想的排列方式呈现。

但是,响应式设计不仅仅是一种技术方法,它是良好用户体验的支柱。与其把屏幕尺寸和分辨率看作是设计上的限制,不如把你的内容看作是流动的,让用户完全控制他们想怎么看。

响应式设计需要结合流体网格、灵活的图像和媒体查询。 流畅的网格、灵活的图像和媒体查询作为一个整体一起工作,它们根据用户的喜好重新格式化网页,并提供尽可能好的网络体验。

畅的网格

网格是一个由相交的线条组成的二维结构,让你把内容安排在列和行中。在流体网格中,网格中的每个元素都是以相对于其容器的比例来表示的,所以它的大小取决于它所处的容器的大小。这意味着网格中确切的列数可以根据用户的视口(用户设备上可以看到内容的可见区域)的大小而变化。例如,你可以在桌面上显示一个三栏式布局,而在移动设备上显示一个单栏式布局。

相对单位

网页元素,如内容块或按钮的大小是以相对单位(如百分比)计算的。相对单位使得根据视口的大小来确定元素的大小成为可能。

媒体查询

CSS(层叠样式表)媒体查询可以根据视口的特性改变页面的风格,比如视口的显示分辨率和浏览器窗口的实际大小。

响应式设计的历史

上世纪80年代,智能手机的普及促使网页设计界思考如何在不牺牲可用性或性能的情况下,在不同的显示尺寸和分辨率上显示内容。

网页设计师Ethan Marcotte在他2010年的文章《响应式网页设计》中首次提出了 “响应式设计 “这一术语。Marcotte的灵感来自于响应式建筑设计,即一个空间会根据其内的人数自动调整。顾名思义,响应式设计通过调整布局元素以适应可用空间的变化来响应浏览器的宽度。

除了响应式设计之外,还出现了第二种更加量身定做的方法:适应性设计。适应性设计是一年前由网页设计师Aaron Gustafson在一本书中提出的,设计师为每个断点(通常是320px、480px、760px、960px、1200px和1600px)创建一个布局。设计适应不同尺寸的视口,使用媒体查询来定义小屏幕和大屏幕的属性将被改变。因此,每个网页都有多个适合不同屏幕尺寸的固定布局版本。

当我们比较响应式和自适应设计时,响应式通常是高级设计师更有效的方法。因为你不需要创建多个版本的布局,所以实施和维护设计的工作量更少。通过响应式设计,页面的内容会针对每个浏览器窗口进行优化安排。响应式网页设计也更有利于搜索引擎优化,因为它在Googlebot抓取你的网站时可以节省资源。一个Googlebot用户代理只需要抓取你的页面一次,而不是抓取多次来检索你的设计的多个版本。

适应不同的视口

从巨大的电视屏幕到智能手表的小屏幕,今天人们有多种方式可以访问网络。为了给用户创造一个舒适的浏览体验,适应不同的视口是很重要的。

响应式设计通过允许设计师针对特定的设备类别和各种屏幕尺寸来解决这个问题。为了创建一个响应式设计,网页设计师需要做两件事。

1. 在他们所有的HTML页面上添加 “viewport “元标签。

这个标签为浏览器提供了如何渲染网页的指示,定义了网页的尺寸和比例。

2. 使用媒体查询,使其布局符合特定视口的要求。比如说。

增加功能控件的尺寸,如按钮,或在移动端上增加它们之间的相对距离。这将有助于在触摸设备上遵守菲茨定律,并创造更舒适的用户互动。

显示或隐藏网站布局中的特定元素。

在特定类型的设备上改变某些元素的视觉属性(如字体颜色)。

如何定义媒体查询

下面是CSS文件中媒体查询的一个例子。

@media screen and (max-width: 480px) and (orientation: portrait) { .footer { float: none; width: auto; } }
这个CSS媒体查询的语法最初可能看起来很复杂,但只要你熟悉了这个结构,解码信息就变得很容易。在@media之后和第一个开放的{括号之前的部分定义了条件。让我们回顾一下我们例子中的条件。

媒体类型。媒体类型是一种我们想要应用CSS设置的设备类型。我们可以定义四类设备:屏幕(桌面、手机和平板电脑)、打印(打印机)、语音(用于为视障用户大声读出页面的屏幕阅读器)、所有(用于所有媒体类型)。如果你不指定这个属性,CSS将默认应用所有属性。

媒体特征。min-width设置了一个最小的浏览器或屏幕宽度,某些样式将适用于此。如果浏览器或屏幕的宽度低于这个限制,这些样式将被忽略。max-width属性的作用正好相反,任何超过最大浏览器或屏幕宽度的东西都不会适用于相应的媒体查询。

方向。设备方向可以是纵向(垂直方向)或横向(水平方向)。这个属性主要适用于移动设备和平板电脑。

在括号内,当所有条件都满足时,可以应用一个样式条件。在我们的例子中,我们要检查三个条件。

设备的类型是桌面、移动还是平板电脑?

我们的设备是纵向的吗?

我们的设备屏幕分辨率(最大宽度)是否等于或小于480px?

如果所有条件都满足,这意味着用户很可能是在纵向模式的小屏幕移动设备上观看我们的作品。在这种情况下,设备将加载页脚对象的CSS指令–否则,本节的指令将被忽略。

如何构造媒体查询

有两种常见的结构化CSS样式的方法,要么把它们放在一个文件里,要么为不同类型的设备使用不同的文件。每种方法都有其优点和缺点。例如,将媒体查询与网站的其他CSS样式一起全部放在一个CSS样式表中,你将最大限度地减少渲染网页所需的系统数量。 此外,通过将媒体查询分布在不同的文件中(如 desktop.css, mobile.css),将使开发人员更容易在代码中导航,因为所有与移动视口相关的样式都位于同一个文件中。

分割点

我们在上面的媒体查询例子中定义的分辨率可以作为一个断点。断点是响应式网页设计的基石,因为它们帮助设计师定义设备的类别,并为每组设备调整设计。

“我的网站应该使用哪些断点?”这是网页设计师的一个典型问题。没有一套通用的断点,因为所有的项目都不同,可能需要不同的分辨率。可以依靠世界范围内的屏幕分辨率统计来定义几组常见的屏幕分辨率。

360 x 640px(小型移动设备屏幕):10.10%。

1366 x 768px(普通的笔记本电脑屏幕):9.3%。

1920 x 1080px(大型桌面屏幕):8.35%。

如果你使用Editor X,你会有3个默认的断点来开始使用。

移动设备为350-750px

平板电脑为751-1000px

1001px和更大的台式电脑

但这些断点并不是一成不变的。如果你想调整,你可以很容易地编辑它们或添加自定义断点,以适应你的项目的需要,而无需潜入代码。

在为你的项目选择断点时,要记住以下两条基本规则。

根据你所拥有的内容来选择断点。你用来展示内容的布局应该决定你要使用哪些断点。

尽量使用最少的断点。请记住,你将需要调整内容以配合每个断点。三个或四个断点将使你有足够的灵活性来框定你的内容。

用于设计响应式网站的方法

CSS媒体查询是制作响应式网站的基本工具。所有现代的网络浏览器都能解析CSS媒体查询,所以你在调整设计以适应特定平台时不会遇到麻烦。

为了让你的生活更轻松,在创建CSS媒体查询的时候,你不应该从头开始。你可以使用一个CSS框架,如Bootstrap、Bulma或Foundation CSS。这种方法的好处是,框架带有一套预定义的断点和基本对象的视觉样式,如正文、按钮、输入栏等。

另一种可用于响应式设计的方法是JavaScript。这种方法可以应用于不支持CSS媒体查询的设备。可以用JavaScript来检测浏览器窗口的大小,并加载相关的样式表。这里有一段代码,可以用来计算窗口的当前大小。

$(window).height(); $(window).width();

每当用户改变他们的浏览器窗口时,下面的JQuery代码将被触发,它将即时加载相关样式。


$(document).ready(function(){
$(window).bind(\"resize\", resizeWindow);
function resizeWindow(e){
// this code will be triggered every time the user will change the browser window
var newWindowWidth = $(window).width();

if(newWindowWidth < 481){
// if the size of the windows is less than 481 it\'s likely that the person browse on mobile
$(\"link[rel=stylesheet]\").attr({href : \"mobile.css\"});
}
}
});

CSS媒体查询和JavaScript并不是竞争性的方法,它们可以很好地一起工作。

调整图像大小

什么是响应式网页设计,响应式网页设计的终极指南解析?

图像是现代网络的一个重要元素。图像的质量在很大程度上影响着人们对设计的看法–不相关的图像或像素化的资产很可能会给你的访问者造成不好的印象。不仅要精心挑选相关的图像(那些能够向你的受众传达正确信息的图像),而且要确保图像能够很好地适应任何浏览器的尺寸。

有两种类型的图像,光栅图像(JPG、PNG、TIFF)和矢量图像(SVG)。第一组代表了网络上的大多数图像,这组图像的关键问题是它们不是自然流动的。不像矢量图像可以在不损失质量的情况下扩大尺寸,光栅图像必须为不同的分辨率进行修改。

为不同分辨率优化光栅图像的三种方法

让我们了解更多关于图像优化的信息,并获得关于如何调整图像大小的实用技巧。你可以使用CSS属性为不同的分辨率优化你的图像。

1. 用图像宽度属性调整图像的大小。宽度属性定义了图像的固定宽度。下面的CSS规则将定义宽度为500px。

这种方法的缺点是,它对你的图片使用固定宽度,所以它在所有设备上都会以完全相同的尺寸显示。这种方法对于响应式网站来说不是很好用,因为尺寸不当的图片很容易破坏布局。

2. 用CSS宽度属性设置为100%来调整图像大小。

img { width:100%; }

与前一种方法的关键区别在于,你不在代码中指定图片的精确宽度,而是让浏览器根据需要调整图片的大小。有了width: 100%;属性,图像就会自动放大和缩小。这种方法的缺点是,图像在放大时可能会出现像素化。

3. 用CSS最大宽度属性接收。

img { height: auto; max-width: 100%; }

最大宽度属性允许图像保持其长宽比和比例。当最大宽度被设置为100%时,图像将适合其容器的全部宽度。只要没有其他基于宽度的图像CSS样式覆盖这一规则,或者查看区域比图像的原始宽度窄,这个图像就会以其原始尺寸加载。这种方法对响应式网页设计非常有用。

显示尺寸和视觉资产

考虑不同类型的设备如何渲染图像也很重要。虽然有可能在所有类型的设备上使用相同的文件,但为小屏幕设备调整图像大小的过程需要额外的计算能力,所以以原始分辨率使用大文件可能会导致性能下降。

同时,高分辨率显示器,如苹果 “视网膜 “和安卓 “hDPI”,可能需要你以正常分辨率的两到三倍提供视觉资产,以达到体面的视觉质量(@2x,和@3x)。为了解决这两个问题,建议使用一个特殊的工具,如Responsive Breakpoints,它将允许你为每个断点准备单独的图像。

如果你使用Editor X来建立一个响应式网站,你不必写CSS代码来使你的光栅图像在不同的视口正确显示。该平台允许你设置一个精确的宽度或高度,设置一个最大宽度或高度的百分比,以及设置一个最大宽度或高度的像素。你还可以设置一个图像焦点,这样当以不同格式观看时,视觉就会保持在中心位置。

响应性地使用排版

人们访问网站是为了获取内容,而书面文字占了其中的绝大部分。这意味着文本在任何视口尺寸下都是可读的,这一点至关重要。因此,当涉及到响应式排版时,有几件事情需要记住。

什么是响应式网页设计,响应式网页设计的终极指南解析?

不要把文字放在图形中

将文本放在图形中,你会立即使其反应速度降低。文本不能在不损失质量的情况下被放大,因此你必须为每个断点重新创建视觉资产。

选择可以缩放的字体

为响应式网页设计优化排版的过程从选择合适的字体开始。

要做到这一点,网页设计师需要确保字体的大小足以让人一目了然。这一点对于移动设备尤其重要–用户不应该为了能够阅读文字而需要双击或捏合变焦。

选择能清晰缩放的字体,在电视大屏幕和智能手表的小屏幕上同样可读。一般来说,建议使用网络安全字体,如Helvetica,因为它们经过优化,在不同的分辨率下看起来都不错。

适当调整文字大小

在网络上,字体的大小可以有两种不同的方式。

绝对值(像素、点

相对值(百分比,em/rem,视口宽度或高度vw/vh)

让我们从最流行的选项开始–像素。像素是绝对值。用像素定义的字体大小将基于用户屏幕的像素大小。当你使用像素时,现代浏览器能够使你的设计在不同的分辨率下看起来相似。

由于大多数设计师都使用像素,这个单位在产品团队中非常流行。然而,像素不能使用户根据自己的需要调整文字,并使你的设计不那么容易获得。

另一个流行的选择是一个叫做em的相对值。当你使用em时,一个元素的em的实际大小是相对于其父元素的字体大小计算的。em相对值提供了两个重要的好处。

对设计师的好处。相对值允许嵌套字体大小。Em从它的父元素中继承其大小,而rem从根样式中继承。

对用户的好处。当你使用相对值时,你给了用户一个机会来改变他们喜欢的默认字体大小,网站会自动调整以适应他们的需要。

如果你用X编辑器建立一个网站,你可以用文本编辑器来缩放一个文本元素。

现在我们来讨论一下百分比。在字体大小为100%的情况下,一个页面中的所有元素的大小都是相对于浏览器的默认字体大小而言的。

body { font: normal 100% Roboto, sans-serif; }

最后但并非最不重要的是,当字体以 “vw “单位定义时,文本大小将跟随浏览器窗口的大小。

Hello World

另一件要考虑的事情是,不同设备的字体大小需要不同。它在桌面上应该大一些,在移动设备上应该小一些。同样,使用相对值的好处是,你不仅可以定义一个特定元素的理想尺寸,还可以定义该尺寸与其他元素尺寸的关系,在你的布局中保持良好的比例。

下面的CSS将为h1元素设置一个默认的字体大小,桌面版为3.5 rem,移动版为2 rem。

h1 { font-size: 3.5rem; } @media only screen and (max-width: 480px) { h1 { font-size: 2rem; } }

虽然没有精确的字体大小规则,但建议应用黄金比例来找到精确的字体大小。例如,如果桌面的基本字体是16px,那么标题h1的大小将通过基本字体大小乘以1.618来计算(大约是26px)。

如果你用Editor X建立一个网站,你可以用文本编辑器为一个文本元素设置最小和最大的字体大小。

你还可以为不同的断点设置文本在不同的最大和最小尺寸范围之间缩放,以使你的网站排版完全响应。这将确保你的文本在你调整屏幕大小时能顺利地缩放。

行长和行距

为了达到良好的可读性,你需要限制文本行的长度。一个好的经验法则是,桌面上每行使用50至60个字符,移动设备上每行使用30至40个字符。可以使用内容容器的宽度属性或使用Ch的 “长度值 “来限制每行的字符数。Ch代表元素字体中的字形 “0”(0,Unicode字符U+0030)的宽度。

p { overflow: hidden; max-width: 40ch; }

此外,你不应该挤压线条,因为行距太紧会导致眼睛疲劳。最佳的做法是使用120%-140%的行距,以获得良好的可读性。行高(line-height)CSS属性通常用于设置文本行之间的距离。我们可以用百分比来设置这个属性,使其与元素本身的字体大小相对应。

p {
line-height: 34%;
}

移动优先的设计

在过去的十年中,移动设备在我们的日常生活中扮演的角色发生了巨大的变化。事实上,56%的网站流量来自于智能手机。移动设计的优化是网页设计过程中的一个关键部分–因为一个没有针对移动设备进行优化的网站正在失去其大约一半的流量。

移动优先设计是一种方法,它建议设计师先创建一个在最小的断点上运行良好的布局,然后再针对更大的视口进行调整。

移动和桌面设计之间有三个关键区别。

显示器的大小。在手机上,你有更少的空间来显示你的内容,需要仔细地确定你想显示的内容的优先次序。

交互方式。由于用户在移动设备上使用他们的手指与内容互动,像悬停效果这样的动画就不能很好地发挥作用。

使用情境。人们可以在旅途中与内容互动(例如,在等待火车的时候),所以移动网站应该为较短的用户会话和较少的注意力而设计。

遵循移动优先的用户体验设计方法提供了几个主要的好处。

使得响应式设计更容易。它将帮助你确定内容和功能的优先次序,并删除一切不是绝对必要的东西。因此,你将有可能减少用户在移动端和你为之设计的任何其他平台的认知负荷。

有利于搜索引擎优化。谷歌评估网站的排名主要是基于其移动版本的内容。如果一个页面需要移动用户进行额外的互动,例如将内容放大以使其可读,那么谷歌可能不会判断它是移动友好的。你可以参加谷歌的移动友好测试,以检查你的网站的设计。

以下是你在进行移动设计时需要考虑的几个方面。

实行内容优先的策略

在你设计的每一个页面,都要考虑你想传达什么信息。围绕这个信息构建页面,并将基本信息放在折叠上方。例如,当你设计一个 “联系我们 “的页面时,把信息放在页面的顶部,这样用户就不需要通过滚动来找到它。

创建一个响应式网站的过程应该总是从规划布局开始。将你的内容和功能元素组织起来,为访问者提供尽可能好的体验。这并不意味着你需要从一开始就创建一个最终的、像素完美的设计。事实上,我们建议创建一个未来设计的示意图,以显示每一个包含内容和功能元素的块在页面上的位置。这样,你就可以与你的团队和利益相关者一起评估不同的布局变化,并选择你认为对你的用户最有效的那一个。

使用条件性加载

在确定内容的优先次序时,你可能想在移动设备上隐藏一些内容。CSS属性display: none; 允许你这样做。你可以在CSS中对需要隐藏的特定元素应用这个属性。例如,你可能有两个CSS样式,desktop.css用于台式机,mobile.css用于移动设备。

Desktop.css

#content { width: 100%; }

Mobile.css

#content { display: none; }

注意,display:none有时会与visibility: hidden混淆。这是两个不同的CSS指令。可见性:隐藏只是隐藏了内容,所以它变得不可见(没有被画出来),不能接受焦点,尽管它仍然在页面上。另一方面,”显示:无 “则完全摆脱了内容。

为舒适的互动而设计

用户通过点击与桌面网站互动,但移动版本则是通过手指的点击和滑动。人们也只用一只手来使用他们的移动设备,因此,优化网页布局,使所有的关键功能元素–如行动号召按钮–都位于对拇指友好的区域(用户不应该为了够到一个重要的元素而伸展他们的拇指)是很重要的。

什么是响应式网页设计,响应式网页设计的终极指南解析?

所有自来水目标的尺寸都应该适当。诸如行动号召按钮等功能元素的大小至少应该是9毫米,这相当于用户拇指的大小。如果你将两个互动控件并排放置,你需要在这些互动选项之间添加足够的空白。

使用清晰的视觉指示器

触摸屏没有显示悬停效果的能力,因为没有光标。UI的清晰度在移动设备上起着更重要的作用,重要的是要把每一个元素都设计成能让用户最大限度地理解其功能的方式。通过使用一致的视觉风格是可以实现这一目标的。例如,你可以对所有的互动元素使用一种特定的蓝色。

为移动端优化导航

大多数时候,网页设计师在移动端依赖汉堡包菜单。然而,可以利用一个更有利的模式,如prioity+导航模式。这种模式保证最优先的选项对用户来说总是可见的,而其余的选项则隐藏在 “更多 “链接后面。

牢记移动设备的硬件能力

加载时间慢是人们放弃网站的一个常见原因。Jakob Nielsen定义了三个响应时间限制。0.1秒给人以瞬时反应的感觉。理想情况下,你的网站应该在0.1秒内做出反应。1秒保持用户的思维流畅。10秒大约是保持用户注意力的极限。但根据谷歌的研究,当页面加载时间从1秒到3秒,跳出的概率会增加32%。

什么是响应式网页设计,响应式网页设计的终极指南解析?

什么是响应式网页设计,响应式网页设计的终极指南解析?

始终衡量你的网站性能。使用谷歌的速度记分卡和Dexecure等工具来跟踪你当前的性能,例如在移动端加载你的网站所需的时间。查看前端性能检查表,了解更多关于性能优化的信息。

如果你用Editor X建立一个网站,你的布局的网格中的设计元素会自动级联以适应不同的视口,所以当在一个较大的断点上进行修改时,会应用到每个较小的断点。

尽量减少打字

响应式网页设计不仅仅是让内容适合,它也是为了给你的用户创造更舒适的交互方式。在移动设备的情况下,打字是用户旅程中最痛苦的部分之一。

小屏幕使移动设备上的打字变得困难和容易出错。只要有可能,尽量在在线表格中使用预填数据。移动端的好处是,你可以利用它的一些硬件能力。

这里有一些关于如何尽量减少在移动设备上打字的提示。

使用GEO-location数据在运输和账单信息中预先填入用户城市。你可以使用谷歌的Places API来提供基于用户位置的准确建议。

使用设备摄像头,让用户拍摄信用卡的照片,并自动填写信用卡信息。

使用Touch ID/Face ID,而不是要求用户输入他们的凭证。

在搜索表单中使用语音输入。

在真实的设备和不同的浏览器上测试你的设计

当你完成你的网站工作时,你应该投入时间在真实的设备上测试它。创建一个用户在你的网站上应该完成的常见任务的清单,并邀请代表你的目标受众的人参加可用性测试会议。

在测试过程中,你可以看到你的网站在不同平台(安卓、iOS)上的工作情况,以及它的跨浏览器兼容性(Chrome、Safari、Firefox)。如果你怀疑某些CSS样式指令是否被某个特定的浏览器所支持,你可以在Caniuse中检查。测试将告诉你用户在哪里面临摩擦,以及你的网站在哪些方面需要优化。

响应式网站实例

解释响应式网站设计如何工作是一回事,看到实践是另一回事。看看下面的响应式网站设计例子,改变你的浏览器大小,看看每个设计是如何响应变化的。

什么是响应式网页设计,响应式网页设计的终极指南解析?

Taupe and Honey是一个为企业家服务的女性创意工作室,代表了一个简单而优雅的响应式网页设计的例子。该网站的布局可以根据浏览器的宽度灵活调整,并根据可用的屏幕空间来排列内容。当你在桌面上浏览该网站时,你可以看到一个分屏布局,很好地将视觉效果和文字搭配起来。

然而,一旦浏览器窗口变窄,内容就会重新流转,使布局更加垂直,因为它转变为单栏,为方便滚动进行了优化。请注意,该网站在桌面上显示了一个可见的顶层菜单,但在移动端却将其隐藏在汉堡包图标后面。字体大小也发生了变化,以便在不同类型的设备上创造一个舒适的阅读体验。

Swank Studio网站的截图将图片放在首位,并将文字降到最低。Swank Studio网站的截图将图片放在首位,并将文字降到最低。

斯万克工作室的图像导向型网站在移动设备上裁剪英雄图像,以展示主体的脸部,并将文字降到最低。

Swank Studio是一家豪华创意工作室,是我们名单中的下一个。这个网站遵循一种极简主义的方法–它使用最少的文字,并在很大程度上依靠图片来传达信息。在大屏幕上,关键信息周围的留白很宽敞,给网站的访问者创造了一个积极的印象。

什么是响应式网页设计,响应式网页设计的终极指南解析?

当你切换到移动端时,你会注意到两件事:图片被裁剪掉,以显示一个女人的脸,而文字的比例会根据需要调整,变得与屏幕的比例更大。这样做是为了在每个屏幕尺寸上保持视觉平衡,确保移动用户不会错过关键信息。

Domaine Alepin网站的截图,该网站在其主页上使用人字形布局,在移动端使用单栏式布局。

Domaine Alepin在其主页上使用人字形布局,在移动端则转换为单栏式布局。这简化了浏览体验,同时保留了内容。

在Domaine Alepin这个开发商的网站上,我们看到了一个类似的方法。该网站在主页上采用了 “之 “字形布局。

当浏览器窗口的宽度被最小化时,设计使用一个新的单栏布局。在较小的尺寸上没有删除任何内容,它只是重新安排了一个更好的观看体验。

图像对这个网站起着关键的作用,因此,确保每一个视觉的大小都按比例变化,不至于无法使用是至关重要的。你也可以注意到字体大小的变化,保持与屏幕的大小成比例。

最后,桌面和移动用户都可以使用的视差效果是一个相当不寻常的设计选择。通常情况下,视差滚动在移动设备上看起来并不漂亮,但Domaine Alepin能够在两个平台上都创造出漂亮的视差过渡。

你在创造好的内容方面投入越多,你的用户就越有机会喜欢你的网站。如果你使用Editor X,创建响应式网站的过程完全不涉及编码定义网格和断点,所以你可以专注于你希望观众看到的内容–无论他们在哪个设备上。

好了,这篇文章的内容正川号就和大家分享到这里!

主题测试文章,只做测试使用。发布者:星空,转转请注明出处:https://www.fjzcdq.com/z/1251.html

(0)
上一篇 2022-06-12
下一篇 2022-06-12

相关推荐

发表回复

登录后才能评论