解决移动端上1px的问题

一、伪类 + transform

基于 media查询判断不同的设备像素比对线条进行缩放:

.border_1px:before{
     content: ‘‘;
     position: absolute;
     top: 0;
     height: 1px;
     width: 100%;
     background-color: #000;
     transform-origin: 50% 0%;
}

@media only screen and (-webkit-min-device-pixel-ratio:2){
     .border_1px:before{
            transform: scaleY(0.5);
     }
}

@media only screen and (-webkit-min-device-pixel-ratio:3){
      .border_1px:before{
            transform: scaleY(0.33);
      }
}

这种方式可以满足各种场景,如果需要满足圆角,只需要给伪类也加上 border-radius即可。

二、SVG

借助 PostCSSpostcss-write-svg我们能直接使用 border-imagebackground-image创建 svg1px边框:

@svg border_1px {
  height: 2px;
  @rect {
    fill: var(--color, black);
    width: 100%;
    height: 50%;
    }
  }

.example {
 border: 1px solid transparent;
 border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch;
}

这种方案基本可以满足所有场景,而且不需要外部引入。

原文地址:https://www.cnblogs.com/PYiP/p/11750947.html

时间: 2024-10-07 03:31:29

解决移动端上1px的问题的相关文章

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

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

[移动端]移动端上遇到的各种坑与相对解决方式

mobileHack 这里收集了很多移动端上遇到的各种坑与相对解决方式 1.问题:手机端 click 事件会有大约 300ms 的延迟 原因:手机端事件 touchstart –> touchmove –> touchend or touchcancel –> click.由于在touch事件触发之后,浏览器要推断用户是否会做出双击屏幕的操作,所以会等待300ms来推断,再做出是否触发click事件的处理.所以就会有300ms的延迟 解决方法:使用touch事件来取代click事件.如

better-scroll 上拉加载,下拉刷新(解决移动端长页面卡顿)

一.Better Scroll 滚动原理 1.下图能直观的表示better-scroll的滚动原理 2.html设置 <div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> <!-- 这里可以放一些其它的 DOM,但不会影响滚动 --> </div> 3.js

[移动端]移动端上遇到的各种坑与相对解决方案

mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 1.问题:手机端 click 事件会有大约 300ms 的延迟 原因:手机端事件 touchstart –> touchmove –> touchend or touchcancel –> click,因为在touch事件触发之后,浏览器要判断用户是否会做出双击屏幕的操作,所以会等待300ms来判断,再做出是否触发click事件的处理,所以就会有300ms的延迟 解决方法:使用touch事件来代替click事件,如

数据采集之Web端上传文件到Hadoop HDFS

前言 最近在公司接到一个任务,是关于数据采集方面的. 需求主要有3个: 通过web端上传文件到HDFS; 通过日志采集的方式导入到HDFS; 将数据库DB的表数据导入到HDFS. 正好最近都有在这方面做知识储备.正所谓养兵千日,用兵一时啊.学习到的东西只有应用到真实的环境中才有意义不是么. 环境 这里只做模拟环境,而不是真实的线上环境,所以也很简单,如果要使用的话还需要优化优化. OS Debian 8.7 Hadoop 2.6.5 SpringBoot 1.5.1.RELEASE 说明一下,这

解决移动端页面滚动后不触发touchend事件

解决移动端页面滚动后不触发touchend事件 问题 在移动端页面进行优化时,一般使用touch事件替代鼠标相关事件.用的较多的是使用touchend事件替代PC端的click和mouseup事件. 可是,touchend事件在页面滚动时有个问题.在滚动完毕后,假设当前触点的位置所指的元素绑定了touchend事件,这时便会触发该元素的touchend事件,造成误操作. 解决方法 解决方法非常easy.就是在页面滚动时停止touchend事件冒泡.这样就能够防止触发touchend事件. 用法

fastclick.js解决移动端(ipad)点击事件反应慢问题

参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 上班做项目的时候碰到一个移动端项目,其中有个小游戏,相当于天上掉馅饼,用户需要点击馅饼获得.游戏做好之后在pc端测试是没问题的,安卓手机上测试也是没问题的,但是部分苹果手机就出现了问题,用户点击馅饼没有反应. 后来调试的时候,我让这些馅饼静止在屏幕上,这些苹果手机用户就可以点击了.才发现是因为点击

ios系统 竖屏拍照 canvas处理后 图片旋转(利用exif.js解决ios手机上传竖拍照片旋转90度问题)

转:https://www.cnblogs.com/lovelgx/articles/8656615.html ---恢复内容开始--- 问题:html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 解决方法:利用exif.js解决ios手机上传竖拍照片旋转90度问题 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正. 利用exif.js读取照片的拍摄信息,详见 htt

给自己端上一杯热咖啡

昨天下午到今天下午,我一直在做一件事情,那就是照着考纲复习考试内容.我要考的是上海市java二级.这一次我选择了, 从后往前复习.难点和重点往往都在考纲的后面.这些被列出来的考纲,没有什么我不熟悉的知识点.但是总有那种提笔忘字的感觉! 不精通才是我学习每门语言的不足之处. 无疑,我的大多数不足都被放大了.可是这次,我再也没有感觉到从前考试的无所适从.相反,我十分冷静.只要是碰到自己熟悉的 知识点,我都会全力再次理解,对需要敲的代码,我耐心地敲上去.自我检测真是个极好的办法,通过这个你能深刻认识到