二倍图css,css二倍图的使用

使用 CSS 的 DevicePixelRatio 媒查询属性

/*默认大小*/

.photo {background-image: url(image100.png);}

/* 如果设备像素大于等于2，则用2倍图 */

@media screen and (-webkit-min-device-pixel-ratio: 2),

screen and (min--moz-device-pixel-ratio: 2) {

.photo {

background-size: 100px 100px;

}

/* 如果设备像素大于等于3，则用3倍图 */

@media screen and (-webkit-min-device-pixel-ratio: 3),

screen and (min--moz-device-pixel-ratio: 3) {

.photo {

background-size: 100px 100px;

}

.photo {width:100px;height:100px;}

scss写法

@mixin bg-image($url) {

@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){

}

css样式中调用 bg-image 方法

div{

width:30px;

height:20px;

background-size:30px 20px;

background-repeat:no-repeat;

@include bg-image('special_1');

}

方法二:直接使用 IMG 的 SRCSET 属性

二倍图css,css二倍图的使用相关推荐

前端总结·基础篇·CSS（二）视觉
前端总结系列前端总结·基础篇·CSS(一)布局前端总结·基础篇·CSS(二)视觉前端总结·基础篇·CSS(三)补充前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
CSS入门二、美化页面元素
零.文章目录 CSS入门二.美化页面元素 1.字体属性 CSS Fonts (字体)属性用于定义字体系列.大小.粗细.和文字样式(如斜体) (1)字体系列font-family font-family ...
前端三件套（二）：CSS
目录标题一.认识CSS 1.什么是CSS 2.CSS发展史 3.快速入门二.导入CSS的四种方式三.选择器 1.基本选择器(重要) 2.层次选择器 3.结构伪类选择器(了解即可) 4.属性选择器 ...
HTML变列自适应布局三行,div自适应居中_典型的DIV CSS三行二列居中高度自适应布局...
摘要腾兴网为您分享:典型的DIV CSS三行二列居中高度自适应布局,弈玩游戏,携程,悟空单车,我和你等软件知识,以及驾考精灵,指尖遥控,广告拦截,浙江学习网,360主题桌面,平板电脑qq,咖啡厅室内 ...
三篇文章入门CSS（二）
系列文章目录三篇文章入门CSS(一) 三篇文章入门CSS(二) 三篇文章入门CSS(三) 内容预警系列文章目录一.css的继承 1.样式的继承实例: 2.选择器的权重 3.RGB颜色与像素像 ...
网页设计（二）——DIV+CSS布局1
前言:好久没更新过CSDN博客了,现在从原来的OI,变成了一个科研工作者.最近打算把原来的一些资料整理一下,作为经验公开分享,希望能帮到更多默默努力耕耘的人~ 网页设计系列源于早几年在学校网站工作做入 ...
Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
前端（二）之 CSS
前端之 CSS 前言昨天学习了标记式语言,也就是无逻辑语言.了解了网页的骨架是什么构成的,了解了常用标签,两个指令以及转义字符:其中标签可以分为两大类: 一类是根据标签内容可以分类单双标签,单标签指 ...
css 透明叠加_细品CSS（二）
写在前面CSS盒子模型与怪异盒模型盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分. 盒子模型分为两种第一种是W3c标准的盒子模型(标准盒模型) ...

二倍图css,css二倍图的使用

二倍图css,css二倍图的使用相关推荐

最新文章

热门文章