高清屏概念解析与检测设备像素比的法门

2017/02/06 · CSS ·
像素比

本文小编：伯乐在线 –
zhiqiang21
。未经作者许可，禁止转发！
迎接参加伯乐在线专辑小编。

有些基本概念

** viewport 视窗 **

在桌面浏览器中，viewport就是浏览器窗口的肥瘦高度。但在移动端设备上，若是没有viewport，移动端会选拔桌面版的显示器宽度，然后适应显示屏进行缩放。设置viewport可以操纵页面的涨幅并且在分裂的配备上开展缩放。
（A viewport controls how a webpage is displayed on a mobile device.
Without a viewport, mobile devices will render the page at a typical
desktop screen width, scaled to fit the screen. Setting a viewport gives
control over the page’s width and scaling on different devices.）

移动端提供了七个viewport，虚拟的viewport：visual
viewport和布局的viewport：layout viewport。Stack
Overflow上有深切的讲解。

** 物理像素 & 设备独立像素 & CSS像素 **
** 物理像素
**又被称作设备像素，他是突显设备中一个最细微的物理部件。每个像素可以按照操作系统设置自己的水彩和亮度。

** 设备独立像素
**也叫做密度无关像素，可以认为是电脑坐标系列中的一个点，那个点代表一个足以由程序行使的虚构像素(比如说CSS像素)，然后由有关系统转换为大体像素。

CSS设置的像素值（px）属于常见像素点，或者是正经像素点。CSS像素是一个抽像的单位，主要运用在浏览器上，用来规范度量Web页面上的情节。一般境况之下，CSS像素称为与设施无关的像素(device-independent
pixel)，简称DIPs。

** devicePixelRatio 设备像素比 **
装备像素比简称为dpr，其定义了物理像素和设备独立像素的附和关系。它的值可以按上面的公式总计得到：

设施像素比＝物理像素 / 设备独立像素

** 高清屏和一般显示器 **
高清屏和普通屏来做比较就是不以为奇显示器的1个像素点就是1个大体像素点，而高清屏的1个像素点是4个大体像素点。
透过统计 devicePixelRatio
的值，可以分别普通显示器和高清显示器，当devicePixelRatio值等于1时（也就是最小值），那么它是日常屏幕，当devicePixelRatio值大于1(平时是1.5、2.0)，那么它就是高清显示屏。
诸如OPPO6的devicePixelRatio为2，所以是高清显示器。HTC6s
plus那种高清屏dpr是3。

** REM **
REM就是对峙于根元素<html>的font-size来做计算。因为网页<html>的默许字体大小是
16px，所以

1rem=16px ，10rem=160px

大家那边所说的devicePixelRatio实在指的是window.devicePixelRatio,
被抱有WebKit浏览器以及Opera所支撑。

咱俩那边所说的devicePixelRatio其实指的是window.devicePixelRatio,
被抱有WebKit浏览器以及Opera所支撑。

前言

做运动端h5开发很久了，从上马入行到现行。很多学问和工具都是在用前辈留下的遗产，都没有深远的研讨过原因，领悟怎么要这样去做。

兴许自己也是过了付出自己做什么样就做什么样的等级了。在国庆节有一个大块的日子，把多年来见到的知识总计一下，也好不不难对那上面的学问划上一个句号。想想实在把国庆节过成了劳动节，不可能，自己就是那般的一个人，“应该去做的，而且有力量做的，如若不去做，心里面总是不爽快”。

那篇小说的始末根本分为五个部分：

高清屏（Retina）相关概念解析和高清屏（Retina）与前端开发的关系；
前端开发进度中使用什么手段区分高清屏和普通屏幕，并且衍生出的适配方案；

注：本篇作品的拥有图片来源互联网，如有侵权请告知。

Retina显示屏1px生出的题材

因为viewport的装置和显示屏物理分辨率是按比例而不是一模一样的，<meta>标签里实际是设置了ideal
viewport的升幅，而差距手机的ideal
viewport宽度是不平等的。移动端window对象有devicePixelRatio属性，CSS里写1px的边框在devicePixelRatio
= 2的Retina屏下会展现成2px。

亚洲必赢官网 1

