如何解决移动端 像素比1像素

来源：蜘蛛抓取(WebSpider) 时间：2018-07-11 01:02 标签： 移动端一像素边框
手机端一像素解决办法_HTML/CSS
作者：用户
.border-1px {
position: }.border-1px:after{
content: '';
bottom: 0;
width: 100%;
border-top: 1px solid #}//判断设别像素@media...
.border-1px {
position: }.border-1px:after{
content: '';
bottom: 0;
width: 100%;
border-top: 1px solid #}//判断设别像素@media(-webikit-min-device-pixel-ratio:1.5)，(min-device-pixel-ratio:1.5) {
.border-1px {
&::after {
-webikit-transfrom: scaleY(0.7);
transfrom: scaleY(0.7);
}}@media(-webikit-min-device-pixel-ratio:2)，(min-device-pixel-ratio:2) {
.border-1px {
&::after {
-webikit-transfrom: scaleY(0.5);
transfrom: scaleY(0.5);
以上是互联网用户为您的的内容，在阿里云内部有更多的关于手机端一像素解决办法_HTML/CSS的内容，欢迎继续使用右上角搜索按钮进行搜索解决、办法、手机、像素、端一、以便于您获取更多的相关信息。
本文内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：zixun-group@service.aliyun.com 进行举报，并提供相关证据，工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
若您要投稿，删除文章请联系邮箱：zixun-group@service.aliyun.com
工作人员会在5个工作日内回复
html教程栏目为您免费提供
相关信息，包括
的信息 ，所有
相关内容均不代表阿里云的意见！投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员5个工作日内回复。移动端（手机）上1像素px边框的实现方法_萌妹子拯救不开心_新浪博客
移动端（手机）上1像素px边框的实现方法
移动端（手机）上1像素px边框的实现方法，这里只是列出一种，自认为比较合理的方法，有其他NB的移动端（手机）上1像素px边框的实现方法您可以分享出来
1像素边框，在2倍屏幕上为2“占位”，3倍屏上为3“占位”，但设计师就要1“占位”
.content h1:after,
.content h2:after {
& & border-top: 1px
& & content: '
& & display:
& & width:
& & position:
& & left: 0;
& & bottom:
-webkit-transform-origin:
@media only screen and
(-webkit-min-device-pixel-ratio:2.0),
only screen and (min--moz-device-pixel-ratio:
only screen and (-o-min-device-pixel-ratio:
only screen and (min-device-pixel-ratio: 2.0) {
& & .content
& & .content h2:after
& -webkit-transform: scaleY(0.5);
& transform: scaleY(0.5);
@media only screen and
(-webkit-min-device-pixel-ratio:2.5),
only screen and (min--moz-device-pixel-ratio:
only screen and (-o-min-device-pixel-ratio:
only screen and (min-device-pixel-ratio: 2.5) {
& & .content
& & .content h2:after
& -webkit-transform:scaleY(0.);
& transform: scaleY(0.);
博客等级：
博客积分：0
博客访问：2,349
关注人气：0
荣誉徽章：由于分辨率的差异，高清手机屏上的 1px实际上是由 2×2 个像素点来渲染，有的屏幕如iPhone6s plus甚至用到了 3×3 个像素点
所以 border: 1px 在移动端会渲染为 2px 的边框甚至3px的边框
虽然用户在实际使用的时候，很难发现这 1px 的差异，但是设计师往往会在这 1px 上较劲，这就产生了经典的 “一像素问题”
这里先对比一下不同方法做出来的边框效果如何 :&
很明显可以看到最后一个边框比前面的两个边框都细,但是这种办法的边框并不是真正的 border，而是高度或者宽度为 1px 的块状模型，重点是这种办法不能做出圆角，一般都用来画分割线或者单个边框
&!DOCTYPE html&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"&
&title&一像素问题&/title&
margin: 0;
font-size: 20px;
padding: 1rem;
.wrap div {
margin: 1rem;
.wrapper1 {
border: 1px solid #000000;
.wrapper2 {
border: 0.05rem solid #000000;
.wrapper3{
position: relative;
border-top: none !important;
.wrapper3::after {
content: " ";
position: absolute;
bottom: 0;
width: 100%;
height: 1px;
background-color: #000;
-webkit-transform-origin: left bottom;
transform-origin: left bottom;
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.wrapper3::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.wrapper3::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
&div class="wrap"&
&div class="wrapper1"&
这里是直接设置1px边框
&div class="wrapper2"&
这里是直接设置0.05rem边框
&div class="wrapper3"&
通过伪类创建边框,然后通过媒体查询来适配
还有一种方法就是通过 js 获取到设备像素比，然后动态添加 &meta& 标签(&网页的内容都渲染在 viewport 上，所以设备像素比的差异，直接影响的也是 viewport 的大小 ):
(function() {
var scale = 1.0;
if (window.devicePixelRatio === 2) {
scale *= 0.5;
if (window.devicePixelRatio === 3) {
scale *= 0.333333;
var text = '&meta name="viewport" content="initial-scale=' + scale + ', maximum-scale=' + scale +', minimum-scale=' + scale + ', width=device-width, user-scalable=no" /&';
document.write(text);
这种方法多用于媒体查询,也就是在设置页面的时候分2倍图或者3倍图来做(这样的话所有内容都要根据像素比来设置切图)最后看到一个没试过的方法,就是设置border-width:
阅读(...) 评论()

我要回帖

更多关于 移动端一像素边框 的文章

 

随机推荐