伪类+ transform
.border_1px:before{
content: '';
position: absolute;
top: 0;
height: 1px;
width: 100%;
background-color: #000;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.border_1px:before{
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.border_1px:before{
transform: scaleY(0.33);
}
}

设备像素比device pixel ratio简称dpr,即物理像素和设备独立像素的比值。

scaleY(y) 通过设置 Y 轴的值来定义缩放转换。

移动端1px 边框的更多相关文章

  1. 移动端1px边框

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

  2. 移动端1px边框伪类宽高计算

    移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...

  3. 目前解决移动端1px边框最好的方法

    在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...

  4. 移动端1px边框实现

    问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...

  5. 移动端1px边框问题

    用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...

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

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

  7. 移动端1px边框解决方案

    在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽. 使用伪类加transform的方式 元素本身不定义 ...

  8. 解决移动端1px边框问题的几种方法

    1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中 ...

  9. 移动端1px 边框完整方案(四个方向)

    使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l  左右方向 t ...

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

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

随机推荐

  1. win10 sql server2012 连接navicat 无法使用

    修改 连接navicat时报如下错误,按照网上办法,各种删除navicat的客户端,行不通. 点击sqlserver管理器,提示评估期已过.有关如何升级的测试版软件的信息,请访问http://www. ...

  2. 什么是http协议(一)

    http协议是大家在互联网中最为熟悉的协议,只要上网大家都会遇到,但是,很多人被问道什么是http协议,http协议的内容是什么就懵了.这里,我们随便聊聊http协议. 首先,我们说说协议.我一直觉得 ...

  3. fegin熔断autowired失败

    在SpringBootApplication中加入 @EnableFeignClients(basePackages = "com.supplychain")指定熔断的路径就可以了

  4. Ubuntu:系统信息查询

    造冰箱的大熊猫@cnblog 2018/3/14 1.查询系统信息(uname) uname命令返回与系统相关的信息,如下所示. $ uname -a Linux IBM-T60 4.13.0-36- ...

  5. Ubuntu:电源管理

    本文适用于Ubuntu 16.04,造冰箱的大熊猫@cnblogs 2018/3/4 在Ubuntu 16.04中,与电源管理相关的选项位于System Settings下的Power对话框中. 要启 ...

  6. zabbix服务端接收的数据类型,便于编写脚本向服务端提交数据

    1.数据类型1:zabbix_agent执行脚本提交字典 UserParameter=tcp_port_listen,/usr/local/zabbix/share/script/get_game_p ...

  7. 关于int main(int argc,char* argv[])详解

    平时在VS的环境下,主函数总会看到这两个参数,今天突然很想知道这两个参数的原理以及作用,因此查了下资料.真心受教了. 下面的博文是在百度空间看一位大神的,原文链接:http://hi.baidu.co ...

  8. 23.Python位运算符详解

    位运算符通常在图形.图像处理和创建设备驱动等底层开发中使用.使用位运算符可以直接操作数值的原始 bit 位,尤其是在使用自定义的协议进行通信时,使用位运算符对原始数据进行编码和解码也非常有效. 位运算 ...

  9. zabbix-server服务端配置文件

    [root@node7 ~]# vim /etc/zabbix/zabbix_server.conf ##日志文件 LogFile=/var/log/zabbix/zabbix_server.log ...

  10. 域名与服务器 ip地址的理解

    域名 服务器 ip地址具有怎样的关系呢 通俗的讲,我们访问一个网站就相当于访问一个服务器的文件,如果想要通过自己的域名来访问一个网站,首先得将域名部署到你的服务器上,然后就可以通过域名访问到你服务器上 ...