<!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. Window.navigator

    定义和用法 userAgent 属性是一个只读的字符串,声明了浏览器用于 HTTP 请求的用户代理头的值. 一般来讲,它是在 navigator.appCodeName 的值之后加上斜线和 navig ...

  2. 全代码实现ios-2

    全代码开发ios第一个应用程序,完全像是盲人摸象. 首先,要设计这个应用,无论从界面,还是颜色搭配,以及功能,都是一个人完成. 也许,做独立开发人真的相当不容易. 因为,没有人帮忙给意见,而且,也没有 ...

  3. 关于form.submit()不能提交表单的错误原因

    来源:http://www.ido321.com/948.html 直接上代码把: 1: <div id="register"> 2: <h4>会员注冊&l ...

  4. linux scp 服务器远程拷贝

    一.将本机文件复制到远程服务器上 #scp /home/administrator/news.txt root@192.168.1.1:/etc/squid /home/administrator/  ...

  5. Java中怎样由枚举常量的ordinal值获得枚举常量对象

    Java1.5提供了关键字enum,能够通过该关键字方便得定义自己须要的枚举类型,比方 enum Season { SPRING, SUMMER, AUTUMN, WINTER } 就定义了一个季节枚 ...

  6. TP复习9

    配置文件 'TMPL_TEMPLATE_SUFFIX'=>'.html',//更改模板文件后缀名'TMPL_FILE_DEPR'=>'_',//修改模板文件目录层次'TMPL_DETECT ...

  7. android自定义TabWidget样式

    先看看效果图吧,个人觉得图标丑了点,不过还行,自己用PS做的 下面是全部代码和流程,一定要按流程顺序来,不然错误! 1.tabhost.xml <TabHost xmlns:android=&q ...

  8. SQL还原备份数据库读取失败 38错误解决办法

    连接上数据库后新建查询执行以下命令: RESTORE DATABASE 还原后的数据库名 FROM DISK = 'D:\yjdb\pms_yj_20110722.bak(备份文件)' WITH RE ...

  9. How does a relational database work

    http://blog.jobbole.com/100349/ http://coding-geek.com/how-databases-work/

  10. -force_load使用办法

    项目中用到Three20框架,同时也使用了讯飞语音的framework,编译时出现类似如下冲突提示信息: ld: duplicate symbol _OBJC_CLASS_$_AdLinks in / ...