图片及其它

响应式内容

除了页面布局,还需要对诸如图片,表格等元素进行特别处理

  • 不同屏幕分辨率下,显示不同分辨率的图片
  • 不同带宽等场景下,显示的不同分辨率(尺寸)的图片
  • 高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函数为不同的设备设置不同的图片源

其它元素

参考

results matching ""

    No results matching ""