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

@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){//dpi:1.5

  .border-1px:after{

    -webkit-transform:scaleY(0.7);

    transform:scaleY(0.7)

  }

}

@media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){//dpi:2

  .border-1px:after{

    -webkit-transform:scaleY(0.5);

    transform:scaleY(0.5)

  }

}

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

  1. 移动端1px边框

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

  2. 移动端1px细线解决方案总结

    现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...

  3. 移动端1px细线解决方案--利用transform缩放方式

    移动端1px会显示为2px; 解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放 1. 上边框 相当于 border-top <div class="bor ...

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

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

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

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

  6. 移动端1px问题处理方法

    在做移动端开发时,设计师提供的视觉稿一般是750px,当你定义 border-width:1px 时,在iphone6手机上却发现:边框变粗了.. 这是因为,1px是相对于750px的(物理像素),而 ...

  7. 移动端1px的解决办法之styled

    做项目的时候总结了一个styled中解决移动端项目1px像素线的问题,封装了一个函数,大家可以直接使用,很方便. 1 import styled from 'styled-components' co ...

  8. 移动端1px边框实现

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

  9. 移动端1px边框问题

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

随机推荐

  1. 转:java怎么用一行代码初始化ArrayList

    java怎么用一行代码初始化ArrayList 您可以创建一个工厂方法: public static ArrayList<String> createArrayList(String .. ...

  2. JQuery_DOM 节点操作之创建节点、插入节点

    一.创建节点 为了使页面更加智能化,有时我们想动态的在html 结构页面添加一个元素标签,那么在插入之前首先要做的动作就是:创建节点 <script type="text/javasc ...

  3. 1奶茶店创业成本: 2发饰品加盟店创业成本 3眼镜行业店创业成本 从“程序员转行卖烧饼”想到IT人创业

    总结: -------奶茶店创业成本: 而这个奶茶店初期投资是:3万元加盟费+1万元保证金+8000装修+两万设备(冰柜.展示柜.收银机等等).别说赚钱,什么时候把初期投资赚回来呀! 一个店的利润就是 ...

  4. ATC空管系统的实时控制软件系统分析

    什么是ATC空管系统? 空中交通管制的目的是对航空器的空中活动进行有效的管理,维护空中交通秩序,保障空中交通畅通,保证飞行安全和提高飞行效率,防止航空器相撞,防止机场及其附近空域的航空器同障碍物相撞. ...

  5. java 反编译

    JavaDecompiler http://jd.benow.ca/jd-eclipse/update/

  6. javadoc相关问题

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  7. 习题 5: 更多的变量和打印 | 笨办法学 Python

    一. 简述 “格式化字符串(format string)” -  每一次你使用 ' ’ 或 " " 把一些文本引用起来,你就建立了一个字符串. 字符串是程序将信息展示给人的方式. ...

  8. 通过form表单获取值

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

  9. 神经网络模型之AlexNet的一些总结

    说明: 这个属于个人的一些理解,有错误的地方,还希望给予教育哈- 此处以caffe官方提供的AlexNet为例. 目录: 1.背景 2.框架介绍 3.步骤详细说明 5.参考文献 背景: AlexNet ...

  10. ASP.NET MVC异步上传文件

    自己做的一个小dome.贴出来分享一下: 前端: <form id="formfile" method="post" enctype="mult ...