专栏首页grain先森前端-移动端1px问题的解决办法

前端-移动端1px问题的解决办法

原因

由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px,所以在高清瓶下看着1px总是感觉变胖了

解决方法

一.在ios8+中当devicePixelRatio=2的时候使用0.5px

p{

    border:1px solid #000;

}

@media (-webkit-min-device-pixel-ratio: 2) {

     p{

         border:0.5px solid #000;

     }

}

二,伪类 + transform 实现

对于老项目伪类+transform是比较完美的方法了。

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

单条border样式设置:

.scale-1px{ position: relative; border:none; }

.scale-1px:after{

    content: '';

    position: absolute; bottom: 0;

    background: #000;

    width: 100%; height: 1px;

    -webkit-transform: scaleY(0.5);

    transform: scaleY(0.5);

     -webkit-transform-origin: 0 0;

    transform-origin: 0 0; 

}

优点:所有场景都能满足,支持圆角(伪类和本体类都需要加border-radius)

缺点:对于已经使用伪类的元素(例如clearfix),可能需要多层嵌套

三,viewport + rem 实现

这种兼容方案相对比较完美,适合新的项目,老的项目修改成本过大。

在devicePixelRatio = 2 时,输出viewport:

在devicePixelRatio = 3 时,输出viewport:

优点:所有场景都能满足,一套代码,可以兼容基本所有布局

缺点:老项目修改代价过大,只适用于新项目

四,使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果

样式设置:

.box-shadow-1px {

box-shadow: inset 0px -1px 1px -1px #c8c7cc;

}

优点:代码量少,可以满足所有场景

缺点:边框有阴影,颜色变浅

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • [CSS] 用伪元素:after实现分割线和气泡

    在网页设计中显示分割线可以使用元素的border单边显示即可,但是这种方法会增大元素的长度或者宽度,在元素需要精细计算以便达到布局效果的情况下,添加border...

    山河木马
  • Chorme浏览器渲染MathJax时出现竖线的解决方法

    新版的Chorme浏览器在解析css时,会对其中的值进行向上取整(四舍五入),而其他浏览器不会,且Chrome较旧版本(比如Chrome 40 稳定版)也是不会...

    Enjoy233
  • css3怎么实现高度从固定到自动的过渡动画?

    当然有很多trick,比如设置max-height的动画(从固定值到一个肯定比auto大的值),或者更复杂的(引入脚本算computed value)方式。

    山河木马
  • Html和CSS布局技巧(转)

    水平居中的页面布局中最为常见的一种布局形式,多出现于标题,以及内容区域的组织形式,下面介绍四种实现水平居中的方法(注:下面各个实例中实现的是child元素的对齐...

    山河木马
  • HTML5中判断横屏竖屏

    在移动端中我们经常碰到横屏竖屏的问题,那么我们应该如何去判断或者针对横屏、竖屏来写不同的代码呢。 首先在head中加入如下代码:

    山河木马
  • css模糊匹配

    CSS2支持的属性选择器用一个表达式[{属性 | 属性 {= | |= | ~=} 值}]

    山河木马
  • 目前可用的微博秀的嵌入方法大全(亲测2019年2月仍有效)

    对于微博第5版(weibo v5),其相应的微博组件的网址为: https://open.weibo.com/widgets , 及其具体使用方法为: 微博秀...

    Enjoy233
  • 前端小白也能快速学会的博客园博客美化全攻略[附源码]

    官方介绍: 博客皮肤模板 http://skintemplate.cnblogs.com/

    Enjoy233
  • CSS控制文字,超出部分显示省略号

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

    山河木马
  • 推荐css自动排序插件csscomb

    1.位置属性(position, top, right, z-index, display, float等) 2.大小(width, height, padd...

    zhaoolee

扫码关注云+社区

领取腾讯云代金券