<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

        <style type="text/css">

            .border{

                position: relative;

            }

            .border::after{

                display: block;

                position: absolute;

                left: 0;

                bottom: 0;

                width: 100%;

                border-top:1px solid rgba(7,17,27,0.1);

                content: " ";

            }

            @meta (-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){

                .border-1px::after{

                    -webkit-transform: scaleY(0.7);

                    transform:scaleY(0.7)

                }

            }

            @meta (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){

                .border-1px::after{

                    -webkit-transform: scaleY(0.5);

                    transform:scaleY(0.5)

                }

            }

        </style>

    </head>

    <body>

        1px像素的实现

        <div class="border border-1px">  

        </div>

    </body>

</html>

利用meta判断设备像素是dpr的值来，缩放对应的比例

1px的实现的更多相关文章

  1. 移动端1px边框

    问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...

  2. [半转]1px边框 移动端

    半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. ...

  3. 移动端视网膜（Retina）屏幕下1px边框线 解决方案

    原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...

  4. [Cordova] 手机网页里的1px

    [Cordova] 手机网页里的1px 1px的显示 Cordova让开发人员可以使用HTML页面,来开发APP的显示内容.但是在手机上,HTML页面里定义的1px,并不是直接对应到手机屏幕的一个像素 ...

  5. iOS去除导航栏和tabbar的1px横线

    1.在自己定义的导航栏中或者设计稿中经常需要去除导航栏的1px横线,主要是颜色太不协调了 去除之前的图片 要去除这1px的横线,首先应该知道它是什么,在Xcode的界面调试中可以看到,它其实是UIIm ...

  6. css中的1px并不总等于设备的1px（高分辨率不等 低分辨等）

    在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...

  7. 移动端1px

    移动端不同尺寸设备dpi不同,会造成1px线条不同程度的缩放,可利用媒体查询device-pixel-ratio,进行不同情况匹配: @media(-webkit-min-device-pixel-r ...

  8. Retina屏实现1px边框

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

  9. 关于移动端1px边框问题

    <div class="z_nei_list"> <div class="z_name_left font-size3">身份证号:&l ...

  10. 解决CSS移动端1px边框问题

    移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...

随机推荐

  1. webpack.config.js====CSS相关：css和scss配置loader

    1. 安装: //loader加载器加载css和sass模块 cnpm install style-loader css-loader node-sass sass-loader --save-dev ...

  2. 洛谷P2606 [ZJOI2010]排列计数(组合数 dp)

    题意 题目链接 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi>Pi/2. 计算1,2,...N的排列中有多少是Magic的,答案 ...

  3. 零基础逆向工程18_PE结构02_联合体_节表_PE加载过程

    联合体 特点 1.联合体的成员是共享内存空间的 2.联合体的内存空间大小是联合体成员中对内存空间大小要求最大的空间大小 3.联合体最多只有一个成员有效 节表数据结构说明 PE 加载 过程 FileBu ...

  4. R语言笔记2

    <13: Simulation> > sample(1:6,4,replace=TRUE) [1] 4 5 2 6 在1-6的整数中随机生成4个整数,且数字可以重复,即每个数字均可重 ...

  5. Object类-try-catch-finally-throw-throws-自定义异常

    一.Object类     Object类是最顶端的类,其它类都是它的子类,它的方法可以被继承.如果定义的类没有继承别的类,那它的直接父类就是Object.如果方法参数类型为object类型, 则调用 ...

  6. AES加密示例

    最近用到对文本内容进行加密,于是查了一下常用的加密算法: DES(Data Encryption Standard):对称算法,数据加密标准,速度较快,适用于加密大量数据的场合:3DES(Triple ...

  7. win10 KMS激活

    运行 输入以管理员权限输入CMD 如果已安装密匙先卸载,没有的话可以跳过 slmgr -upk 卸载密匙命令 输入对应版密匙以及KMS地址激活 1.键入命令:slmgr -ipk XXXXX-XXXX ...

  8. CCCC 以及 hihocoder offer收割赛11 ~~~

    CCCC  真的很蒙  ,没有队服,没有狗牌,服务器崩溃到14:10  才开始比赛...(黑人问号 开始前,发现旁边是西交老大吴航,mad~各种紧张.看着大佬疯狂的敲宏定义就很怕啊.100多行,一行头 ...

  9. Android（java）学习笔记111：Java异常分类

    Java异常可分为3种: (1)编译时异常:Java.lang.Exception (2)运行期异常:Java.lang.RuntimeException (3)错误:Java.lang.Error

  10. 如何使用TensorFlow Hub和代码示例

    任何深度学习框架,为了获得成功,必须提供一系列最先进的模型,以及在流行和广泛接受的数据集上训练的权重,即与训练模型. TensorFlow现在已经提出了一个更好的框架,称为TensorFlow Hub ...