HTML5响应式图片技术中文图解_编程语言论坛_课课家技术论坛

首页视频课程模拟题库新闻中心 IT文库读书招聘博客论坛

我的课课家

软考 photoshop oracle PHP hcnp Maya java

名课折扣免费课程套餐学习线路图

专题课程

老男孩Linux系统设计软件教程计算机考证

公众号/APP端

扫码关注课课家微信号，访问移动端

关注微信公众号，可下载APP应用。

帮助中心创建学院

下载安卓APP

给我发消息

客服QQ：3315713922

论坛 >编程语言 >HTML5响应式图片技术中文图解

HTML5响应式图片技术中文图解

希尔瓦娜斯发布于 2017-12-19 10:05查看:1278回复:1

一、本文内容干货量远不及之前的那篇

首先，需要声明，或者叫告知吧，就是，本文属于补充，真正关于响应式图片技术的干货内容参见我之前的“响应式图片srcset全新释义sizes属性w描述符”一文。

另外，补充了一些遗漏的关于响应式图片处理的tips.

1. 作为背景图片，image-set()这厮
这个是我自己补充的，精力有限，我就不作图了，嘻嘻，使用示意如下(目前需要-webkit-私有前缀)：

兼容性如下：

2. 尺寸固定，密度变化

这里出现了srcset，兼容性如下：

3. 尺寸和密度都变化

4. 尺寸，密度，资源都变化

5. 不同的图片类别

查看评分情况

全部评分

此主贴暂时没有点赞评分

总计：赞0次

版主推荐

上一篇：DOM元素querySelectorAll可能让你意外的特性表现
下一篇：python 线程之 Condition

精品在线课程【一线专家讲授+24小时内答疑+永久免费观看+市场1/10价格】

共有1条评论

spring
楼主你知道的太多了
2017-12-20 09:23赞 (0)回复沙发

本论坛发帖,请先登录

版主招版主啦

IT宅男
mr jack
Mr ken
Mright
cappuccino
YUI
课课家运营团队
课课家技术团队1
酸酸~甜甜

课程推荐

【第三季】全国计算机二级VB强化冲刺视频教程

【第三季】全国计算机二级VB强化冲刺视频教程: 17114人学习

大数据之Java内力提升视频教程

大数据之Java内力提升视频教程: 77580人学习

springmvc深入浅出（javaee高级课程，struts同类）视频教程

springmvc深入浅出（javaee高级课程，struts同类）视频教程: 19627人学习

VB6.0连接Access、Sql-Server数据库制作多权限用户的管理系统视频教程

VB6.0连接Access、Sql-Server数据库制作多权限用户的管理系统视频教程: 5284人学习

楼主关注

热门贴子

1
简历中千万别再写“熟练操作office办公软件”
回复:6查看:28807被赞:0
2
信息系统项目管理师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:26879被赞:0
3
3DMAX打开文件时显示缺少dll解决方案
回复:25查看:15687被赞:0
4
3DMAX渲染大图Vray3.0中文版参数设置
回复:6查看:15022被赞:2
5
系统规划与管理师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:14631被赞:0
6
网络规划设计师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:13346被赞:0
7
PS的各种颜色参数，需要的请收藏
回复:3查看:13130被赞:0
8
网络工程师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:12015被赞:0
9
系统集成项目管理师视频备考资料（包括百度云盘下载、电子版教材、历年真题）
回复:0查看:12003被赞:0

1
PHP与MySQL通讯那点事（1）
回复:1查看:3581被赞:0
2
JavaScript 深入之词法作用域和动态作用域
回复:1查看:3531被赞:0
3
SQL -- 字符串的长度，是字符数量，还是字节数量？
回复:1查看:3386被赞:0
4
用Python的 __slots__ 节省9G内存
回复:1查看:3353被赞:0
5
File杂谈——初识file控件
回复:1查看:3264被赞:0
6
浅谈 Node.js 单线程模型
回复:1查看:3212被赞:0
7
Python 中 eval 带来的潜在风险
回复:1查看:2969被赞:0
8
Python中的str与unicode处理方法
回复:1查看:2913被赞:0
9
窥探Swift之数组
回复:1查看:2796被赞:0

