图片及其它
响应式内容
除了页面布局,还需要对诸如图片,表格等元素进行特别处理
- 不同屏幕分辨率下,显示不同分辨率的图片
- 不同带宽等场景下,显示的不同分辨率(尺寸)的图片
- 高DPR的设备下显示高分辨率的图片,更能发挥高DPR设备的优势
- 同样的分辨率,但移动设备的物理尺寸更小,需要突出图片的细节
- 表格通常较宽,会致使整个页面出现水平滚动条
前景图: srcset
<img srcset="large.jpg 1x, medium.jpg 1.5x, small.jpg 2x"
src="./medium.jpg" />
HTML5 为 img 元素增加了两个新属性 srcset 和 sizes
srcset
属性允许浏览器根据设备的能力选择最佳图片. 上例中1x指DPR为1时应选择的图片来源- 在不支持
srcset
的浏览器上,src
属性指定默认的图片文件。
前景图: sizes
<img srcset="p-320.jpg 320w, p-640.jpg 640w, p-960.jpg 960w, p-1024 1024w"
sizes="(max-width: 960px) 100vw,
(max-width: 1024px) 93.7vw,
1024px" />
假定当前设备的屏幕宽度是1024px,浏览器从sizes属性查询得到,图片的显示宽度是93.7vw(即93.7%),约等于960px。而srcset属性里面,正好有960px的图片,于是加载p-960.jpg。从而使得图片与窗口之间具有了间距,可以模拟类似于960.css栅格系统的效果
sizes属性必须与srcset属性搭配使用
前景图:
<picture>
<source media="(min-width: 800px)" srcset="nav.jpg, nav-2x.jpg 2x"
<source media="(min-width: 450px)" srcset="nav-small.jpg, nav-small-2x.jpg 2x">
<img src="nav.jpg" srcset="nav-2x.jpg 2x" alt="不支持Picture场景下激活">
</picture>
html5
新增元素标记,支持类似<img>
的语法,同时支持media
,type
等高级属性
背景图
.logo {
background-image: image-set(
url(logo@1x.png) 1x,
url(logo@2x.png) 2x
);
}
除了基于media-query为不同设备设置不同的图片源,background-image
属性允许使用image-set
函数为不同的设备设置不同的图片源
其它元素
- for table https://github.com/filamentgroup/tablesaw
- for embed resource http://embedresponsively.com/
- for email http://emailframe.work/
参考
- https://ailongmiao.com/read/571.html
- https://zhuanlan.zhihu.com/p/43556019
- https://cloud.tencent.com/developer/article/1498991
- https://guozeyu.com/2015/08/using-srcset/
- for img with picture element, srcset and sizes attributes http://scottjehl.github.io/picturefill/
- 给Web页面提供正确图像的姿势 https://www.w3cplus.com/css/img-and-picture-load-correct-image.html