移动端不同尺寸设备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. 程序设计入门——C语言 第7周编程练习 1多项式加法(5分)

    第7周编程练习 依照学术诚信条款,我保证此作业是本人独立完成的. 温馨提示: 1.本次作业属于Online Judge题目,提交后由系统即时判分. 2.学生可以在作业截止时间之前不限次数提交答案,系统 ...

  2. python获取时间

    获取当前时间,和当前UTC时间 #!/usr/bin/env python #_*_ encoding:utf-8_*_ import datetime import time utctime = d ...

  3. redux介绍与入门

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 20.0px Helvetica } p.p2 { margin: 0.0px 0.0px 0.0px 0. ...

  4. 初学js/jquery 心得

    1.多个对象操作的时候可以放在一起,eg: $('.send_message, .friends_increment').blur(function() {}); 2.三元表达式与if else,eg ...

  5. mysql delete 使用别名 语法

    今天删除数据,写了这么条sql语句, DELETE   from  sys_menus s WHERE s.MENU_ID in (86,87,88); 结果报错.. [Err] 1064 - You ...

  6. 样本、文库、重复、lane、run - 二代测序原理及名词解释

    参考: 独占鳌头的Illumina仪器(二代测序篇) HiSeq2000测序原理.流程与仪器 NGS文库制备的方法比较[心得点评] 各种测序文库构建方式 样本:就是待测的DNA.RNA或蛋白序列,样本 ...

  7. Python之路 day2 字典练习题之 三级菜单

    #Author:ersa ''' 程序: 三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 ''' menu = { '北京':{ '海淀':{ '五道口':{ 'soho':{ ...

  8. Oracle ORA-12154: TNS: 无法解析指定的连接标识符”错误

    主要原因: 1.监听服务没有起起来.windows平台个一如下操作:开始---程序---管理工具---服务,打开服务面板,启动oraclehome92TNSlistener服务. 2.database ...

  9. Android开发之无线遥控器

    最近弄了一个UDP/TCP的小东西,主要需要实现的功能如下(服务器端): 1.基于局域网 2.服务器端网络接口为无线与有线 3.服务器端接收到客户端的数据需要模拟按键进行处理 4.开机自启动 5.使用 ...

  10. codeforces #369div2 B. Chris and Magic Square

    题目:在网格某一处填入一个正整数,使得网格每行,每列以及两条主对角线的和都相等 题目链接:http://codeforces.com/contest/711/problem/B 分析:题目不难,找到要 ...