展开

关键词

初探image-set及如何适配移动端高清屏图片

20700

img标签中的srcset属性有什么用?

同时,css属性image-set()支持根据用户分辨率适配图像。  body {      background-image: -webkit-image-set( url(.. /images/pic-3.jpg) 600dpi);      background-image:         image-set( url(..

12120
  • 广告
    关闭

    什么是世界上最好的编程语言?丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    高清ICON SVG解决方案(下) - 腾讯ISUX

    icon2"> <use xlink:href="/svg/symbol.svg#icon2"></use> </svg> 新的方案:Svg Sprites +Png Sprites + Image-set CSS4 Image-set 这里应该有人会觉得也可以使用Media Queries来进行判断处理在Retinal来加载SVG Sprites,但其实Image-set它和Media Queries有些许

    58610

    web图像的常见应用策略与技巧

    css里的图像写法如下面的例子 background-image: image-set none; 利用的技术是CSS3多背景,浏览器只要支持了多背景,几乎无一例外支持SVG 再或者 background-image: url(fallback.png); background-image: image-set ( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi ); 通过image-set来筛选和回退。

    16830

    web图像的常见应用策略与技巧

    css里的图像写法如下面的例子 background-image: image-set none; 利用的技术是CSS3多背景,浏览器只要支持了多背景,几乎无一例外支持SVG 再或者 background-image: url(fallback.png); background-image: image-set ( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi ); 通过image-set来筛选和回退。

    26590

    web图像的常见应用策略与技巧

    css里的图像写法如下面的例子 background-image: image-set none; 利用的技术是CSS3多背景,浏览器只要支持了多背景,几乎无一例外支持SVG 再或者 background-image: url(fallback.png);background-image: image-set ( "test.png" 1x, "test-2x.png" 2x,"test-print.png" 600dpi ); 通过image-set来筛选和回退。

    21610

    携程2015 Open House获奖项目:响应式的蜕变

    还有响应式图片的设计,响应式的增量css设计,或者是分模块的css设计,背景图片可以使用双倍图,也可以使用image-set,这个需要作出选择,html5响应式图片现在有了srcset, 类似image-set

    34990

    使用grunt对css中的background图片自动生成雪碧图

    imagepath_map: null, // 各图片间间距,如果设置为奇数,会强制+1以保证生成的2x图片为偶数宽高,默认 0 padding: 0, // 是否使用 image-set

    557100

    随方逐圆--全面理解CSS媒体查询

    第二个是源图尺寸值 源图尺寸值不能使用百分比 浏览器利用srcset和sizes信息来自动选择最符合规定条件的图像 无法确定究竟显示哪张图像,因为每个浏览器挑选适当图像的算法有差异 4.6 扩展阅读:用 image-set 为普通屏幕使用 pic-1.jpg, 为高分屏使用 pic-2.jpg, 如果更高的分辨率则使用 pic-3.jpg,比如印刷 */ background-image: image-set

    25120

    干货 | 响应式设计在携程火车票的应用

    其他的情况就用image标签的srcset属性或者用background-image的 image-set方法去引入不同的倍图。记得做好兼容处理即可。

    12610

    CSS-Next : CSS预处理器简单写法的替代者, 想了解下么?

    font-size:10px; } 对图片设置多倍图的简化写法,直接拿官方的例子,有这需求的小伙伴又可以少写一些代码了 //cssnext .foo { background-image: image-set

    42120

    【Hello CSS】第五章-CSS的选择器与函数

    conic-gradient()、 repeating-linear-gradient()、 repeating-radial-gradient()、 repeating-conic-gradient()、 image-set

    15510

    FIS 插件机制

    preprocessor(标准预处理器):在fis进行标准化处理之前进行某些修改,比如 支持image-set语法的预处理插件 standard(标准化处理):前面两项处理会将文件处理为标准的js、css

    49230

    关于移动端适配,你必须要知道的

    .avatar{ background-image: url(conardLi_3x.png); } } 只适用于背景图 9.4 image-set 使用 image-set: .avatar { background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png

    48320

    fis3 文档学习研究

    {css,less}', { paser: fis.plugin('image-set') }); fis.match('::package', { packager: fis.plugin

    40900

    关于移动端适配,你必须要知道的

    .avatar{ background-image: url(conardLi_3x.png); } } 只适用于背景图 9.4 image-set 使用 image-set: .avatar { background-image: -webkit-image-set( "conardLi_1x.png" 1x, "conardLi_2x.png

    44010

    fis3 文档学习研究

    {css,less}', { paser: fis.plugin('image-set') }); fis.match('::package', { packager: fis.plugin

    26320

    扫码关注腾讯云开发者

    领取腾讯云代金券