移动端不同尺寸设备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. centos7 安装redis 开机启动

    redis 下载 https://redis.io/download wget http://download.redis.io/releases/redis-3.2.6.tar.gz 解压缩 .ta ...

  2. iOS CommonCrypto 对称加密 AES ecb,cbc

    CommonCrypto 为苹果提供的系统加密接口,支持iOS 和 mac 开发: 不仅限于AES加密,提供的接口还支持其他DES,3DES,RC4,BLOWFISH等算法, 本文章主要讨论AES在i ...

  3. class命名

    常见class关键词: 布局类:header, footer, container, main, content, aside, page, section 包裹类:wrap, inner 区块类:r ...

  4. 收集C#常用类：自己写的一个DBHelper类

    随着学的东西越来越多,一点点的完善吧! using System; using System.Collections.Generic; using System.Linq; using System. ...

  5. 一步一步将Vim打造成C++超级IDE

    文/嶽永鹏 最近从MS Windows 转到了Liunx,花了一段时间熟悉和学习Liunx环境.有时候,真的很是怀念MS Vistual Studio那种超级智能的开发环境,总是想在Vim拾起那些曾进 ...

  6. Jquery mobile 新手问题总汇

    1页面缩放显示问题 问题描述: 页面似乎被缩小了,屏幕太宽了. 解决办法: 在head标签内加入: <meta name="viewport" content="w ...

  7. UImenuController

    长按出现选择项:关键方法 在 tabview 中需要制定 tabview 的一些方法:关键为 在某种特殊情况下,需要自定义的时候:采用如下方式

  8. js中正则表达式 ---- 现成

    1 . 校验密码强度 密码的强度必须是包含大小写字母和数字的组合,不能使用特殊字符,长度在8-10之间. ^(?=.*\\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$ 2. 校验中 ...

  9. [原创]导出CSV文件，特殊字符处理。

    CSV文件格式 1.CSV文件默认以英文逗号(,)做为列分隔符,换行符(\n)作为行分隔符.2.CSV默认认为由""括起来的内容是一个栏位,这时不管栏位内容里有除"之外字 ...

  10. js localStorage 设置和取值

    定义 Storage 对象,对象有get(取值), set(设置), add(加入新值)三个方法 const Storage = {} Storage.get = function (name) { ...