WE’RE
HERE

We’ll be happy to hear fram you, don’t
hesitate to get in touch

让网站响应执行

浏览次数:100发布时间:2016/03/22文章来源:华仕尊城设计文章分类:APP与移动网站
有一段时间,你可以自信地区分一个桌面网页和移动网页。所以,事实上,整个行业的成长在再利用移动桌面网站。  有一段时间,你是没有人如果...2016/03/22

有一段时间,你可以自信地区分一个桌面网页和移动网页。所以,事实上,整个行业的成长在再利用移动桌面网站。 

有一段时间,你是没有人如果你没有一网站建设个单独的移动网站在一个单独的域。然后事情开始改变。

移动显示器提高了所有的识别。移动浏览器。片中的另一个元素进入方程。4G来了。视网膜显示器为终端用户提供了新的清晰程度。

突然,桌面和移动之间的界线显得模糊。

在同一时间,有越来越多的多样性的大小和分辨率的桌面显示器。

和一个不断增长的头痛的网页设计师网站建设

过去当你只有迎合少数视口大小的天。事情变得复杂了。

幸运的是,有助于在手的形状的媒体查询和响应的概念设计。

由于媒体的质疑,它成为可能的不同的风格和布局–甚至内容–取决于用户的视口的宽度和屏幕分辨率。当然,媒体查询绝不是响应设计师的包中唯一的工具,但它是公平的说,他们形成的基础的技术。

这是伟大的消息,移动。响应的设计网站建设,意味着你可以有效地提供不同版本的相同的网站,以不同的设备。所有不开发一个单独的移动站点在不同的域。

表演呢?

网站所有者开始意识到,终端用户关心的性能。尤其是零售商们开始体会到,刮胡子的时间可以在资产负债表上转化为百万美元。

幸运的是,响应的网站提供一个明确的性能优势,他们的专用移动的表弟:重定向到一个移动域被淘汰。

然而,尽管这一点,响应式设计已经成功地获得了一点点的声誉,表现不佳。

在某些方面,这是不公平的,但它是值得一看的额外的性能,对粗心的响应式设计弹簧的挑战…

图像

图像文件是大的。因为他们是大的,他们往往要归咎于缓慢的负荷时间。因此,他们是一个很好的地方,开始为任何人试图优化网站的性能。

不幸的是,提供的图像是不好的响应性能的第一个解决方案之一。

这个技巧很简单。只使用最大宽度:100%,以确保图像规模的宽度的包含元素:

作为容器缩小到适合小视口内的任何图像,它会收缩。别 急 ! 慢慢 来!

但有一个问题。在屏幕上的图像的大小可能会缩小,但该文件的大小保持不变。从性能角度来看,这是远远不理想的。你可以发送一个800×800像素的图像下来的电线,只有在它被显示在80×80像素:换句话说,你可以发送数百(或数千)不必要的字节。不仅将图像需要网站建设很长的时间来加载,那些多余的字节可以消耗用户的宝贵数据津贴。

然而,这并不是唯一的,也不是最好的方式来传递反应的图像。对于一件事,一个图像,作品在800像素宽,不一定会工作,以及在不同的分数大小。

为了解决这个问题,你可以使用媒体查询通过使用媒体查询和显示的图像根据视口大小不同的版本。

 

这个作品很好:参观者只需要下载他们需要的图片,当他们需要的时候就可以下载了。问题是,它的整洁,有效治疗内容风格。因此,它可能会创建一个可维护性的问题,也可能导致重要的图像被忽略的搜索引擎。

相反,为什么不使用SVG(可缩放矢量图形):一种图像格式,其本质的尺度?SVG图像也有优势,他们很容易用CSS(制SVG响应CSS看到这个伟大的教程)。这是完美的图标和标志,但不幸的是,你不可以使用SVG的照片–这些你就不得不求助于栅格格式,如JPEG

另一种选择是使用一个JavaScript解决方案提供响应的图像。这是一种流行的方法,但它增加了另一层的复杂性。更重要的是,由于JavaScriptDOM结构,任何解决方案都涉及JavaScript有着渲染的潜力。所以,虽然有一些非常聪明的插件开发出来,

网站建设

只是通过引入JavaScript的方程,你是,在某种程度上,辞职自己两害相权取其轻。

直到最近,这是唯一的选择。

现在,然而,<图片><>元素,与srcset和大小的属性,终于带来了真正的Web响应图像。新的规范也开始获得浏览器的支持,在ChromeOpera的全面支持,并支持分辨率切换在Safari。直到其他浏览器的追赶,有一个优秀的JavaScript polyfill

在这个勇敢的新世界,你可以使用srcset设置了浏览器选择候选图像列表。然后,您可以使用大小属性中的媒体查询来决定图像将显示的大小。使用<图片>元素与媒体查询在一或两种以上的元素,你可以指定不同的条件下,不同的图像范围(如视口达到一定的宽度,使用图像ABC,和较大的视口中使用图像的XYZ)。这是有用的,如果你需要提供一个裁剪版本的图像为用户的小屏幕。

精确的细节如何使用新的语法是超出了本文的范围,但是网站建设你可以在alistapart找到一个优秀的教程。

也许这个新的规范,唯一的缺点是它很冗长,这可能意味着有很多图像在页面臃肿的HTML。然而,好处远远大于缺点。

加载CSS你不(一定)需要

虽然媒体查询允许您使用不同的CSS规则取决于你所设定的标准,这是无法摆脱的事实,最终用户必须下载所有可能适用的CSS。即使你把你的CSS在单独的文件中,地方媒体在<链接>元查询这是真的。

然而,它不必那样。这是完全可网站建设以创建一个响应的网站,这是每一个位的速度快,因为它需要的是和提供了一个优秀的用户体验。同时,随着标准和浏览器的开始,开发者们想要交付的东西,它应该开始变得更容易。

咨询电话:0755/29555722

(+86) 0755 2955 8889

518000

深圳宝安.西乡宝源.F518时尚创意园.17栋2楼

体验手机版您可以免费体验我们的服务(即时回复)

WWW.W-VI.COM
Copyright © W-Design. All Rights Reserved. 华仕尊城 版权所有 粤ICP 12007005-1 手机版 盗版必究 法律声明