移动端的1px边框问题

最近在做一个移动端项目,涉及到1像素问题

其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别。物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取,具体的比例差距由设备决定

如何解决这个问题才是重点,下面集中提出解决方案:

1.媒体查询利用设备像素比缩放,设置小数像素

css可以写成这样:
.border{border:1px solid #999}

    @media screen add(-webkit-min-device-pixel-radio:2) {
        .border{border 0.5px solid #999}
    }
     @media screen add(-webkit-min-device-pixel-radio:3) {
        .border{border 0.33333px solid #999}
    }//具体的边框值按照比例计算即可

2.使用box-shadow模拟边框

利用css对阴影处理的方式实现0.5px的效果
.box{
box-shadow: 0px 1px 1px -1px black;}

复习下box-shadow属性的用法:

box-shadow: h-shadow v-shadow blur spread color inset;
描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。
color 可选。阴影的颜色。请参阅 CSS 颜色值。
inset 可选。将外部阴影 (outset) 改为内部阴影。

3.利用viewport+rem

同时设置对应viewport的rem基准值

在devicePixelRatio=2时,输出viewport:

<meta name="viewport" content="initial-scale=0.5 maximum-scale=0.5 minimum-scale=0.5,user-scalable=no>

利用js修改动态修改:

var viewport=document.querySelector("meta[name=viewport")//返回文档中匹配指定 CSS 选择器的一个元素。
if(window.devicePixelRatio==1){
    viewport.setAttribute(‘content‘,‘width=device-width‘,‘initial-scale=1,maximum-scale=1,minimum-scale=1,user-scale=no‘)
}
if(window.devicePixelRatio==2){
    viewport.setAttribute(‘content‘,‘width=device-width‘,‘initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scale=no‘)
}
if(window.devicePixelRatio==3){
    viewport.setAttribute(‘content‘,‘width=device-width‘,‘initial-scale=0.3333,maximum-scale=0.3333,minimum-scale=0.3333,user-scale=no‘)
}
var element=document.documentElementvar fontsize=10*(element.clientWidth/320)+‘px‘;element.style.fontSize=fontsize

4伪类+transform实现

先把原先元素的border去掉,然后利用:before或者:after重做border,并transform的scale缩小一半,原先的元素相对定位,新做的border绝对定位

  .box{
    position: relative;
    border: none;
  }
  .box:after{
    content: ‘‘;
    position: absolute;
    bottom: 0;
    left:0
    background: #000000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
  }

原文地址:https://www.cnblogs.com/yuan233/p/10328087.html

时间: 2024-10-13 22:40:02

移动端的1px边框问题的相关文章

7种方法解决移动端Retina屏幕1px边框问题

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

移动端视网膜(Retina)屏幕下1px边框线 解决方案

原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用如下的css: div{ border:1px solid #000; } @media (-webkit-min-device-pixel-ratio: 2) { div{ border:0.5px solid #000; } } 但在ios7以

移动端 1px边框 问题

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

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

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

mobile web retina 下 1px 边框解决方案

http://www.tuicool.com/articles/ZRv6bun 再谈mobile web retina 下 1px 边框解决方案 时间 2015-01-03 12:03:31  Hugo Web前端开发 原文  http://www.ghugo.com/css-retina-hairline/ 主题 WebKitiOSCSS 本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6

【H5开发基础】移动端1像素边框问题的解决方案

自从乔帮主提出retina屏以来.可练就了不少前端兄弟的像素眼,有强迫症的伙伴们日子可就煎熬了.为了画出真正的1像素边框,前端猿们也是受尽各浏览器的虐待了. 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 图1 图2 实现1PX边框的方法有很多,各有优缺点,比如通过背景图片实现.通过transform: scale(0.5)实现.本次实现的是通过VIEWPORT+rem实现的,优点是可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难.圆角阴影失效问题.缺点嘛,这方法适全新

1px 边框问题

出现1px边框的原因是:1px使用2dp渲染 IOS8支持0.5px;仅IOS8能用 解决办法sacleY(.5) 例子给li添加1px边框 1 li{ 2 position:relative; 3 color: #ccc; 4 } 5 6 li+li:before{ 7 position: absolute; 8 top: -1px; 9 left: 0; 10 width: 100%; 11 content: ''' 12 height: 1px; 13 border-top: 1px so

CSS设置1PX边框的Table表格

写页面布局时经常会遇到1PX边框的表格,对于罗列显示大量数据来说,table是非常合适的,table本身的意义就在于罗列显示数据,web标准化并非是指不去用table标签,而是说不用table去布局,table本身也是属于标准内的. 本身table设置border:0的话,边框其实是2px.如果想实现1PX边框,可以如下设置: table { border: 1px solid blue; border-width: 1px 0 0 1px; } td { border: 1px solid b

Retina真实还原1px边框的解决方案

射鸡师给你设计图是这样的! 然后你 boder:1px solid #ccc,然后到手机上一看,又粗又大,又长 然后,测试的妹子,受不了了-- 然后,你说是的啊-- 于是,你一张图片上去一看-- 确实,不对呀! <img src="img/bg.png" style="position: fixed;top:0;left: 0;width: 100%;z-index: 999;opacity: .5;"> 然后,怎么办了呢 第一:你想到的是: 设计图是7