HTML5之图片在Retina屏的常用几种处理方式
- Media Queries
使用css3的媒体查询实现高清屏的图片处理。@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.logo {
background-image: url('img/logo@2x.jpg');
background-size: 400px 200px; width: 400px; height: 200px;
}
}sass的mixin
//-----------------------------------Retina图片-----------------------------------------
@mixin image-2x($image, $width, $height) {
@media (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 2.6/2), (-webkit-min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx) {
/* on retina, use image that's scaled by 2 */
background-image: url($image);
background-size: $width $height;
}
} - retina.js下载 免费CND GitHub
- CSS4的image-set属性
.test {
background-image: url('img/logo.jpg');
background-image: -webkit-image-set(url('img/logo.jpg') 1x,url('img/logo@2x.jpg') 2x);
background-size: 425px 195px;
width: 425px;
height: 195px;
} - HTML5 picture Element
<picture>
<source media="(min-width: 1024px)" srcset="foo-large.jpg 1024w, foo-medium.jpg 640w, foo-small.jpg 320w" sizes="50vw" />
<source srcset="foo@2x.jpg 2x, foo.jpg 1x" />
<img src="foo.jpg" alt="Bar" />
</picture> - 服务端处理 Retina Images github
使用方法
HTML5之图片在Retina屏的常用几种处理方式的更多相关文章
- xml常用四种解析方式优缺点的分析×××××
xml常用四种解析方式优缺点的分析 博客分类: xml 最近用得到xml的解析方式,于是就翻了翻自己的笔记同时从网上查找了资料,自己在前人的基础上总结了下,贴出来大家分享下. 首先介绍一下xml语 ...
- 使用JavaScript判断图片是否加载完成的三种实现方式
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> ...
- Vue 常用三种传值方式
Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...
- asp.net 常用几种下载方式
protected void Button1_Click(object sender, EventArgs e) { /* 微软为Response对象提供了一个新的方法TransmitFile来解决使 ...
- 【转】Retina 屏幕下,网页图片的显示兼容
感谢 Apple,带来了 Retina 屏幕的革命,让我们可以在电子显示屏上享受到印刷级的分辨率.由于分辨率的提升,网页中的文字.Flash 和 SVG 内容显示得比原来更加精细,但网页中的图片却变得 ...
- Retina 屏移动设备 1px解决方案
做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2 的屏幕上会显示成 2px,在 window.devicePix ...
- 移动端Retina屏边框线1px 显示为2px或3px问题解决方法
我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 1.何为“设备像素比dev ...
- Retina屏幕下image-set
实现Retina屏幕下图像的显示方法,还特别给我截取了一段代码: .soso .logo .qqlogo { display: block; width: 134px; height: 44px; b ...
- Retina屏实现1px边框
问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...
随机推荐
- HBase 系列(一)—— HBase 简介
一.Hadoop的局限 HBase 是一个构建在 Hadoop 文件系统之上的面向列的数据库管理系统. 要想明白为什么产生 HBase,就需要先了解一下 Hadoop 存在的限制?Hadoop 可以通 ...
- 在虚拟机Linux安装Redis
在虚拟机上安装 CentOS 7 安装成功后登录Root用户进入 opt目录,下载Redis. 下载Redis 下载命令: wget http://download.redis.io/releases ...
- Python中的 x+=x 与 x = x + x的区别
对于Python中的可变数据类型(列表,字典)来说,+= 和 ..=..+..是不同的 加等是直接在变量的值上面进行操作,会修改了原来变量的值 先等后加会重新分配一个内存空间,不会再原有的变量值上面进 ...
- Java调用Http/Https接口(7,end)--WebClient调用Http/Https接口
WebClient是Spring提供的非阻塞.响应式的Http客户端,提供同步及异步的API,将会代替RestTemplate及AsyncRestTemplate.文中所使用到的软件版本:Java 1 ...
- C语言-MySQL单表查询(vs2013环境)
一.首先配置项目属性: 1.打开mysql的安装路径,找到include文件夹和lib文件夹 如图: 2.在vs2013中, 打开项目–> 属性 –>VC++目录 如图: 把将nclude ...
- 自学Python编程的第九天(希望有大牛帮我看看我第一个代码是否有弊端,感谢您们)----------来自苦逼的转行人
2019-09-19-22:11:33 今天是自学Python的第九天 学的内容是有关文件操作的,如:r.w.a.rb.wb.ab.r+.w+.a+等 有大牛帮我看一下我的代码第一个有没有什么弊端吗? ...
- Python基础知识(八)----文件操作
文件操作 一丶文件操作初识 ###f=open('文件名','模式',编码): #open() # 调用操作系统打开文件 #mode #对文件的操作方式 #encoding # 文件的编码格式 存储编 ...
- Java中强大的format
Java中强大的format Java中允许我们对指定的对象进行某种格式化,从而得到我们想要的格式化样式. Format 首先介绍java.text包中的Format Foramt是一个抽象基类,其具 ...
- Telnet入侵WindowsXP
上一章,采用图形界面配置.这一节,采用命令方式配置 //修复.bat(掩饰名字) @ echo off //关闭回显 regedit.exe /s start.reg ///s 不打印 net sta ...
- Clickhouse高可用配置总结
1. 简述 Clickhouse默认是多分片单副本集群,分布式表的配置是每个分片只有一份,如果某个节点挂掉的话,则会直接导致写入或查询异常:Clickhouse是具有高可用特性的,即每个分片具有2个或 ...