<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>像素为1px</title>
<style type="text/css">
.border {
position: relative;
margin-bottom: 20px;
}
.border:after {
content: '';
display: block;
position: absolute;
width: 100%;
left: 0px;
bottom: 0px;
height: 1px;
background-color: red;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
.border3 {
width: 100%;
height: 40px;
border: 1px solid red;
margin-bottom: 20px;
}
.border2 {
margin: 50px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(.5, transparent), color-stop(.5, #ccc), to(#ccc)) left bottom repeat-x;
background-size: 100% 1px;
}
</style>
</head>
<body>
<div class="border">像素为1px解决方法一</div>
<div class="border2">像素为1px解决方法二</div>
<div class="border3">像素为1px解决方法二</div>
</body>
</html>移动端1px
2016-03-25
1568
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
目录
相关文章
|
小程序
JavaScript
|
8月前
|
前端开发
解决适配375像素宽度667像素高度移动端方法：推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
解决适配375像素宽度667像素高度移动端方法：推荐一款非常好用的px转rem单位的VSCode插件px to rem & rpx (cssrem)
241
0
0
|
5月前
|
JavaScript
|
前端开发
JavaScript
|
8月前
|
前端开发
|
前端开发
|
前端开发
JavaScript
Android开发
|
前端开发
iOS开发
Android开发
移动端 Retina屏border实现0.5px
首先来看一下造成Retina边框变粗的原因
其实这个原因很简单，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。
1607
0
0