<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>利用transform实现1px的细线</title>

	<style type="text/css">

		.line{

			 position: relative;

			 margin-top: 20px;

			 border:none;

		}

		.line:after{

			 content: '';

			 position: absolute;

			 top: 0;

			 left: 0;

			 border-top: 1px solid red;

			 -webkit-box-sizing: border-box;

			 box-sizing: border-box;

			 width: 100%;

			 height: 100%;

			 -webkit-transform: scaleY(0.5);

			 transform: scaleY(0.5);

			 -webkit-transform-origin: left top;

			 transform-origin: left top;

		}

		.line2{

			 position: relative;

			 margin-top: 40px;

			 border:none;

		}

		.line2:after{

			 content: '';

			 position: absolute;

			 top: 0;

			 left: 0;

			 border-bottom: 1px solid red;

			 -webkit-box-sizing: border-box;

			 box-sizing: border-box;

			 width: 100%;

			 height: 100%;

			 -webkit-transform-origin: left top;

			 transform-origin: left top;

		}

	</style>

</head>

<body>

	<div class='line'>1</div>

	<div class='line2'>1</div>

	<script src='js/rem.js'></script>

	<script src="http://127.0.0.1:8082/target/target-script-min.js#anonymous"></script>

</body>

</html>

　　其实是dpi在作怪，现在主流的手机大都是2dpi的，那么一个物理像素会渲染出2px，所以1px的细线就变成了2px，处理方法也很简单。scaleY（0.5）就好。

移动端1px细线的处理的更多相关文章

  1. 移动端1px细线解决方案总结

    现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...

  2. 移动端1px细线解决方案--利用transform缩放方式

    移动端1px会显示为2px; 解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放 1. 上边框 相当于 border-top <div class="bor ...

  3. 移动端1px细线问题

    1可以用伪类实现 .con{position: relative;.con:before { content: " "; position: absolute; left: 0; ...

  4. 移动端高清适配方案（解决图片模糊问题、1px细线问题）

    本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...

  5. 移动端1px边框

    问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...

  6. 手机端1px细线公共类

    手机端1px细线公共类 .borderBottom1px{ position: relative; } .borderBottom1px:after{ content: ""; p ...

  7. 移动端1px边框伪类宽高计算

    移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...

  8. 目前解决移动端1px边框最好的方法

    在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...

  9. 移动端实1px细线方法

    前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2 ...

随机推荐

  1. url中的scheme

    iPhone上URL Schemes的作用为应用程序提供了一个其他应用程序或者safari可以启动他的方法. --http://blog.sina.com.cn/s/blog_5673c12f0100 ...

  2. VCL -- Understanding the Message-Handling System

    Understanding the Message-Handling System http://docwiki.embarcadero.com/RADStudio/XE7/en/Understand ...

  3. CodeForces 164C Machine Programming 费用流

    Machine Programming 题目连接: http://codeforces.com/problemset/problem/164/B Descriptionww.co One remark ...

  4. Codeforces Round #309 (Div. 1) C. Love Triangles dfs

    C. Love Triangles Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/553/pro ...

  5. .cmd文件不小心管理记事本打开的恢复

    比如不小心将.cmd文件关联成用记事本打开了,此时须要删除注冊表: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explor ...

  6. 看来是要改用Gecko的节奏，放弃Awesomium吧

    Gecko的对象模型很像微软自带的WebBrowser,Awesomium实在太难啃.

  7. poj 3660 Cow Contest（传递闭包 Floyd）

    链接:poj 3660 题意:给定n头牛,以及某些牛之间的强弱关系.按强弱排序.求能确定名次的牛的数量 思路:对于某头牛,若比它强和比它弱的牛的数量为 n-1,则他的名次能够确定 #include&l ...

  8. 4K加速普及，8K近在咫尺，下一个是？

        从铺天盖地的厂商宣传到亲戚朋友家的客厅.不可否认4K时代已全面到来------业内人士估计2015年是4K电视的一个突破年.知名市场调查机构StrategyAnalytics对4K电视进行了调 ...

  9. DP之矩阵连乘问题

    最优二叉查找树的一道思考习题 同最优二叉查找树一样,矩阵连乘问题也是一个卡特兰数问题(其动态规划的构造过程都很像) 分析解答: a,铺垫的数学知识首先要搞清楚矩阵相乘是怎么乘的: 1)对于连续的n个矩 ...

  10. Linux下的lds链接脚本基础

    转载:http://soft.chinabyte.com/os/104/12255104.shtml   今天在看uboot引导Linux部分,发现要对链接脚本深入了解,才能知道各个目标文件的内存分布 ...