美文网首页
移动端1px边框问题的解决方案

移动端1px边框问题的解决方案

作者: 有希望的活着 | 来源:发表于2020-05-17 16:50 被阅读0次

使用小数写px值 通过媒体查询判断设备的像素比 DRP 根据不同像素比写不同的边框大小

.border{border:1pxsolid#ccc}@mediascreenand(-webkit-min-device-pixel-ratio:2) {    .border{border:0.5pxsolid#ccc}}@mediascreenand(-webkit-min-device-pixel-ratio:3) {    .border{border:0.333333pxsolid#ccc}}

使用边框图片

这样的1张6X6的图片, 9宫格等分填充border-image, 这样元素的4个边框宽度都只有1px

@mediascreenand(-webkit-min-device-pixel-ratio:2){    .border{border:1pxsolid transparent;border-image:url(border.gif)2repeat;    }}

使用CSS3 box-shadow

.shadow{-webkit-box-shadow:01px1px-1pxrgba(255,0,0,0.5);box-shadow:01px1px-1pxrgba(255,0,0,0.5);}

viewport结合rem (推荐使用)

//devicePixelRatio=2设置meta<metaname="viewport"content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">//devicePixelRatio=3设置meta<metaname="viewport"content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

使用 :before , :after 与 transform(推荐使用)

//第一种方法//构建1个伪元素,将它的长宽放大到2倍,边框宽度设置为1px,再以transform缩放到50%.radius-border{position: relative;}@mediascreenand(-webkit-min-device-pixel-ratio:2){    .radius-border:before{content:"";pointer-events: none;/* 防止点击触发 */box-sizing: border-box;position: absolute;width:200%;height:200%;left:0;top:0;border-radius:8px;border:1pxsolid#999;-webkit-transform(scale(0.5));-webkit-transform-origin: 0 0;transform(scale(0.5));transform-origin: 0 0;    }}@mediascreenand(-webkit-min-device-pixel-ratio:3) {    .radius-border:before{content:"";pointer-events: none;/* 防止点击触发 */box-sizing: border-box;position: absolute;width:200%;height:200%;left:0;top:0;border-radius:8px;border:1pxsolid#999;-webkit-transform(scale(0.3333));-webkit-transform-origin: 0 0;transform(scale(0.3333));transform-origin: 0 0;    }}

相关文章

  • 移动端适配及1px边框问题

    1、移动端适配 2、1px边框问题

  • 前端遇到的那些技术难点及性能优化之css篇

    移动端兼容 css篇 移动端的 1px 问题描述:1px 的边框。在高清屏下,移动端的 1px 会很粗。 产生原因...

  • 移动端1像素边框问题

    移动端1像素边框问题: 设置一个div的底部边框为 1px solid #000; 实际表现却是边框线是模糊的,或...

  • 1px

    CSS中1px分割线处理移动web开发之像素和DPR详解7种方法解决移动端Retina屏幕1px边框问题IOS基础...

  • 1px边框问题

    问题:ui设计稿中边框为1px,在实际的前端开发,移动端设备中会出现设置border:1px solid #000...

  • vue慕课网去哪儿实战项目笔记

    1.移动端解决1px边框问题,使用border.css;https://www.cnblogs.com/jy136...

  • web前端面试题

    1 移动端适配1px的问题 构建1个伪元素, 将它的长宽放大到2倍, 边框宽度设置为1px, 再以transfor...

  • 移动端1px边框问题

    造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像...

  • 移动端1px边框问题

    解决方案一 使用rem为单位。 使用js获取dpr值动态计算视口缩放,设置viewport content属性。 ...

  • 移动端1px边框问题

    自己开发出的边框粗于设计师给定的宽度吗?设计师验收通过不过吗?如果你也遇到看看解决办法吧。 解决方法一:伪类+tr...

网友评论

      本文标题:移动端1px边框问题的解决方案

      本文链接:https://www.haomeiwen.com/subject/ftysohtx.html