1px的效果

亚洲必赢官网 2

1px被出示成2px

图片来源Retina屏的运动设备如何兑现真正1px的线？

概念

devicePixelRatio
，它是设备上物理像素和装置独立像素( device-independent pixels (dips)
)的比重，即 devicePixelRatio = 显示屏物理像素/设备独立像素

比如说三星4S，分辨率为：960×640，取显示屏宽度总结，物理像素640px，设备独立像素320px，那么，devicePixelRatio
值为 640px / 320px = 2，又如一加3，计算出来的 devicePixelRatio
值为 320px / 320px = 1

要询问其他手机型号的物理像素，独立像素，设备像素比，请查看

在手机上大家一般的图纸在高清显示器下会很模糊，那么怎么样是高清屏幕呢？

高清显示器起点于 retina
，打开维基百科，搜索 Retina显示屏，它是一种由苹果集团统筹和信托创建的显示器，具备充裕高像素密度而使得人体肉眼不可以辨认其中单独像素点的液晶屏。

高清屏幕原理如下：

一种具有超高像素密度的液晶屏
一致大小的显示屏上出示的像素点由1个变成三个

retina显示屏只是高清显示器的一种。

今日明白高清屏幕了，那么来分析下一般图片在其设备上会模糊的原委，假使现在有一张图纸，有两部无绳话机，一部是层见迭出屏幕，一部是高清屏幕，在一如既往大小的屏幕上，高清显示器中的位图会被放大，图片会变得模糊。

概念

devicePixelRatio
，它是装备上物理像素和装置独立像素( device-independent pixels (dips)
)的比重，即 devicePixelRatio = 显示屏物理像素/设备独立像素

譬如说Samsung4S，分辨率为：960×640，取显示器宽度计算，物理像素640px，设备独立像素320px，那么，devicePixelRatio
值为 640px / 320px = 2，又如One plus3，统计出来的 devicePixelRatio
值为 320px / 320px = 1

要通晓其他手机型号的情理像素，独立像素，设备像素比，请查看

在三哥大上我们一般的图片在高清屏幕下会很模糊，那么什么样是高清屏幕呢？

高清屏幕起点于 retina
，打开维基百科，搜索 Retina显示屏，它是一种由苹果公司企划和嘱托创设的屏幕，具备充足高像素密度而使得人体肉眼无法分辨其中单独像素点的液晶屏。

高清屏幕原理如下：

一种具有超高像素密度的液晶屏
同一大小的显示屏上出示的像素点由1个变成多个

retina屏幕只是高清显示器的一种。

近来晓得高清显示器了，那么来分析下一般图片在其设备上会模糊的缘故，即使现在有一张图纸，有两部无绳话机，一部是日常屏幕，一部是高清显示器，在同等大小的显示器上，高清屏幕中的位图会被加大，图片会变得模糊。

高清屏（Retina）概念解析和前端开发的涉及

哪些落到实处Retina显示器上1px的法力

广泛高清显示器中位图被放大的比例

亟需精晓设备像素比devicePixelRatio的使用，高清屏概念解析与检测设施像素比的办法。咱俩得以了然到 retina屏幕中图纸被加大的倍数高达 2:1，而其实各类高清显示器放大的翻番是见仁见智的，有 1.3:1、1.5:1、2:1、3:1 ，近日最多的是 2:1，而 HUAWEI Butterfly、Nexus 5、SamsungGalaxy S4、 Sony Xperia Z
这几个几个密密麻麻的活动设备，图片被加大的翻番高达 3:1

科普高清显示器中位图被放大的比例

大家可以了解到 retina屏幕中图纸被加大的翻番高达 2:1，而实际上各类高清屏幕放大的倍数是例外的，有 1.3:1、1.5:1、2:1、3:1 ，近年来最多的是 2:1，而黑莓 Butterfly、Nexus 5、SamsungGalaxy S4、索尼 Xperia Z
这么些多少个连串的运动装备，图片被推广的倍数高达 3:1

1. 高清屏概念解析

高清屏（Retina）概念的兴起紧假如从乔大当家公布 Retina
设备初始兴起。首要功能如下：

