<!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. iOS 容联离线消息推送

    容联 SDK 是包含离线消息推送的.首先我们要在控制台上传P12证书,(生产证书和开发证书),(证书的配置这里就不多说了)只能有一个证书是生效中的 生产证书需要打包成 ipa 包才能测试离线推送 然后 ...

  2. jsoup爬虫，项目实战，欢迎收看

    import com.mongodb.BasicDBObject import com.mongodb.DBCollection import org.jsoup.Jsoup import org.j ...

  3. I/O操作总结（一）

    所谓IO,也就是Input与Output的缩写.在java中,IO涉及的范围比较大,这里主要讨论针对文件内容的读写 其他知识点将放置后续章节(我想,文章太长了,谁都没耐心翻到最后) 对于文件内容的操作 ...

  4. 图解HTTP总结

    一.TCP/IP 的分层管理 二.TCP/IP通信传输流 ARP地址解析协议参考:https://www.cnblogs.com/csguo/p/7527303.html 三.各种协议与HTTP协议的 ...

  5. Mind must be master of the body, strong mind can separate the body from its suffering.

    Mind must be master of the body, strong mind can separate the body from its suffering.意志是身体的主人,有顽强的意 ...

  6. Python3+Selenium3+webdriver学习笔记13（js操作应用：弹出框无效如何处理）

    #!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记13(js操作应用:弹出框无效如何处理)'''from sel ...

  7. c# winform 关于DataGridView的一些操作

    转自:http://heisetoufa.iteye.com/blog/405317 设置字段名 设置字段值 设定单元格表示 Error图标 设定当前单元格 取得当前单元格内容 取得当前单元格的列 I ...

  8. 【Python图像特征的音乐序列生成】关于数据集的分享和样例数据

    数据集还在制作中,样例数据如下: 我将一条数据作为一行,X是ID,O代表了情感向量,S是速度,是一个很关键的参数,K是调式,M是节拍,L是基本拍.后面是ABC格式的序列,通过embedding化这些音 ...

  9. Java异常之RuntimeException

    人生不如意十有八九.在打Core Java里面的例子的时候总是一遍就过,但是实际上只要是自己想着动手去打造自己想要的东西,异常的状况也是十有八九的. 在Java中会使用异常处理的错误捕获机制处理这些异 ...

  10. SAP Cloud for Customer客户主数据的重复检查-Levenshtein算法

    SAP C4C的客户主数据创建时的重复检查,基于底层HANA数据库的模糊查找功能,根据扫描数据库中已有的数据检测出当前正在创建的客户主数据是否和数据库中记录有重复. 在系统里开启重复检查的配置: 在此 ...