移动端不同尺寸设备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. Redis教程(二):String数据类型

    一.概述: 字符串类型是Redis中最为基础的数据存储类型,它在Redis中是二进制安全的,这便意味着该类型可以接受任何格式的数据,如JPEG图像数据或Json对象描述信息等.在Redis中字符串类型 ...

  2. CSRF token 无法被验证. ----Yii连接数据库后数据库错误日志报错

    CSRF token 无法被验证. 我使用的是mongodb+ yii1.1 What is CSRF, please see the details here.  http://en.wikiped ...

  3. 正则匹配中 ^ $ 和 \b 的区别

    正则匹配中 ^ $ 和 \b 的区别     ^和$分别代表字符串的开始和结束,因此^\d$只能匹配包含一个数字的字符串\b代表单词边界,其前后必须是不同类型的字符,可以组成单词的字符为一种类型,不可 ...

  4. swift_Class类的继承

    //: Playground - noun: a place where people can play var str = "Hello, playground" //***** ...

  5. C#基础

    .net/dotnet:一般指.NetFramework框架,一种平台,一种技术. c#(sharp):一种编程语言,可以开发基于.net平台的应用. Java:是一种技术,又是一门语言: .net应 ...

  6. VC界面最前端显示

    //显示在最前端 m_pMainWnd->SetWindowPos(&CWnd::wndTopMost, 0,0,0,0,SWP_NOMOVE|SWP_NOSIZE); if (m_pM ...

  7. JavaScipt 数据交互

    标准的w3c直接提供了XMLHttpRequest方法,我们主要站在设计的角度来理解,如何设计出低耦合高内聚的代码jquery对Ajax的处理主要体现在对浏览器兼容,数据的处理过滤以及各种事件的封装上 ...

  8. Could not load file or assembly or one of its dependencies. 试图加载格式不正确的程序。

    当我把编译好的程序托管到IIS下后,访问时出现了以下问题,服务器环境是IIS 7,操作系统 Windows server 2008 r2 64位. 出现上述问题的原因是,所加载的程序集中有32位的,也 ...

  9. hadoop3.0 alpha1 安装配置

    1. 官网下载 wget  http://apache.fayea.com/hadoop/common/hadoop-3.0.0-alpha1/hadoop-3.0.0-alpha1.tar.gz 2 ...

  10. redis集群报错

    写入redis集群报错:(error) MOVED 6918 解决方法:redis-cli -c -p 7001 -h 10.0.0.104