<!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. 当spring 容器初始化完成后执行某个方法 防止onApplicationEvent方法被执行两次

    在做web项目开发中,尤其是企业级应用开发的时候,往往会在工程启动的时候做许多的前置检查. 比如检查是否使用了我们组禁止使用的Mysql的group_concat函数,如果使用了项目就不能启动,并指出 ...

  2. 组合方法(ensemble method) 与adaboost提升方法

    组合方法: 我们分类中用到非常多经典分类算法如:SVM.logistic 等,我们非常自然的想到一个方法.我们是否可以整合多个算法优势到解决某一个特定分类问题中去,答案是肯定的! 通过聚合多个分类器的 ...

  3. DedeCMS调用多说评论系统遇到的一些问题

    最近前端笔记加入了多说的评论,因为自带的评论太渣了.过程不是很顺利,把遇到的问题和大家分享下.我用的dedecms,所以使用的是dede的多说评论模块.效果图: 多说官方下载:http://dev.d ...

  4. php-工厂模式(转)

    针对自己的不足与加深php的认识,选择用php来研究各种设计模式. 今天就看了设计模式的介绍,并学习了工厂模式,因为工厂模式比较简单,也比较常用.工厂模式的最主要作用就是对象创建的封装.简化创建对象操 ...

  5. 解决win7 64位中 魔方与TortoiseSVN的冲突解决【2014-02-10】

    原文地址:http://www.cnblogs.com/hbbbs/p/3542479.html 现象 启动后弹出SendRpt:Error的提示框,然后变成soap1.2 fault.关闭后,又会自 ...

  6. oc-13-多文件

    Dog.h #import <Foundation/Foundation.h> @interface Dog : NSObject { @public NSString *_name; i ...

  7. MySQL Order By实现原理分析和Filesort优化

    http://blog.csdn.net/hguisu/article/category/796963

  8. docker（4）：coreos+docker+rancher真厉害

    http://blog.csdn.net/freewebsys/article/category/3103827

  9. 用户环境配置文件/etc/profile

    当用户在登录界面正确地输入用户名和密码后,系统就开始为用户构建一个可以使用的用户环境.用户环境包括用户使用的环境变量.快捷键设置及命令别名等.这些设置大多是通过运行全局用户配置文件/etc/profi ...

  10. 小白日记44：kali渗透测试之Web渗透-SqlMap自动注入（二）-sqlmap参数详解REQUEST

    Sqlmap自动注入(二) Request ################################################### #inurl:.php?id= 1. 数据段:--d ...