抱有丰盛高的物理像素密度而使人体肉眼不能识别其中单独像素点的液晶屏。

特性如下：

一种具有超高像素密度的液晶屏；
平等大小显示器上浮现的像素点由一个化为两个；

看一张乔大当家当年宣布 高清屏（Retina）时的一张相片：

亚洲必赢官网 3

由乔帮主背后的那两张图可以窥见，高清屏和普通平的最主要不相同：高清屏（Retina）和普通屏比较，相同区域的物理像素点数，高清屏是普通屏的4倍。

方法一 Viewport + REM

因此viewport +
REM的不二法门来协作,（Taobao移动端的方法）使用JS动态获取显示器的装备像素比devicePixelRatio，然后动态设置viewport。

devicePixelRatio=2的时候，控制viewport的initial-scale值为0.5进展缩放
<meta name="viewport" content="initial-scale=0.5, user-scalable=no"/>
devicePixelRatio=3的时候，
<meta name="viewport" content="initial-scale=0.333333, user-scalable=no"/>
Android下不支持initial-scale，就算那不适用于安卓,
但它里面的这一段代码可以用来做对安卓机的安排.

    if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
        // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
        if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {                
            dpr = 3;
        } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
            dpr = 2;
        } else {
            dpr = 1;
        }
    } else {
        // 其他设备下（比如安卓），仍旧使用1倍的方案
        dpr = 1;
    }
    scale = 1 / dpr;
}```


对于安卓机做检测，动态加载CSS

var link = document.createElement(‘link’);
link.setAttribute(“rel”,”stylesheet”);
link.setAttribute(“type”,”text/css”);
link.setAttribute(“href”,”…….Android.css”);
document.querySelector(‘head’).appendChild(link);“`

本条方案组成了viewport和rem，所以使用的时候要考虑到REM布局。其它，REM布局下字体的单位仍提议接纳px，还有出现1px像素线的地点，也依然选拔border-width:1px;而不是border-width:.1rem;

有别于普通屏幕和高清屏

经过 devicePixelRatio的值，就可以区分普通屏幕和高清屏，当devicePixelRatio值等于1时（也就是最小值），那么它一般显示器，当devicePixelRatio值大于1(常常是1.5、2.0)，那么它就是高清显示屏。

分别普通屏幕和高清屏

由此 devicePixelRatio的值，就可以区分普通屏幕和高清屏，当devicePixelRatio值等于1时（也就是最小值），那么它经常屏幕，当devicePixelRatio值大于1(平日是1.5、2.0)，那么它就是高清屏幕。

2.物理像素点和css的关联

先来看一张图：

亚洲必赢官网 4

由地点的图大家可以知道，当大家使用css设置了一个区域将来，高清屏含有的像素点数是普通屏的4倍。而css设置的像素值（px）属于一般像素点，或者是正经像素点。

那么我们经常在寻常显示屏中健康显示的位图图像放在高清的屏幕上会有啥样难题吗？由地点的知识可以知晓，普通屏幕的1个CSS像素点对应4个高清显示屏的像素点，1个分成4个，不够分的处境下，颜色会取近似值。所以在高清屏上，在普通显示屏正常呈现的图形会变的模糊。

能够看下图来深化了然：

亚洲必赢官网 5

那就是怎么我们前些天的设计稿为啥都会规划成2倍稿的来头。为了同盟高清屏幕的图样高清晰浮现，大家的裁切图是2倍图，在css中动用的时候会动用css压缩2倍。

譬如，大家有一个icon.png的公文，切图大小是 200×200
。而我辈接纳的时候却是使用css设置其尺寸为100×100。那样基本上就会确保普通屏和高清屏突显同一。

亚洲必赢官网 6

方法二 Media Query

根据显示屏的配备像素比来加载不相同图片可以动用CSS的Media
Query来缓解，它对应devicePixelRatio有多少个查询值-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和
-webkit-max-device-pixel-ratio，不过那样我们就要切图片的一倍图和二倍图。

.img{ /* 普通显示屏(设备像素比例小于等于1.3)使用一倍图 */ 
    background-image: url(img_1x.png);
}
@media screen and (-webkit-min-device-pixel-ratio:1.5){
.img{/* 高清显示屏(设备像素比例大于等于1.5)使用二倍图  */
    background-image: url(img_2x.png);
  }
}```
据说IOS8以上CSS可以用小数点，理论上可以这样写。

.border {
border: 1px solid #ffffff;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
.border { border: 0.5px solid #ffffff; }
}
@media screen and (-webkit-min-device-pixel-ratio: 3) {
.border { border: 0.333333px solid #ffffff; }
}“`
但是由于安卓与低版本IOS不适用，所以不引进那种写法。

举手投足端怎么着调用高清背景图

为了更好的擢升用户体验，节省移动端的流量，针对不相同的显示器，大家可以动用不用的方案，有限支撑图片在不相同突显显示器下健康突显，那个方法跟设计原生APP中针对不一样分辨率采纳选择不一致图片的法则相似~

经过判断 devicePixelRatio 的值来加载不一致尺寸的图纸

本着平时显示屏(devicePixelRatio =
1.0、1.3)，加载一张1倍的图片
针对高清显示器(devicePixelRatio >=
1.5、2.0、3.0)，加载一张2倍大的图片

鉴于3.0的无绳电话机如今相比较少，3.0也加载一张2倍的图纸是足以承受的。那么，通过上边的方案，大家不是亟需统筹2套图纸，甚至是3套图片呢？

切实依然要看产品必要的用户群、维护开支、产品需求上线等来设计方案，例如用户群大都是高端手机来的，全部都应用加载一张2倍的图样也是可以接受的~

本文提出使用加载2套图片~

移动端怎样调用高清背景图

为了更好的升官用户体验，节省移动端的流量，针对不相同的显示屏，大家得以应用不用的方案，有限支撑图片在不一致突显显示屏下正规突显，那个点子跟设计原生APP中针对差别分辨率选取选择不相同图片的原理相似~

通过判断 devicePixelRatio 的值来加载不一样尺寸的图样

本着常常显示器(devicePixelRatio =
1.0、1.3)，加载一张1倍的图形
本着高清屏幕(devicePixelRatio >=
1.5、2.0、3.0)，加载一张2倍大的图形

是因为3.0的无绳电话机近来相比少，3.0也加载一张2倍的图样是足以承受的。那么，通过地点的方案，大家不是急需规划2套图片，甚至是3套图片呢？

具体照旧要看产品须求的用户群、维护资金、产品要求上线等来设计方案，例如用户群大都是高端手机来的，全体都采用加载一张2倍的图片也是可以接受的~

正文提议利用加载2套图片~

css压缩真的能担保完全一致么？

看了一部分网友的篇章。css压缩会使图片边缘的锐度减小。

上面是自个儿做的一个简练的尝试，比如说我明日有一个276×90的图标文件。我一直把它设置为一个div的背景，在浏览器中看效用：

代码如下：

XHTML

1	<div class="item3"></div>

CSS

.item3{ height:45px; width:138px; background:url(./4.png) no-repeat
center; background-size:100% 100%; }

.item3{

height:45px;

width:138px;

background:url(./4.png) no-repeat center;

background-size:100% 100%;

}

在网页中的效果如下图：

亚洲必赢官网 7

自身把那张图截取下来放到 PS
中加大，之后的机能如下图，可以明确看出在有颜色的书体边缘的颜料变浅，图像周围的锐度减小。

亚洲必赢官网 8

实质上，在大家的付出进程中完全没有要求去在意那里的那些细节难点，图像边缘的锐度也是在
PS 中推广了无数倍未来才看出来的，借使是人的肉眼是根本看不出来的。

方法三 box-shadow

运用CSS对影子处理的方法贯彻
-webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
亮点是着力所有场景都能满意，包蕴圆角的button，单条，多条线。
缺点是颜色糟糕处理，蓝色 rgba(0,0,0,1) 是最浓的图景，而且有黑影出现。

Media Queries 调用高清背景图

应用媒体询问结合 devicePixelRatio 可以区分普通屏幕和高清显示器，并交由了之类CSS设计方案：

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    background-image: url(img_2x.png);
  }
}

Media Queries 调用高清背景图

接纳媒体询问结合 devicePixelRatio 可以分别普通显示屏和高清屏幕，并付出了如下CSS设计方案：

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */ 
    background-image: url(img_1x.png);
}
@media only screen and (-webkit-min-device-pixel-ratio:1.5){
.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
    background-image: url(img_2x.png);
  }
}

2. 高清屏（Retina）和前端开发的涉嫌

由位置的学识能够知道。当大家在高清屏中选用普通图片的时候，相当于图片被放大了一倍（可以这样驾驭：普通显示器的1px一定于高清屏的2px）。

因为安卓产品的参差和厂商对显示器创制标准的正规不平等。那么些松手的比例并不是定位的。还好大家有一个叫配备像素比的事物来检测当前显示屏是或不是属于高清屏幕。

装备像素比的英文单词为devicePixelRatio。它有一个总结公式如下：

devicePixelRatio=显示屏物理像素/设备独立像素

devicePixelRatio实际上就是window对象的一个属性，它被大多数的webkit浏览器所支撑。看下图是自个儿在自身的MacBook
Pro上的Chrome中做的测试。很明确是属于高清屏哈ヾ(=^▽^=)ノ

亚洲必赢官网 9

地点是对设施像素比的东西
做了一个概括的摸底，上面就来详细摸底下多少个比较重大的概念。

配备独立像素（device independent
pixels）又叫dip或者是dp。它可以用来救助区分高清屏幕和非高清屏幕。

大家可以通过多个良好的无绳电话机来驾驭地方的概念。iphone3gs和iphone4的显示器最大的分别就是前者是普普通通屏幕而后者是利用了高清的retina屏幕。以下是自己查到的部分参数音讯：

上边的是iphone3gs屏幕音讯：

亚洲必赢官网 10

下边是iphone4s屏幕音讯：

亚洲必赢官网 11

在iphone3gs垂直的时候，屏幕的升幅为320大体像素。当大家利用<meta name="viewport" content="width=device-width">的时候，会安装视窗布局宽度为显示器的宽窄320px，于是页面就很当然的遮盖在屏幕上。

亚洲必赢官网 12

因此在iphone3gs上显示器的情理像素位320像素，独立像素也是320像素。因而window.devicePixelRatio=1。

而对于iphone4s来说，当显示屏纵向突显的时候，屏幕的物理像素是640像素，而视区宽度不是640像素而是320像素。

这般在iphone4s上，屏幕的大体像素为640像素，独立像素仍然320像素，由此window.devicePixelRatio=2。

由地点的比方相信已经对设施的情理像素和单独像素有了一个认识，那么统计如下：

设施的大体像素（也叫设备像素），就是显示器突显颜色的纤维的情理单元，也就是咱们日常看到的手机分辨率所讲述的数字；
设施独立像素（与密度非亲非故的像素），就是我们手机的莫过于的视窗口的深浅。具体来说可以认为是统计机坐标种类中得一个点，这几个点代表一个方可由程序行使的杜撰像素(比如:
css像素)，然后由有关系统转换为大体像素。

方法四 background-image背景渐变完结

