移动端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,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...
随机推荐
- css3 transition动画
CSS3: 一.transition: <property> <duration> <animation type> <delay> eg: .div{ ...
- 新手如何查看API文档?
Java API文档为例: 1:知道包名,可以在Overview里直接找到这个包,然后去查这个包下面的类和方法.2:知道类名和方法名,可以在Index.html里直接去找这个类或方法,然后查看.3:如 ...
- linux学习网站分享
http://www.zhihu.com/question/19895288 http://linux.vbird.org/ 两个linux学习的网页存起来,以后学习.
- 磁盘文件系统Fat、Fat32、NTFS、exFAT的优缺点
我们在Windows系统里格式化磁盘的时候,文件系统的选项里可以看到有“FAT”.“FAT32”.“NTFS”等选项,在对U盘或其他移动存储设备 格式化的时候还会出现“exFAT”选项,那么这四种磁盘 ...
- 【WebGoat习题解析】AJAX Security->Insecure Client Storage
绕过前端验证可以通过两种办法:一是利用开发者工具进行debug:二是利用burpsuite直接抓取.本题解决思路如下: STAGE 1: For this exercise, your mission ...
- lamp搭建,thinkphp安装
有几天没有记录学习进度了,简单回顾一下:前天由于不熟悉linux的安装操作,以及遇上了各种问题花了将近6小时搭建好了lamp,然而在中途学习修改配置时误改了启动的图形文件,导致了昨天开机时图形界面无法 ...
- Myeclipse的使用
一,错误解决 1, 现象:使用eclipse运行带有main函数的Java文件时,出现editor does not contain a main type的错误框 原因:原来这个class所在包没有 ...
- cocos2dx 3.1获取系统当前时间
std::string Tools::getcurrTime() { #if (CC_TARGET_PLATFORM == CC_PLATFORM_ANDROID || CC_TARGET_PLATF ...
- ThinkPHP 3.2.3(三)架构之URL模式
一.标准URL格式 http://serverName/index.php/模块/控制器/操作 二.URL大小写 在/ThinkPHP/Conf/convention.php文件里有URL大小写的 ...
- Tomcat 启动项目报错 java.lang.OutOfMemoryError: Java heap space
近日使用myeclipse 部署web项目,启动tomcat时报错: SEVERE: Error waiting for multi-thread deployment of directories ...