三个 R的响应网页设计

分享于 

9分钟阅读

Web开发

  繁體

介绍

如今的网站不仅提供传统的桌面显示器,还提供电视机和手持移动设备如平板电脑和智能手机等。 尽管各种屏幕大小,消费者不断地连接和在设备之间切换。 因此,为企业建立一个良好的多屏幕站点,为所有屏幕提供一致的用户体验,这是必须和挑战的。 这特别是智能手机的true,在多屏市场上最快的生长设备,屏幕空间是最高的。

网站如何提供如此巨大的屏幕,并保持未来的新屏幕? 答案在于响应网页设计。 在本文中,我将介绍三种设计责任网的关键方法。 他们是 Retile , 替换 以及 调整大小 我认为这是"的R 负责网页设计"的。 首先,让我们了解一下新的多屏幕世界的现实和挑战。

让我们面对现实吧

在 2012研究谷歌的"导航新的多屏幕世界: 通过对不同设备使用不同设备的了解,发现大多数人使用多个设备进行在线活动,如图 1中的infograph所总结的:

image001

图 1: 客户媒体行为( 来源: ) Google )

搜索排名提升

谷歌推出了谷歌推出的手机友好更新软件,可以提升手机友好网页的搜索排名,从而提高了搜索效率。 有关移动友好更新的更多信息,请参阅谷歌常见问题解答( )。

image007

图 2: 谷歌提升移动友好站点的搜索排名

谷歌推出了一套全新的移动友好排行榜,在谷歌上宣布将在不久的将来推出自己的手机友好排名。

多屏幕友好选项

在新的多屏幕世界和mobile-friendly-favoured搜索排名中考虑消费者的行为,网站现在必须满足消费者在所有屏幕上的需求- - 从电视到笔记本电脑- - 从电视到平板电脑- - 一直到智能手机。 无论消费者使用什么屏幕,他们都希望它能正常工作。 这对于智能手机和平板电脑来说尤它的是 true,使用者期望从不需要手势的大屏幕上获得相同的内容和用户。

你可以采用三种基本方法来实现多屏幕友好的网站: 收费独立网址 Dynamic Dynamic动态服务,以及Responsive响应网页设计。

单独的url

的每一个URL都为屏幕大小指定了不同的网页集。 这种方法将用户使用的设备类型检测出来,并将请求重定向到特定于设备的URL host这些网页专门为该设备设计的那些网页 that。

动态服务

一个单一的URL 承载多个网页,每个网页都针对指定的屏幕大小进行了优化。 在这里方法中,web服务器检测用户使用的设备类型,并传递特定于该设备的网页。

响应式网页设计

一个单一的URL 提供一个公共页面集,以响应屏幕大小和方向的变化,以不同方式呈现自己。 使用响应性的web设计,每个网页都能自动和动态地检测它的视图设备的大小和方向。

两种不同的url 和动态服务方法都是资源密集型的解决方案,因为它们必须创建和维护相同内容的多个基本 codebases。 这里外,在长期运行时,对现有代码进行调整或者开发新代码将不可以避免地为新设备。 换句话说,它们不是未来的证据。

另一方面,只需在客户端实现单一的网址,并拥有所有动态检测和响应的渲染,是实现多个屏幕友好网站的最佳方法。 而且,它也是未来的证据。

R 响应式网页设计中的三

在多个屏幕大小中放置单个HTML代码是可行的,但不会改变它的对不同屏幕大小的视图。 在桌面的屏幕上跨多个列的网页不能很好地适应智能手机( 图 4 ) 屏幕。

图 3: 桌面的视图

图 4: 智能手机上的相同视图

因此,根据相同的内容设计针对智能手机。平板电脑。桌面和较大桌面的屏幕的不同视图是必要的。 在这方面,我已经确定了设计责任网的三种。 他们是 Retile , 替换 以及 调整大小 我认为这是"的R 负责网页设计"的。 让我们一个一个来认识他们。

Retile

在桌面屏幕上,有大量的屏幕,有丰富的宽度,可以将多段内容放在屏幕上,。 不过,在平板电脑和智能手机的屏幕上,将这些内容段放在一个 上面 上,以保持网页的可读性和可用性,这样做是一个。 换句话说,你需要定位,换句话说,,你的网页部分作为优化不同屏幕大小的视图的途径。

image015

图 5: 平板电脑的平铺视图

替换

在像桌面这样的大屏幕上,导航栏通常水平显示在屏幕( 图 6 ) 上。 不过,在平板电脑和智能手机等小型屏幕上,用 icon 将导航栏显示为一个,以垂直切换导航栏的显示,这是commoner到。

图 6: 桌面的水平导航栏

图 7: 智能手机上的icon 替代导航栏

图 8: 在 icon 中垂直展开导航栏

调整大小

不可以想象的是,标题和图像等大元素的尺寸需要更改,以便它们适合不同的屏幕尺寸。 例如,在桌面屏幕上看起来很精细的尺寸在智能手机上出现错误,如下图 9所示:

图 9: 智能手机上的超大型元件

毫无疑问,你必须调整这些元素的大小,以优化智能手机的视图,如图 10所示。

图 10: 智能手机上的最佳尺寸

媒体查询

要编写三个 R 响应性web设计,你必须在需要更改的各个断点处接入css查询的媒体。 媒体查询是CSS3中引入的强大的CSS特性。 它可以根据媒体类型。viewport大小。分辨率和方向等条件,在各种设备上最佳地呈现相同的HTML内容。

媒体查询包括媒体类型,如屏幕和打印,零或者更多媒体特征,如宽度和高度。 媒体查询的媒体类型和媒体特征构成了解析为 true 或者 false的表达式,该表达式基于它的包含的medium。 查看以下媒体查询示例:





@media screen {


 div {


 display: none


 }


}







@media screen and (max-width: 768px) {


 div {


 display: block


 }


}







@media screen and (min-width: 992px) {


 div {


 display: inline


 }


}







@media screen and (min-width: 768px) and (max-width: 992px) {


 div {


 display: inline-block


 }


}



通过将三个 R 响应网页的创造性和创新应用相结合,css查询媒体的编程能力将使你能够将相同的HTML内容放在任何屏幕功能的设备中。

摘要

在本文中,你已经了解了多屏幕友好网站的需求和原理。 you learned css css R responsive media media media media media media media media css css css css css css screen screen。

在 R Blog的 Peter代码中,的三个React性网页设计( ) 是最先出现。


相关文章