Responsive

响应式图片使用指南(Part4)

前面我们花了较多的篇幅围绕着 HTML 的 <img> <picture> 元素是如何构建响应式图片。在 <img> 标签元素上可以使用 srcsetsizes 属性大不同环境下提供不同尺寸的图片;在 <picture> 中使用 <source> ,并且结合mediasrcsetsizestype等属性可以为用户提供不同图片(环境不同提供不同的图片)和不同类型图片(type指定图片类型)等。但在 Web 开发中,很多时候还会使用背景图片(background-image)、边框图片(border-image)和蒙板图片(mask-image)等。我们接下来围绕着 CSS 中的背景图片(background-image)来展开,换句话说,在background-image中是否也可以像 <img><picture> 一样,根据用户环境来提供不同的图片。

响应式图片使用指南(Part3)

这是有关于响应式图片使用的第三部分,在第一部分中主要和大家一起聊了些和响应式布局相关的概念和术语;第二部分主要和大家聊的是<img>新增属性srcsetsizes如何让我们根据用户代理环境加载不同尺寸的图片。而今天将和大家一起探讨 HTML5中的<picture>元素又是如何帮助我们根据用户代理的环境加载不同的图片。如果你对这方面感兴趣的话,请继续往下阅读。

容器查询给设计带来的变化

前段时间我们花了几篇篇幅的内容来介绍 CSS 容器查询特性的使用,并且介绍了现代 Web 布局技术让我们离 CSS 容器查询更近一步,但这些内容都只是和大家聊的是如何使用,以及其对 Web 开发者带来的变化。在介绍 CSS 容器查询特性的时候,也提到过,CSS 容器查询特性除了给 Web 开发者带来变化的同时也给 Web 设计者带来变化。那么,今天我们来和大家一起聊聊 CSS 容器查询给设计将带来什么样的变化。感兴趣的同学,请继续往下阅读。

现代Web技术让我们离容器查询更近一步

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革,十年后的今天,CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大,但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过,庆幸的是,现代的一些 Web 技术(比如,FlexboxGrid媒体查询比较函数等)让我们离容器查询特性更近一步。今天我们来看看,这些现代Web技术是如何让我们离容器查询更近一步。

容器查询中的 container 和 @container

从《初探CSS容器查询》一文中我们知道了容器查询是是什么以及它的作用。使用 contain来创建一个包含上下文,同时使用 @container 规则,可以在符合条件下为查询容器的后代单独指定样式规则。简单地说,可以使用 CSS 容器查询,让同一个组件根据其容器的不同尺寸向用户呈现不同的UI效果。该特性目前是 CSS Containment Level 3 中的一个特性,这个功能模块中除了 contain@container 之外,还新增了一个容器属性 container,也可以使用 container@container 结合实现容器查询效果。在这篇文章中,我们就来看看 container@container 是如何工作的,它们可能会有哪些功能!感兴趣的同学,请继续往下阅读!

初探CSS容器查询

CSS的原生嵌套、作用域(@scope)、级联层(@layer和容器查询(@container)被称为 下一代 CSS,并且在整个社区得到热议。比如,刚举办的 W3C TPAC 会议就专门有一个这方面的话题。尤其是容器查询(@container),更令人兴奋。从基于页面的响应式设计到基于容器的响应式设计的转变,将对Web设计生态系统的发展产生巨大的影响。因为,容器查询将使单个元素有可能根据局部的环境进行调整,而不是依赖整个视窗的尺寸。从今天开始,我将和大家一起进入容器查询的世界,和大家一起了解为什么需要容器查询,它们将来何使Web设计和开发变得更轻松,最重要的是,容器查询将现更强大的组件和布局,尤其是响应式的布局。

响应式图片使用指南(Part2)

响应式图片在响应式 Web 设计中一直以来都是较为头疼的地方,除了图片的适配难于处理之外,还有就是图片的加载问题。庆幸的是,HTML 给 <img> 标签新增了srcsetsizes属性,我们可以在这两个属性上提供足够的信息,来告诉浏览器,从而让浏览器自已根据所对应的环境加载最合适的图片。那么在这一部分,我们主要来探讨 <img>srcsetsizes属性,以及了解浏览器是如何根据这些信息来选择合适的图片。如果你对这方面知识感兴趣的话,请继续往下阅读。

响应式图片使用指南(Part1)

图片是 Web 页面上最重要的媒体元素,它可有效的向用户传递信息,但在 Web 的近三十年发展历史中,它们的适应性一点都不强。关于图片的一切,比如图片的尺寸、格式和裁剪都被其单一的 src 属性设定像顽石一样的固定下来。特别是当高清屏幕(高分辨率屏幕)和 Web 响应式设计的到来,Web 开发者更进一步感受到了图片在 Web 上使用的限制。庆幸的是,近几年随着 Web 技术的发展,<img> 元素也得到进一步的改变,它不再局限于 src 属性引入图片,也不在局限于 widthheight 属性设置图片尺寸。Web 开发者可以使用新的 srcsetsizes 属性让图片更好的适应于高分辨率的屏幕和响应式设计。除此之外,HTML5 还提供了一个新的元素标记 <picture> 来更改显示的图片以适应不同的图片显示尺寸,而且还可以在background-image 使用 image-set() 函数为不同DPR屏幕显示不同图片。虽然在《聊聊img元素》一文中详细介绍过 <img> 的使用,而且在该文中有介绍过 srcsetsizes 以及 HTML5 的 <picture> 的使用,但并无法很好的帮助大家在响应式设计中使用图片。为了更好的了解和掌握响应式图片在Web中的使用,将和大家一起深度探讨这方面的话题。希望对大家在使用图片的时候有所帮助。

响应式网格布局

从文章标题中不难发现这篇文章要和大家聊的是两个东东,即响应式网格。从布局系统来说,响应式布局和网格布局都不是什么新东西了。但是他们结合在一起,可以让响应式布局变得更灵活。正如@Keir Watson所说,只要20行代码就可以实现响应式网格布局。不过,我们今天来看两个比较有意思的布局,看上去并不是很容易实现的布局效果。

给CSS加把锁

看到该标题,我想你可能会感到非常的意外和好奇,“CSS怎么能加把锁呢”?其实这里所说的给CSS加把锁是指业内所说的CSS Locks(或者CSS calc Lock)。该概念是@Tim Brown在2012年提出的一个概念,该技术其主要致力于解决文本排版可读性相关的技术难度,特别是在实现一些精准的流式布局中的文本排版。在《Web技术10》中也提到过,@Mike Riethmuller、@Tim Brown和@Geoff Graham都在致力于这方面的研究,而且找到了使用CSS锁技术方案来锁定流式排版。让我们实现一个精准的流式排版不再是难题。在今天这篇文章,我们来一起探讨一下CSS锁的故事。

页面

返回顶部