伪类+ 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. UVa156 Ananagrams(映射map)

    Ananagrams 题目 Most crossword puzzle fans are used to anagrams--groups of words with the same letters ...

  2. 移动/Web开发必备工具!DevExtreme v19.1.7火热发布

    DevExtreme Complete Subscription是性能最优的 HTML5,CSS 和 JavaScript 移动.Web开发框架,可以直接在Visual Studio集成开发环境,构建 ...

  3. php类点滴---访问修饰符public protected private

    public可以被继承,可以外部访问(也就是实例化对象可以直接访问) protected受保护的,可以被子类继承,无法外部访问 private继承,外部访问都别想 <?phpclass coac ...

  4. Python之阿姆斯特朗数

    # Python 检测用户输入的数字是否为阿姆斯特朗数 # 如果一个n位正整数等于其各位数字的n次方之和,则称该数为阿阿姆斯特朗数 while True: # 获取用户输入的数字 num = int( ...

  5. web文件系统

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 先说下要求: PC端全平台支持,要求支持Windows,Mac,Linux 支持所 ...

  6. Qbxt AH d4 && day-6

    /* 这两天考试直接呵呵了. 赶脚对qbxt的题目无感. 同时也发现了自己的一些问题. 一些思路题总是自己傻逼的挖个坑跳进去. 这两天场场倒数ORZ. 始终是最弱的.... 然后NOIP光荣三等奖了吧 ...

  7. JavaScript如何比较两个数组的内容是否相同

    今天意外地发现JavaScript是不能用==或===操作符直接比较两个数组是否相等的. alert([]==[]); // false alert([]===[]); // false 以上两句代码 ...

  8. AtCoder AGC009E Eternal Average (DP)

    题目链接 https://atcoder.jp/contests/agc009/tasks/agc009_e 题解 又被劝退了... 第一步转化非常显然: 就等价于一开始有一个数\(1\), 有\(\ ...

  9. Spring Boot教程(三十九)使用MyBatis注解配置详解(2)

    增删改查 MyBatis针对不同的数据库操作分别提供了不同的注解来进行配置,在之前的示例中演示了@Insert,下面针对User表做一组最基本的增删改查作为示例: public interface U ...

  10. HDU 5794 A Simple Chess ——(Lucas + 容斥)

    网上找了很多人的博客,都看不太懂,还是大力学长的方法好. 要说明的一点是,因为是比较大的数字的组合数再加上mod比较小,因此用Lucas定理求组合数. 代码如下(有注释): #include < ...