<!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. （剑指Offer）面试题27：二叉搜索树与双向链表

    题目: 输入一棵二叉搜索树,将该二叉搜索树转换成一个排序的双向链表.要求不能创建任何新的结点,只能调整树中结点指针的指向. 二叉树的定义如下: struct TreeNode{ int val; Tr ...

  2. 《Secrets of the JavaScript Ninja》：JavaScript 之运行时代码

    最近,在阅读 jQuery 之父 John Resig 力作:Secrets of the JavaScript Ninja(JavaScript忍者秘籍).关于第九章提及的 JavaScript 之 ...

  3. Form实现主从块金额汇总

    1.FORM使用app_calculate.running_total汇总行金额,行上有编码重复验证. 情况一:当录入多个编码重复的行并保存时,报错,清除一个重复行再保存(头行金额一致),报错&quo ...

  4. MFC中修改静态文本框中文字的字体、颜色

    假设有一个静态文本框控件,其ID为:IDC_STATIC_XSDJ,且关联一个control类的CStatic类型的变量m_static_xsdj. 设置字体时自然要用到CFont类,下面介绍两种方法 ...

  5. USB DATA Toggle

    For bulk and interrupt transfers, the data toggle resets <0> only on Set Configuration, Set In ...

  6. Request对象的主要方法

    setAttribute(String name,Object):设置名字为name的request的參数值 getAttribute(String name):返回由name指定的属性值 getAt ...

  7. LVS测试小结

    RedHat5实现负载均衡 http://blog.sina.com.cn/s/blog_4e424e2101007rie.html http://www.doc88.com/p-9975618478 ...

  8. 编写你自己的单点登录（SSO）服务

    王昱 yuwang881@gmail.com   博客地址http://yuwang881.blog.sohu.com 摘要:单点登录(SSO)的技术被越来越广泛地运用到各个领域的软件系统其中.本文从 ...

  9. 源码级分析Android系统启动流程

    首先看一下Android系统的体系结构,相信大家都不陌生 1.首先Bootloader引导程序启动完Linux内核后,会加载各种驱动和数据结构,当有了驱动以后,开始启动Android系统,同时会加载用 ...

  10. 推荐几个可以与PhoneGap很好搭配的UI框架

    - xui.js:可以被视作是jquery在phonegap上的替代品,挺好用的- jq.mobi:同上,不过体积比xui.js要大,一般还是用xui.js- jq.ui:jq.mobi配套的UI框架 ...