响应式图像

将picture元素和srcset,sizes属性纳入html5规范,新规范意在解决:

  • 基于设备象素比(device-pixel-radio)选择
  • 基于viewport选择
  • 基于Art direction(美术设计)选择
  • 基于图像格式选择

一、固定宽度图像:基于设备像素比选择

  srcset属性列出了浏览器可以选择加载的源图像池,是一个由逗号分隔的列表。x描述符表示图像的设备像素比。浏览器根据运行环境,利用这些信息来选择适当的图像。不理解srcset的浏览器会直接加载src属性中声明的图像。

<img srcset="crest-383.jpg 1.5x, crest-510.jpg 2x" src="crest-255.jpg" alt="USWNT crest" />

网站logo就是固定宽度图像的一个例子,不管viewport的宽度如何,始终保持相同的宽度。

与内容相关的图片,通常也需要响应式,它们的大小往往随viewport改变。对于这类图像,还有更好的处理方法。

二、可变宽度的图像:基于viewport选择

1. 对于可变宽度的图像,我们使用srcset搭配w描述符以及sizes属性 。w描述符告诉浏览器列表中的每个图象的宽度。sizes属性是一个包含两个值的,由逗号分隔的列表。根据最新规范,如果srcset中任何图像使用了w描述符,那么必须要设置sizes属性。

2. sizes属性有两个值:第一个是媒体条件;第二个是源图尺寸值,在特定媒体条件下,此值决定了图片的宽度。需要注意是,源图尺寸值不能使用百分比,vw是唯一可用的CSS单位。

<img srcset="uswnt-480.jpg 480w, 
             uswnt-640.jpg 640w, 
             uswnt-960.jpg 960w,
             uswnt-1280.jpg 1280w" 
     sizes="(max-width: 400px) 100vw, 
            (max-width: 960px) 75vw, 
            640px" 
     src="uswnt-640.jpg" alt="USWNT World Cup victory">

 上例中,我们告诉浏览器在viewport宽度小于400像素时,使图像的宽度与viewport等宽。在viewport宽度小于960像素时,使图像的宽度为viewport宽度的75%。当viewport大于960像素时,使图像的宽度为640像素。

vm

当处理宽度的时候,%单位更合适。处理高度的时候,vh单位更好。

1. 占满宽度的元素: % > vw

正如我所提到的,vw单位根据视窗的宽度决定它的大小。然而,浏览器是根据浏览器的窗口计算视窗大小的,包括了滚动条的空间。

如果页面延伸超过视口的高度——滚动条出现——视窗的宽度将会大于html元素的宽度。

因此,如果你将一个元素设置为100vw,这个元素将会延伸到htmlbody元素范围之外。在这个例子中,我用红色边框包裹html元素,然后给section元素设置背景颜色。

因为这个细微的差别,当使一个元素横跨整个页面的宽度时,最好使用百分比单位而不是视口的宽度。

2. 占满高度的元素:vh > %

在另一方面,当使一个元素跨越整个页面的高度时,vh远比百分比单位好。

因为用百分比定义的元素的大小是由它的父元素决定的,只有父元素也填满整个屏幕的高度时我们才能拥有一个填满整个屏幕的高度的元素。

然而,用vh的话,就像下面写的那么简单:

.example {
  height: 100vh;
}

  不管.example元素如何嵌套,它还是能够相对于视窗尺寸设置大小。滚动条的问题也不是一个问题,因为现在大多数页面通常不会有水平滚动条。

vh应用

全屏背景图片

vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片,不管设备的大小。这用vh很容易实现:

.bg {
  position: relative;
  background: url('bg.jpg') center/cover;
  width: 100%;
  height: 100vh;
}

占满全屏的内容块像“多页面”一样

section {
  width: 100%;
  height: 100vh;
}

我们可以用javascript来实现翻动页面的错觉。

$('nav').on('click', function() {

  if ( $(this).hasClass('down') ) {
    var movePos = $(window).scrollTop() + $(window).height();
  }
  if ( $(this).hasClass('up') ) {
    var movePos = $(window).scrollTop() - $(window).height();
  }

  $('html, body').animate({
    scrollTop: movePos
  }, 1000);
})

兼容性

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏每日一篇技术文章

weex-21-animation模块

我们在开发应用的时候,常常需要增加一些动画效果,来提高用户体验,经常用到的一些动画效果如下

24210
来自专栏偏前端工程师的驿站

JS魔法堂:通过marquee标签实现信息滚动效果

一、前言                                      有限的空间展现无限的内容,这是滚动最常用到的地方。根据信息滚动效果我们可以有...

27270
来自专栏韦弦的偶尔分享

微信小程序仿APP section header 悬停效果

在onReady方法中,查询section-header节点并拿到该节点此时距离当前顶部的距离

40510
来自专栏HTML5学堂

前端特效开发 | 图片翻转的制作

HTML5学堂(码匠):在前端开发中,针对效果层面的开发,使用原生JS往往会因其冗长的代码严重影响到开发进度。比如一个简单的图片翻转效果,我们能否考虑借助某些简...

53970
来自专栏前端萌媛的成长之路

Flex布局

27030
来自专栏达摩兵的技术空间

与我一起学css3:background-size,-clip

大家好,今天与大家一起学习分享css3中的background-size,background-clip使用与实践。

12220
来自专栏lonelydawn的前端猿区

keyframes在不同浏览器中的表现性

一、keyframes的使用方法 keyframes是css3实现动画的一种方式。 简单的使用规则如下: 先定义元素的动画样式,并设置动画的名称 selecto...

38660
来自专栏HTML5学堂

标签的选择

这么多篇文章下来,大家对如何进行页面布局想必已经有了自己的一些想法,特别是上周的文本样式的介绍,让大家可以实现了对整个页面的搭建以及制作。所以基本的制作已经没有...

35890
来自专栏web开发

img标签实现和背景图一样的显示效果——object-fit和object-position

不知大家在做前端页面的时候,有没有遇到类似这样的问题:有一个不是正方形的图片,可能是宽度大于高度的,也可能是高度大于宽度的,而你又并不想用背景图的方式来做,要实...

41360
来自专栏web前端-

Swiper实现全屏视觉差轮播

Swiper作为当代流行的js框架,非常受到青睐,这里演示swiper在pc端全屏视觉轮播的效果,这也是pc端常用的一种特性

67730

扫码关注云+社区

领取腾讯云代金券