zoukankan      html  css  js  c++  java
  • 移动端1px细线的处理

    <!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;     
    			  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;     
    			  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)就好。

  • 相关阅读:
    as3 三行三列 布满9个为一个界面
    as3 判断鼠标移动方向
    求两点之间 的直线距离
    AS3 localToGlobal、globalToLocal方法的总结
    as3 TweenMax TweenLite方法
    禁止点击
    影片 发光 变色
    ASCII字符串互换
    关于C语言的书
    关于态度
  • 原文地址:https://www.cnblogs.com/web-alibaba/p/4841030.html
Copyright © 2011-2022 走看看