• 移动端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)就好。

  • 相关阅读:
    HAProxy+keepalived+MySQL 实现MHA中slave集群负载均衡的高可用
    mysql高可用架构之MHA,haproxy实现读写分离详解
    bootstrap全局css样式
    响应式与bootstrap
    jquery3
    jquery2
    jquery
    client,offset,scroll系列
    javascript-BOM
    JavaScript-DOM续
  • 原文地址:https://www.cnblogs.com/web-alibaba/p/4841030.html
Copyright © 2020-2023  润新知