发布新贴

选择版块:
标题:
内容
验证码:

编辑帖子

标题:
内容
<p><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"></span></p><h3 style="border: 0px; margin: 0px 0px 20px; padding: 0px; font-size: 20px; font-stretch: normal; line-height: 30px; font-family: "Microsoft YaHei", "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; color: rgb(46, 46, 46); white-space: normal; background-color: rgb(255, 255, 255);">        一、本文内容干货量远不及之前的那篇</h3><p><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">          首先，需要声明，或者叫告知吧，就是，本文属于补充，真正关于响应式图片技术的干货内容参见我之前的“</span>响应式图片srcset全新释义sizes属性w描述符<span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">”一文。</span><br/><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"></span></p><p><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"></span></p><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">        另外，补充了一些遗漏的关于响应式图片处理的tips.</p><p style="border: 0px; margin-top: 0px; margin-bottom: 20px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);"><strong style="border: 0px; margin: 0px; padding: 0px;">        1. 作为背景图片，image-set()这厮</strong><br/>        这个是我自己补充的，精力有限，我就不作图了，嘻嘻，使用示意如下(目前需要<code style="border: 0px; margin: 0px; padding: 0px; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;">-webkit-</code>私有前缀)：</p><p style="text-align: center;"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><img src="/Public/forum/ueditor/image/20171219/1513649027803905.png" title="1513649027803905.png" alt="image.png"/></span><br/></p><p><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">        <span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">兼容性如下：</span></span></p><p style="text-align: center;"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><img src="/Public/forum/ueditor/image/20171219/1513649044138311.png" title="1513649044138311.png" alt="image.png"/></span></span></p><p><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">        2. 尺寸固定，密度变化</strong></span></span></p><p style="text-align: center;"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><img src="/Public/forum/ueditor/image/20171219/1513649064586119.png" title="1513649064586119.png" alt="image.png"/></span></span></p><p><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">        <span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">这里出现了</span><code style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; color: rgb(46, 46, 46); white-space: normal; background-color: rgb(255, 255, 255);">srcset</code><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">，兼容性如下：</span></span></span></p><p style="text-align: center;"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><img src="/Public/forum/ueditor/image/20171219/1513649079319512.png" title="1513649079319512.png" alt="image.png"/></span></span></span></p><p><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);">        </span></span></span><strong style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; border: 0px; margin: 0px; padding: 0px;">3. 尺寸和密度都变化</strong></p><p style="text-align: center;"><strong style="border: 0px; margin: 0px; padding: 0px;"><img src="/Public/forum/ueditor/image/20171219/1513649102118204.png" title="1513649102118204.png" alt="image.png"/></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px;"><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">        4. 尺寸，密度，资源都变化</strong></strong></p><p style="text-align: center;"><strong style="border: 0px; margin: 0px; padding: 0px;"><img src="/Public/forum/ueditor/image/20171219/1513649124246323.png" title="1513649124246323.png" alt="image.png"/></strong></p><p><strong style="border: 0px; margin: 0px; padding: 0px;"><strong style="border: 0px; margin: 0px; padding: 0px; font-size: 15px; color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; white-space: normal; background-color: rgb(255, 255, 255);">        5. 不同的图片类别</strong></strong></p><p style="text-align: center;"><strong style="border: 0px; margin: 0px; padding: 0px;"><img src="/Public/forum/ueditor/image/20171219/1513649141257748.png" title="1513649141257748.png" alt="image.png"/></strong></p><p><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><br/></span></span></span><br/></p><p><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><span style="color: rgb(46, 46, 46); font-family: "Microsoft YaHei", 宋体, "Myriad Pro", Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 15px; background-color: rgb(255, 255, 255);"><br/></span></span></p>
选择版块: