.border {
position: relative;
width: 300px;
height: 200px;
}
.border:after {
border: 1px solid #ff3300;
display: block;
content: '';
position: absolute;
top:;
right:;
bottom:;
left:;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(1);
pointer-events: none;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
.border:after {
right: -100%;
bottom: -100%;
-webkit-transform: scale(0.5);
}
}

retina屏实现border边框1px的更多相关文章

  1. Retina屏实现1px边框

    问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...

  2. Retina屏下1px border

    layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上 ...

  3. 移动端Retina屏边框线1px 显示为2px或3px问题解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的.   1.何为“设备像素比dev ...

  4. Retina 屏移动设备 1px解决方案

    做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2  的屏幕上会显示成 2px,在 window.devicePix ...

  5. 移动端 Retina屏 各大主流网站1px的解决方案

    Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="in ...

  6. 【转载】Retina屏的移动设备如何实现真正1px的线?

    文章转载自 酷勤网 http://www.kuqin.com/ 原文链接:http://www.kuqin.com/shuoit/20150530/346322.html 原文摘要:前些日子总被人问起 ...

  7. 移动端 Retina屏border实现0.5px

    首先来看一下造成Retina边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRat ...

  8. Retina屏的移动设备如何实现真正1px的线

    前些日子总被人问起 iOS Retina 屏,设置 1px 边框,实际显示 2px,如何解决?原来一直没在意,源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和CSS设置的边框,确实差距不小…… ...

  9. 移动端Retina屏boder 1px显示为2px或3px的解决方法

    我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 何为“设备像素比deviceP ...

随机推荐

  1. (译) 《Javascript 24条最佳实践》

    (摘录) <Javascript 24条最佳实践> 自己一直偏向于实用主义,不是学院派,不是学究派,只讲究把东西能够很好的做出来,但经过一段时间的开发工作当自己总结出来一些东西时,觉得挺有 ...

  2. html中上标、下标、删除字、小号字等

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. C#/ASP.NET应用程序配置文件app.config/web.config的增、删、改操作

    原文 http://www.cnblogs.com/codealone/archive/2013/09/22/3332607.html 应用程序配置文件,对于asp.net是 web.config,对 ...

  4. Crossing River poj1700贪心

    题目描述:N个人过河,只有一只船,最多只能有两人划船,每个人划船速度不同,船速为最慢的人的速度.输入T为case个数,每个case输入N为人数,接下来一行输入的是每个人过河的时间,都不相同.要求输出N ...

  5. poj1580---欧几里得算法(辗转相除法)

    #include<stdio.h> #include<string.h> #include<string.h> ],str2[]; int len; int cal ...

  6. CodeForces 135C C. Zero-One

    题目 题意: 一个01串,AB两个人轮流删去一个字符,直到只剩两个,A先手.最后剩的两位组成一个二进制数,A要使其最小,B要使其最大. 有一些部分不知道原来是什么,用?表示,求所有的可能里,最后剩下的 ...

  7. 一个神奇的bug

    在使用touch命令创建了一个swift文件后,如果用xcode打开该文件,然后输入 #!/usr/bin/env xcrun swift 接着你就会发现,xcode崩溃了.

  8. Labeling Balls(拓扑排序wa)

    Labeling Balls Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12466   Accepted: 3576 D ...

  9. android高仿微信拍照、多选、预览、删除(去除相片)相冊功能

    先声明授人与鱼不如授人与渔,仅仅能提供一个思路,当然须要源代码的同学能够私下有偿问我要源代码:QQ:508181017 工作了将近三年时间了,一直没正儿八经的研究系统自带的相冊和拍照,这回来个高仿微信 ...

  10. hdu-5082

    题意非常easy,就是给出父母的名字,然后依据父母的名字来给孩纸取名字! 能够将此题简化为: 孩纸的名字=父亲的frist name+字符串(_small_)+母亲额frist name; 然后将孩纸 ...