十载风雨路 · 匠心铸精品

量身定制 追求完美

北京建站公司分享响应式图像解决方案

  北京做网站公司杰诚网提供北京做网站、北京百度优化服务

  

  自从2010年Ethan Marcotte开始讨论响应式网页设计,开发者和设计师们竞相寻求处理响应式图片的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在众多设备宽度下,使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像?你愿意在你的手机上加载一个巨大的(虽然更漂亮的)图像?这个问题令北京建站公司左右为难。

北京建站公司

  一群来自响应式问题社区组(RICG)的聪明家伙致力于解决这个难题,他们使picture元素和srcset、sizes属性纳入HTML 5.1规范草案 。因为我们无法预测用户在何地以及如何访问我们的网站,所以北京建站公司需要浏览器自身根据情况选择最好的图像。新规范将解决以下问题:
  基于设备象素比(device-pixel-radio)选择
  基于viewport选择
  基于Art direction(美术设计)选择
  基于图像格式选择
  该规范中,img元素增加了两个新属性:srcset和sizes。srcset用来声明一组图像源,浏览器根据我们使用描述符指定的条件来选择图像。描述符x表示图像的像素密度,描述符w表示图像的宽度;浏览器使用这些信息从列表中选择合适的图像。sizes属性为浏览器提供将要显示图像的尺寸信息,srcset使用w描述符时必须包含此属性。这种方法尤其适用于可变宽度的图像,我将在后面详细讨论。
  北京建站公司现在可以根据用户的viewport,提供不同质量或美术设计(art direction)的图像,无需借助复杂的服务器端设置。响应式图像将成为HTML规范的重要组成部分,所有浏览器终将都会支持此解决方案。
  固定宽度图像:基于设备像素比选择
  视网膜屏幕的广泛应用,使我们不仅需要考虑屏幕分辨率,而且也需要考虑像素密度。视网膜屏幕,4K显示器,UltraHD-它们都比相同尺寸的标准分辨率显示器填充了更多的像素。更多的像素=更清晰的图像。
  北京建站公司有些图片不管屏幕尺寸,始终以固定宽度显示-如站点logo或人物简介图像,也就是说需要根据设备像素比来选择。浏览器将根据设备像素比来选择加载哪张图像。
  srcset属性列出了浏览器可以选择加载的源图像池,是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境,利用这些信息来选择适当的图像。不理解srcset的浏览器会直接加载src属性中声明的图像。
本文来源于:北京做网站 www.web010.com.cn

北京建站新闻

杰诚网络每一次的成长都离不开您的鼎力支持

CopyRight 2011-2019 JCDNS.COM All Rights Reserved 北京专业建站公司-杰诚网络   服务热线:010-59814526   京ICP备05035226号
杰诚网络专业承接北京建站,北京建网站,提供北京建网站、百度优化相结合的北京建站公司方案,由北京建站公司专业人员结合百度优化经验为您建网站
电话:010-59814526 网址:http://www.jcdns.com