《响应式Web设计:HTML5和CSS3实践指南》——1.5节基于媒介查询的图像缩放

简介:

本节书摘来自华章社区《响应式Web设计:HTML5和CSS3实践指南》一书中的第1章,第1.5节基于媒介查询的图像缩放,作者(美) Benjamin LaGrone,更多章节内容可以访问云栖社区“华章社区”公众号查看

1.5 基于媒介查询的图像缩放
媒介查询是针对响应式图像的另一个有用和高度可定制的方法。这与通过设置宽度百分比来实现自适应宽度的方法并不相同。你的设计可能需要为不同的屏幕尺寸范围准备一些具体的图像宽度,而自适应宽度会打破你的设计。

1.5.1 准备工作
这种方式仅仅需要一张图像。而且在客户端浏览器调整图像,而不是在服务器端。

1.5.2 实现方式
HTML代码相当简单,使用标准的图像标签创建一个图像元素,如下所示:


b649347263a9e327290b3800af269dc4da165af8

将CSS中的这个类添加到每个媒介查询中,所对应设置的尺寸都不相同。这将会使浏览器针对每个不同的尺寸窗口渲染所需的图像大小。媒介查询可与其他CSS类共存。接着,添加一个独立于媒介查询的CSS的类属性,设置图像属性为height:auto。这样只需添加一行CSS即可对两个媒介查询都起作用。


10afd57ea327f5c230eb170c224285e85f9c701d

通过媒介查询方法便可实现针对多个不同的浏览器窗口尺寸设置对应的图像尺寸。

1.5.3 工作原理
CSS3媒介查询在CSS中通过逻辑条件将浏览器依据窗口属性进行区分,并基于此来完成不同样式的渲染。该方法正是利用这一点来对不同的浏览器窗口尺寸设置一个不同的图像宽度。这提供了响应式的图像尺寸,因此你可以进行高粒度级别的控制。

相关文章
|
9天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
53 0
|
21天前
|
移动开发 前端开发 JavaScript
HTML5+CSS3+JavaScript网页实战
HTML5+CSS3+JavaScript网页实战
|
22天前
|
移动开发 前端开发 JavaScript
揭秘VSCode魔法工具箱:HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
揭秘VSCode魔法工具箱:HTML5 & CSS3 超强插件集合 + Css Reset与Normalize.css的终极对决
|
1月前
|
数据库 数据安全/隐私保护 Python
Web实战丨基于django+html+css+js的电子商务网站
Web实战丨基于django+html+css+js的电子商务网站
44 3
|
1月前
|
编解码 前端开发 JavaScript
响应式Web设计:适应所有屏幕的艺术与科学
【6月更文挑战第11天】响应式Web设计是适应各种屏幕尺寸和分辨率的网站设计方法,利用CSS3媒体查询、流动布局、弹性图片和JavaScript等技术实现。其原则包括灵活性、可用性和可访问性。最佳实践包括优先考虑移动设备体验、简化布局、优化资源、多设备测试和遵循Web可访问性标准。随着设备多样化,响应式设计成为现代Web设计的关键趋势。
|
1月前
|
前端开发 安全 数据安全/隐私保护
Web实战丨基于django+html+css+js的在线博客网站
Web实战丨基于django+html+css+js的在线博客网站
32 2
|
1月前
|
存储 前端开发 测试技术
Web实战丨基于django+html+css的在线购物商城
Web实战丨基于django+html+css的在线购物商城
38 2
|
1月前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
26 1
|
22天前
|
数据采集 移动开发 前端开发
HTML5 + CSS3 编程规范:构筑清晰、可维护的代码基石
HTML5 + CSS3 编程规范:构筑清晰、可维护的代码基石
|
26天前
|
前端开发
【Web开发】CSS教学(超详细,满满的干货)
【Web开发】CSS教学(超详细,满满的干货)
12 0