美文网首页
响应式图片

响应式图片

作者: Corall | 来源:发表于2017-06-07 17:55 被阅读0次

相对大小

max-width:100%
对于笔记本电脑或者台式机屏幕这样的设备,不要假设窗口尺寸和屏幕尺寸相同。
也不在假设窗口会一直保持相同大小
Max-width 可以设置在屏幕上100%显示,在电脑上最大显示是图片原来的大小。

display: flex;
使用display:flex ,里面的Div 不需要float:left, Div会自动向左浮动

Width:calc((100%-10px)/2)
简单的计算CSS 值, 【100%宽度下2张图片,10px边框】

Last-of-type
img:Last-of-type{margin-right:0}
最后一张图片没有右边距
练习:https://udacity.github.io/responsive-images/examples/1-08/imageRelativeWidth/index-quiz.html

横向和纵向
CSS单位
VH (view hight的缩写)
1VH = 1% 1
00VH = 100%

VW (view width的缩写)

[Vmin,vmax仅用于正文形图片]
Vmin: 1%的高度or 宽度,都是最小的
Vmax: 最大的
width:100vmax; height:100vmax , 图片会响应式铺满整个视图区域

栅格和矢量
文件格式 (view hight的缩写)
Paster : png \ img \ Webp
Vector: svg
压缩、优化和自动化
https://classroom.udacity.com/courses/ud882/lessons/3520939843/concepts/35820386070923#

图片处理工具:
ImageOptim (Mac) https://imageoptim.com/mac
Trimage - 和 ImageOptim 类似 (Windows, Mac, Linux) https://trimage.org/
ImageAlpha https://github.com/pornel/ImageAlpha

图片压缩工具:
市面上有许多工具可用来对JPEG和PNG文件执行进一步的无损压缩,且不会对图片质量造成任何影响。
对于JPEG文件,我们建议您使用jpegtran或jpegoptim(仅适用于Linux;使用--strip-all选项运行)。
对于PNG文件,我们建议使用OptiPNG或PNGOUT。

标记图片
CSS背景图片技艺
background-size:cover 把背景图像扩展至足够大,以使完全覆盖背景区域。某些部分也许无法显示在背景定位区域中。
background-size:contain 把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域

符号字符 https://udacity.github.io/responsive-images/examples/2-08/unicodeStar
例子:Unicode 代替图片
Unicode 字符集
Unicode 符号集合

图标字体的一些网站
http://weloveiconfonts.com/
https://css-tricks.com/examples/IconFont/
http://fontawesome.io/

9、SVG和数据 date rul行内图片

Date rul 提供了一种将文件,例如图片 内嵌为 base64 编码的字符串,

SVG 和数据 URI 行内图片
例子:
SVG Data URI in HTML
SVG Data URI in CSS
SVG text on a path
SVG optimized and unoptimized

行内 SVG 浏览器支持
数据 URI 浏览器支持
SVG 优化工具
Trajan 的 Column SVG 例子
20 个让你惊艳不已的 SVG 例子
SVG 动画示例

4 完全响应式
响应屏幕功能和视图
source set 中 W 功能
size="50vw" = 50%
transition:width 0.5s; 图片转换时的过渡


500w 是为了告诉浏览器图片的宽度,让它下载图片之前就知道哪个最合适。

一篇关于 srcset 的有趣文章
设备像素密度列表
关于像素密度的更多信息
Working with h units
Wikipedia wallabies

图片元素
<picture>
<source srcset="kittens.webp" type="image/webp">
<source srcset="kittens.jpg" type="image/jpeg">



</picture>
为浏览器提供可选择元素,第一个可行就用第一个,否则下一个

光猪六壮士
示例:
Picture element: art direction
Picture element: with srcset and media queries
Picturefill polyfill

相关文章

  • Bootstrap相关

    1.Bootstrap 样式之 响应式图片的处理 响应式图片处理 在bootstrap中如何使用响应式图片? 简单...

  • 响应式图片如何响应?如何居中?当然是Bootstrap!

    响应式图片如何响应? Bootstrap框架来制作响应式网站(或称之为响应式网页排版)真的很方便,特别是对于图片,...

  • 响应式图片

    相对大小 max-width:100%对于笔记本电脑或者台式机屏幕这样的设备,不要假设窗口尺寸和屏幕尺寸相同。也不...

  • 响应式图片

    前几日看了一篇关于响应式图片的文章,回想一下平时做的移动端开发,为了适配retina屏幕,一般都是直接选择2x图片...

  • 响应式图片

    第一种解决方法: img标签的srcset属性 参考img src 属性是 1x 候选项。1x代表DPR(设备像素...

  • 响应式图片

  • 响应式图片

    让一个网站达到在各种设备上都有良好的显示效果是一个很复杂的过程,这里总结一下响应式网站中图片如何适配的问题。 考虑...

  • 图片

    响应式图片 为图片设置.img-responsive类使图片支持响应式布局。本质是 这里需要让设置了img-res...

  • 字体图标,响应式图片,导航条

    字体图标 响应式图片 导航条

  • 响应式图片(一)

    网页中的图片 在最初的网页主元素是文字,自从图片的加入,使网页变得越来越多元化,网页的访问,简单流程是向服务期发出...

网友评论

      本文标题:响应式图片

      本文链接:https://www.haomeiwen.com/subject/iijafxtx.html