移动端1px

先看大名鼎鼎的jquery weUI

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<meta http-equiv="Pragma" content="no-cache" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/sb.css" />
		<style type="text/css">
			h3 {
				text-align: center;
			}

			.sb {
				width: 90%;
				height: 100px;
				margin: 10px auto;
				border: 1px solid red;
				box-sizing: border-box;
			}
			.sb1 {
				width: 100%;
				height: 1px;
				margin-top: 50px;
				background: red;

			}
			.main {
				position: absolute;
				box-sizing: border-box;
				width: 180%;
				height: 200px;
				left: 5%;
				top: 200px;
				transform-origin: 0 0;
				border: 1px solid red;
				transform: scale(.5);
			}

			.main1 {
				width: 100%;
				height: 1px;
				margin-top: 100px;
				background: red;
				transform: scaleY(0.5);
			}
		</style>
	</head>

	<body>
		<h3>原始的</h3>
		<div class="sb">
			<div class="sb1">

			</div>
		</div>
		<h3>缩放后的</h3>
		<div class="main">
			<div class="main1">

			</div>

		</div>
	</body>

</html>

  

时间: 2024-11-05 21:42:52

移动端1px的相关文章

移动端1px细线解决方案总结

移动端1px变粗的原因 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个'px'的含义是不一样的. 移动端html的header总会有一句 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和

html移动端1px细线解决方案汇总

现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在那个版本没上线就迭代掉了,后面的版本针对这个问题做了些尝试, 这里总结下1px细线的处理方法 移动端1px变粗的原因 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个'px'的含义是不一样的. 移动端html的header总会有一句 <meta name="

移动端 1px边框 问题

https://segmentfault.com/a/1190000015736900 https://blog.csdn.net/yexudengzhidao/article/details/98480173 本文介绍了解决移动端1px边框问题的5种方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. 物理像素.设备独立像素和设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的

解决移动端1px边框问题的几种方法

1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 2.解决办法 a.使用border-image实现 根据需求选择图片,然后根据css的border-image属性设置.代

用伪元素写移动端1px边框时想实现边角效果

做移动端页面时,又想用伪元素做真实1像素边框,又想有边角时,会发现只加一个border-radius时出来的效果边款并没有变成圆角,解决办法是加两个border-radius <div class="white_wrap border b_all"> </div> .white_wrap{margin:1.5rem 1.5rem 0 1.5rem;background-color:#fff;border-radius:6px;} .border{ positio

移动端1px问题处理方法

在做移动端开发时,设计师提供的视觉稿一般是750px,当你定义 border-width:1px 时,在iphone6手机上却发现:边框变粗了.. 这是因为,1px是相对于750px的(物理像素),而我们定义的1px是相对于375px的(css像素)“实际上应该是border-width:0.5px”. 解决方法: 1.border-image 图片 实现 在使用 border-image 时,将border设计为物理1px,如下: .border-image-1px { border-widt

解决CSS移动端1px边框问题

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决1px边框问题</title> <meta name="viewport"

移动端1px 边框完整方案(四个方向)

使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l  左右方向 t  垂直方向 w 上下出现边框则为width反之为height(边框在方向上的长度) b 上出现边框则为bottom x 为哪个方向上的缩放 具体对应关系如下 face==top && (l=left t=top b=bottom w=width x=scaleY) face==bottom

移动端1px解决方法

前端的同学想必都碰到过1px边框的问题,在高分屏手机上,我们会发现自己写的1px往往会比预想的“粗”一些,下面是他人总结的解决方案. 单线 写一个高度为1px的线,然后通过transform:scaleY(0.5)缩放来实现 1 div{ 2 height:1px; 3 background:#ddd; 4 -webkit-transform: scaleY(0.5); 5 -webkit-transform-origin:0 0; 6 overflow: hidden; 7 } 边框+圆角 和