一、为什么会有一像素问题

弄明白这个问题,首先要知道DPR了。

  DPR(device pixel ratio)pixel等于picture element。设备像素比,是默认缩放100%的情况下,即DPR=设备像素个数/理想视口像素个数(device-width)。

  1.设备像素:设备的物理像素,任何设备的物理像素都是固定不变的。

  2.布局视口:移动端css布局所依据的视口,即css布局是根据布局视口来计算的。理想视口即为理想的布局视口。

拿iPhone6为例,当我们写一像素线border-top:1px solid red;时,屏幕显示的1px的红线吗?显然不是。布局视口是移动端我们css布局的依据视口,在我们设置<meta name="viewport" content="width:device-width">时就将布局视口设置为理想视口了。iPhone6的DPR=2,因此在屏幕上显示的其实是2px的红线。有人说,那我们写css布局时写border-top:0.5 solid red;不就完了吗。想法很好,但是计算机会将0.5计算成1。
二、transform:scale

这里的解决办法是对这条线进行缩放,使用伪元素::before或者::after来实现一像素边框,再利用@media适配不同的设备像素比,来确定缩放比例。

.border-top {
position: relative;
}
.border-top::before {
position: absolute;
top: ;
left: ;
content: " ";
width: %;
height: 1px;
background-color: #e4e4e4;
} /* 2倍屏 */
@media (min-resolution: 2dppx){ // 设备像素比 -webkit-min-device-pixel-ratio 不是标准的css特性,推荐使用分辨率特性resolution
.border-top::before {
transform: scaleY(0.5);
}
} /* 3倍屏 */
@media (min-resolution: 3dppx) {
.border-top::before {
transform: scaleY(0.33);
}
}

  

移动web之一像素问题的更多相关文章

  1. 移动端web之像素基础

    px:css pixels逻辑像素,浏览器使用的抽象单位 dp,pt :device independent pixels 设备无关像素 dpr:devicePixelRatio 设备像素缩放比 计算 ...

  2. 移动web 1像素边框

    实现方法 border-image 图片 实现 这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 <使用border-image实现类似iOS7的1px底边> ...

  3. 移动web开发基础(一)——像素

    这篇文章要弄清楚2个问题:一.什么是逻辑像素和物理像素:二.这两者有什么关系. 对于问题一,先抛出两个概念.我们经常使用的px就是逻辑像素,是浏览器使用的抽象单位:物理像素又和dp/pt(设备无关像素 ...

  4. 移动端web开发的一些知识点

    整理一下自己平时移动端web开发中遇到的问题,也参考一下前辈的一些总结 1.最常见的要数1像素边框了 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在dpr=2的retina屏下会显示成 ...

  5. 小型移动 webApp Demo 知识点整理

    包括内容: css初始化.css全局设置.常用meat标签.rem适配.flex布局.相关技巧(手势库使用.多行截字.1像素边线.点击状态.placeholder居中等) reset 引用 norma ...

  6. SVG 与 Canvas:如何选择

    SVG 与 Canvas:如何选择 61(共 69)对本文的评价是有帮助 - 评价此主题   本主题一开始将对 SVG 与 Canvas 进行简要比较,接下来会讨论大量的比较代码示例,如光线跟踪和绿屏 ...

  7. 移动WEB像素相关知识

    了解移动web像素的知识,主要是为了切图时心中有数.本文主要围绕一个问题:怎样根据设备厂商提供的屏幕尺寸和物理像素得到我们切图需要的逻辑像素?围绕这个问题以iphone5为例讲解涉及到的web像素相关 ...

  8. 移动web开发之像素和DPR

    × 目录 [1]定义 [2]分类 [3]缩放[4]DPR 前面的话 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于 ...

  9. web前端绘制0.5像素的几种方法

    最近完成了公司安排的移动web触屏开发,期间涉及到在移动设备上显示线条,最开始采用PC常用的css board属性来显示1个像素的线条,但是发现在移动设备上并不美观,参考淘宝.京东的触屏发现它们均是采 ...

随机推荐

  1. 136. Single Number唯一的数字

    [抄题]: Given an array of integers, every element appears twice except for one. Find that single one. ...

  2. oracle的约束隐式创建索引和先索引后约束的区别

    oracle的约束隐式创建索引和先索引后约束的区别 两种情况:1.对于创建约束时隐式创建的索引,在做删除操作的时候: 9i~11g都会连带删除该索引 2.对于先创建索引,再创建约束(使用到此索引)这种 ...

  3. Java工具类之Apache的Commons Lang和BeanUtils

    Apache Commons包估计是Java中使用最广发的工具包了,很多框架都依赖于这组工具包中的一部分,它提供了我们常用的一些编程需要,但是JDK没能提供的机能,最大化的减少重复代码的编写. htt ...

  4. 1710 生日蛋糕(1999 noi)

    1710 生日蛋糕(1999 noi) 1999年NOI全国竞赛 题目描述 Description 7月17日是Mr.W的生日,ACM-THU为此要制作一个体积为Nπ的M层生日蛋糕,每层都是一个圆柱体 ...

  5. meshconverters

    https://github.com/RobotLocomotion/meshConverters meshconverters $ mkdir build && cd build $ ...

  6. Storm的StreamID使用样例(版本1.0.2)

    随手尝试了一下StreamID的的用法.留个笔记. ==数据样例== { "Address": "小桥镇小桥中学对面", "CityCode" ...

  7. [GO]断言

    使用if实现断言 package main import "fmt" type Student struct { name string id int } func main() ...

  8. Exception (2) Java Exception Handling

    The Java programming language uses exceptions to handle errors and other exceptional events.An excep ...

  9. 编写高质量代码改善C#程序的157个建议——建议118:使用SecureString保存密钥等机密字符串

    建议118:使用SecureString保存密钥等机密字符串 托管代码中的字符串是一类特殊的对象,它们不可用被改变.每次使用System.String类张的方法之一时,或者使用此类型进行运算时(如赋值 ...

  10. unittest测试框架详谈及实操(四)

    测试套件 应用unittest的Test Suite特性,可以将不同的测试组成一个逻辑组,然后设置统一的测试套来一起执行测试.通过TestSuite.TestLoader类来创建测试套件,最后用Tes ...