移动端1px
移动端不同尺寸设备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的更多相关文章
- 移动端1px边框
问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...
- 移动端1px细线解决方案总结
现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...
- 移动端1px细线解决方案--利用transform缩放方式
移动端1px会显示为2px; 解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放 1. 上边框 相当于 border-top <div class="bor ...
- 移动端1px边框伪类宽高计算
移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...
- 目前解决移动端1px边框最好的方法
在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...
- 移动端1px问题处理方法
在做移动端开发时,设计师提供的视觉稿一般是750px,当你定义 border-width:1px 时,在iphone6手机上却发现:边框变粗了.. 这是因为,1px是相对于750px的(物理像素),而 ...
- 移动端1px的解决办法之styled
做项目的时候总结了一个styled中解决移动端项目1px像素线的问题,封装了一个函数,大家可以直接使用,很方便. 1 import styled from 'styled-components' co ...
- 移动端1px边框实现
问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...
- 移动端1px边框问题
用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...
随机推荐
- plist基本操作
重要概念:某些路径下“只能读,不能写”的原因 iPhone.ipad真机上 Resouces文件夹:是只读的,无法写入. document 和temp文件夹:可读,可写. 一.工程结构
- mysql-5.7.9安装
版本:mysql-5.7.9-linux-glibc2.5-x86_64.tar.gz(编译版本) 解压: tar -zxvf mysql-5.7.9-linux-glibc2.5-x86_64.ta ...
- 【网络】IP地址格式转换(htonl、ntohl;inet_addr、inet_ntoa)
1.htonl ()和ntohl( ) u_long PASCAL FAR ntohl (u_long netlong); u_short PASCAL FAR ntohs (u_short nets ...
- RedHat下安装Telnet服务端及客户端远程连接配置
Telnet协议是TCP/IP协议族中的一员,是Internet远程登陆服务的标准协议和主要方式.它为用户提供了在本地计算机上完成远程主机工作的能力. 配置之前请确保网络连通,如防火墙影响连接,请先关 ...
- Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法
Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法 如下面所示,同时导入这两个,会提示其中一个与另一个产生冲突. 1i ...
- SQLServer解析xml到Oracle
写了一个程序:根据状态位读取SQLserver 中的一张表,下载其中一个字段的值,这个值是XML类型的,然后把这个XML文件的内容插入到另一Oracle数据库,并更新SQLServer表的标志位,表示 ...
- svn: Can't convert string from 'UTF-8' to native encoding 的解决办法(转)
http://www.cnblogs.com/xuxm2007/archive/2010/10/26/1861223.html svn 版本库中有文件是以中文字符命名的,在 Linux 下 check ...
- [前端神器]handlebars+require基本使用方法
最近在某网站看到了handlebars.js,出于好奇就百度了下这是神马玩意,结果让我很是欢喜,于是就开始自学下,handlebars就几个方法,蛮简单,言归正传! 以下是基本教学逻辑演示,会附完整代 ...
- xtrapivotcontrol 控件用法及相关属性
XtraPivotControl使用指南:可参照以下的文档: 转载自:http://wenku.baidu.com/view/d7886b20aaea998fcc220e53.html 上面链接中对x ...
- 三:关于tcp
转自:http://www.jellythink.com/archives/705 TCP是什么? 具体的关于TCP是什么,我不打算详细的说了:当你看到这篇文章时,我想你也知道TCP的概念了,想要更深 ...