由此CSS修改image，设置图片50%有颜色，50%透明，完成1px的意义。
linear-gradient属性一个意味颜色线性渐变的
image，语法是linear-gradient([ [ [ <angle>| to[top | bottom] || [left | right] ],]? <color-stop>[, <color-stop>]+);详细讲解看MDN文档

.border {
      background-image: linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px, 1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }```
这个方法代码量大，而且无法实现边框的圆角效果。

##### 方法五 border-image
![6X6的图片](http://upload-images.jianshu.io/upload_images/4938344-0320e1b1f4cde23b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
图片可以是gif、png、base 64，

.border{
border-width: 1px;
border-image: url(border.png) 2 repeat;
}“`
缺点

想要完结圆角效果的话要拓宽修改图片
边框颜色不便宜修改
边框存在多样颜色的时候麻烦

image-set 调用retina背景图

image-set，它是Webkit的私家属性，也是Css4的一个质量，近日有一部分网站已经运用到它了，大家可以看下W3C的表明，它是为了缓解Retina显示器下的图像展现而生，据自己测试，当前协理苹果的
retina 显示器和部分android 显示器，也就是说它的包容性仍旧挺一般的~

.css{
    background: url(../img/bank_ico.png) no-repeat;/* 不支持image-set的显示屏 */ 
    background: -webkit-image-set(
                url(../img/bank_ico.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
                url(../img/bank_ico_retina.png) 2x);/* 支持image-set的浏览器的[Retina屏幕] */

}

参照地址：

亚洲必赢官网，设施像素比devicePixelRatio不难介绍

高清显示器原理及设计方案

image-set 调用retina背景图

image-set，它是Webkit的村办属性，也是Css4的一个特性，近期有部分网站已经应用到它了，大家可以看下W3C的说明，它是为领悟决Retina屏幕下的图像显示而生，据本人测试，眼下支撑苹果的
retina 屏幕和一部分android 显示屏，也就是说它的包容性如故挺一般的~

.css{
    background: url(../img/bank_ico.png) no-repeat;/* 不支持image-set的显示屏 */ 
    background: -webkit-image-set(
                url(../img/bank_ico.png) 1x,/* 支持image-set的浏览器的[普通屏幕]下 */
                url(../img/bank_ico_retina.png) 2x);/* 支持image-set的浏览器的[Retina屏幕] */

}

参考地址：

装备像素比devicePixelRatio简单介绍

高清显示器原理及设计方案

怎么不同高清屏和一般性屏幕及其适配方案

经过对于第一有些的精晓，大家或许早已精晓怎么不同高清屏和普通屏了。网上网友统计的结论如下：

因此总结 devicePixelRatio
的值，是可以区分普通显示器和高清显示器，当devicePixelRatio值等于1时（也就是最小值），那么它一般屏幕，当devicePixelRatio值大于1(经常是1.5、2.0)，那么它就是高清显示器。

这就是说这一部分，就来大概的摸底下大家日常在支付过程中，对于大家应用的图样怎么适配高清屏和普通屏。

原理也很简短，就是根据区其他配备像素比来加载分歧的图纸:

本着平日显示器(devicePixelRatio = 1.0、1.3)，加载一张1倍的图片
针对高清显示屏(devicePixelRatio >=
1.5、2.0、3.0)，加载一张2倍大的图片

方法六 transform: scale(0.5)+伪元素:before, :after

原理去掉把原本元素的 border ，然后使用 :before 或者 :after 重做 border
，并 transform 的 scale
属性将元素大小收缩为设置的值的一半，将本来的因素相对固定，新写的 border
设置绝对定位。

使用样式的时候，要结成 JS 代码，判断是或不是 Retina 屏

if(window.devicePixelRatio && devicePixelRatio >= 2){
    document.querySelector('.box').className += 'box';
}```
看一下demo代码：

.box {
border: none;
position: relative;
z-index: 3;
}
.box :before {
content: ”;
position: absolute;
top: 0;
left: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
color: #0b2029;
border-radius: 8px;
border: 2px solid #737373;
font-size: 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
z-index: -1;
}“`

:before和:after
是用来给指定的要素的情节前边或后边插入新的始末。给:before添加了属性
content并设置为空（对于伪元素 :before 和 :after 而言，属性 content
是必须设置的否则伪元素不会卓有功用），然后给它设置本身必要的体裁的两倍大小，再设置transform: scale(0.5);就完毕了1px的效果。像那里的demo代码，我的box里面有input，所以要安装index，否则input就会被遮盖。

注意<input type=”button”>没有:before, :after伪元素。

ps：起首，伪元素的前缀使用的是单冒号语法，但为了和伪类(pseudo-classes)”区分开，在CSS3的规范里，伪元素的语法被修改成选取双冒号，成为::before
& ::after
，不过因为IE8只协助单冒号的语法，所以假若你想包容IE8，有限辅助的做法是利用单冒号。

对此大型的品种，推荐应用手淘的flexible方案，小型的页面用
transform: scale(0.5)+伪元素:before, :after较为便利。

1.Media Queries的缓解方案

据悉显示屏的配备像素比来加载不一致图片可以选用css 的media
queries来解决，当然使用css来化解也是包容性最好的化解方案（其实意味那大家要切两套图片1倍图和2倍图）。

示例的demo如下：

CSS

.css{/* 普通显示器(设备像素比例小于等于1.3)使用1倍的图 */
background-image: url(img_1x.png); } @media only screen and
(-webkit-min-device-pixel-ratio:1.5){ .css{/*
高清显示器(设备像素比例大于等于1.5)使用2倍图 */ background-image:
url(img_2x.png); } }

.css{/* 普通显示屏(设备像素比例小于等于1.3)使用1倍的图 */

background-image: url(img_1x.png);

}

@media only screen and (-webkit-min-device-pixel-ratio:1.5){

.css{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图 */

background-image: url(img_2x.png);

}

CSS Media Queries的优点

除非对应的目标元素才会下载图片资源
跨浏览器包容
像素可以精确控制

CSS Media Queries的缺点

单调无味的落到实处进程，特别是大型项目中
只好经过HTML元素的背景图片来完结，无其余语义化可言

2.JavaScript的缓解方案

动用js对“window.devicePixelRatio”举行判定，然后依照对应的值给Retina显示屏选择图像。

JavaScript

$(document).ready(function(){ if (window.devicePixelRatio > 1) { var
lowresImages = $(‘img’); images.each(function(i) { var lowres =
$(this).attr(‘src’); var highres = lowres.replace(“.”, “@2x.”);
$(this).attr(‘src’, highres); }); } });

$(document).ready(function(){

if (window.devicePixelRatio > 1) {

var lowresImages = $(‘img’);

images.each(function(i) {

var lowres = $(this).attr(‘src’);

var highres = lowres.replace(".", "@2x.");

$(this).attr(‘src’, highres);

});

}

});

Javascript查询的亮点

简单实施
非Retina屏幕不用下载过大的资源
像素精确控制

Javascript查询的症结

Retina显示器下必须下载标准备和高精密度的八个资源
Retina屏幕下图像交互可见
浏览器包容性不强

3.行使SVG矢量图像

SVG矢量图的独到之处

一个资源符合所有设备
不难维护
面向将来的:可伸缩向量图形

SVG矢量图的弱项

并未像素那样有精度
鉴于文件大小，不适合复杂的图片
不协助IE7-8和初期的安卓版本

参照小说：

高清屏幕原理及设计方案
配备像素比devicePixelRatio不难介绍

打赏协理我写出愈多好小说，谢谢！

打赏小编

打赏帮忙我写出更加多好文章，谢谢！

任选一种支付办法

亚洲必赢官网 14
亚洲必赢官网 15

1 赞 4 收藏
评论

有关作者：zhiqiang21

亚洲必赢官网 16

做认为对的事体，借使可能是错的，那就做认为自己承受得起的工作！

个人主页 ·
我的稿子 ·
11 ·

亚洲必赢官网 17

高清屏概念解析与检测设备像素比的法门

有些基本概念

前言

Retina显示屏1px生出的题材

概念

概念

高清屏（Retina）概念解析和前端开发的涉及

哪些落到实处Retina显示器上1px的法力

广泛高清显示器中位图被放大的比例

科普高清显示器中位图被放大的比例

1. 高清屏概念解析

方法一 Viewport + REM

有别于普通屏幕和高清屏

分别普通屏幕和高清屏

2.物理像素点和css的关联

方法二 Media Query

举手投足端怎么着调用高清背景图

移动端怎样调用高清背景图

css压缩真的能担保完全一致么？

方法三 box-shadow

Media Queries 调用高清背景图

Media Queries 调用高清背景图

2. 高清屏（Retina）和前端开发的涉嫌

方法四 background-image背景渐变完结

image-set 调用retina背景图

image-set 调用retina背景图

怎么不同高清屏和一般性屏幕及其适配方案

方法六 transform: scale(0.5)+伪元素:before, :after

1.Media Queries的缓解方案

CSS Media Queries的优点

CSS Media Queries的缺点

2.JavaScript的缓解方案

Javascript查询的亮点

Javascript查询的症结

3.行使SVG矢量图像

SVG矢量图的独到之处

SVG矢量图的弱项

参照小说：

打赏帮忙我写出更加多好文章，谢谢！

有关作者：zhiqiang21

相关文章