手机1像素线粗_关于移动端一像素线的解决方案

为什么会有一像素线这个问题

因为移动端布局我们大家都知道根据不同的手机会有不同的dpr 例如 爱疯6plus就是3  爱疯6就是2 当我们定义1px的时候就会在不同手机里面显示不同的粗细长度,dpr为3的时候就是3px,dpr为2的时候就是2px,具体dpr是什么意思不知道的朋友可以去百度一下。所以这个时候我们就需要解决这个1px像素线的问题

解决办法

1、yo3框架的解决办法

通过yarn add yo3  / npm install yo3 来载入 yo3模块   PS:https://www.npmjs.com/package/yo3 不懂的同学可以去看官方文档

然后再需要的地方引入@include border(border-weight[border-color,boder-style,border-radio])就可以完美解决一像素线的问题

但是这样引入需要有解析sass的工具,如果不想用sass的同学可以看下面第二种办法

2、stylus解决办法

border($border-width = 1px, $border-color = #ccc, $border-style = solid, $radius = 0)

// 为边框位置提供定位参考

position: relative;

if $border-width == null

$border-width: 0;

border-radius: $radius;

&::after

// 用以解决边框layer遮盖内容

pointer-events: none;

position: absolute;

z-index: 999;

top: 0;

left: 0;

// fix当元素宽度出现小数时,边框可能显示不全的问题

// overflow: hidden;

content: "\0020";

border-color: $border-color;

border-style: $border-style;

border-width: $border-width;

// 适配dpr进行缩放

@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx)

width: 100%;

height: 100%;

if $radius != null {

border-radius: $radius;

}

@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49),(min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49),(min-resolution: 144dpi) and (max-resolution: 239dpi),(min-resolution: 1.5dppx) and (max-resolution: 2.49dppx)

width: 200%;

height: 200%;

transform: scale(.5)

if $radius != null {

border-radius: $radius * 2;

}

@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5),(min-device-pixel-ratio: 2.5), (min-resolution: 240dpi),(min-resolution: 2.5dppx)

width: 300%;

height: 300%;

transform: scale(.33333)

if $radius != null {

border-radius: $radius * 3;

}

transform-origin: 0 0;

原理其实都差不多就是通过判断设备的dpr然后来缩放对应的比例,这样就能达到在任何dpr下都能保持一像素线的问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/504111.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

20天掌握C语言,C语言零基础到项目实战,玩转C语言

一般来说,和其他编程语言相比,C/C语言学起来会比较累,如果想达到项目开发的状态,更是需要花费很长时间的努力。那么,如何才能更好地把所学知识用到实际工作中去呢?今天小编就带大家来看看学习C/C语言到什么…

32岁了学python来的及吗_现在27岁学python来得及吗?

答案是肯定的,27岁学习Python语言是来得及的。 学习Python语言是当前一个比较好的选择,原因有以下几点: 第一,Python语言有健全的生态。Python语言虽然在最近几年被广泛关注,但是Python语言并不是一个新出现的语言&…

怎样快速画出一个正方体_小学数学非常有效的“画图”解题法,快速解题的“金钥匙”...

小学阶段的数学主要培养的是孩子的逻辑思维能力,是从形象思维逐步过度到抽象思维的过程,如果在小学阶段没有将基础打牢,那么等孩子上初中后面对更复杂的学习内容,就会变得更吃力。在小学数学中,“画图”是帮助孩子建立…

零基础入门C语言,只需2小时轻松学会!

学好C语言的秘诀就是1234:“一字真言,两种态度,三个框架,四项注意”。 如有小伙伴想自学,可以进群731871503进行交流 学习,提升编程,共同进步 一、一字真言 各位看官,学好C语言&a…

python调用百度地图画轨迹图_[宜配屋]听图阁

如题,先上效果图:主要分为两大步骤 使用python语句,通过百度地图API,对已知的地名抓取经纬度 使用百度地图API官网的html例程,修改数据部分,实现呈现效果 一、使用python语句,通过百度地图API&a…

select 移动端 第一个无法选中_总结在移动端碰到的坑

一、安卓设备的select options的坑,尽量使用各浏览器内核都支持的api在添加 OPTION 元素时如果需要向指定索引前插入 OPTION,可以使用 options.add(option, index);如果需要向 SELECT 尾部添加 OPTION,可以使用 options.add(optio…

零基础初学c语言常见的10个错误

时光匆匆,新的学年又即将要来临。很多有意愿报我们学院的准学弟学妹们,都开始提前学习c语言这门功课。 如有小伙伴想自学,可以进群731871503进行交流学习,提升编程,共同进步 但是很多学弟学妹们之前都没有学习过太多相…

centos7安装yum_centos7下yum方式安装jenkins

一、首先安装java组件1、可以直接yum安装yum install -y java2、或者下载jdk的包,设置环境变量也是可以的https://download.oracle.com/otn/java/jdk/11.0.510/e51269e04165492b90fa15af5b4eb1a5/jdk-11.0.5_linux-x64_bin.tar.gz?AuthParam1578369202_107ade17483…

感知器及其在python中的实现_(二)感知器算法及其python实现

出发点一旦判别函数的形式确定下来,不管它是线性的还是非线性的,剩下的问题就是如何确定它的系数。在模式识别中,系数确定的一个主要方法就是通过对已知样本的训练和学习来得到。感知器算法就是通过训练样本模式的迭代和学习,产生…

原来C语言和其他高级语言的最大的区别是这个...

我们知道C语言和其他高级语言,最大的区别就是C语言是要操作内存。 如有小伙伴想自学,可以进群731871503进行交流 学习,提升编程,共同进步 我们需要知道——变量,其实是内存地址的一个抽像名字罢了。在静态编译的程序中&#xff…

python爬虫登录网站_python爬虫19 | 遇到需要的登录的网站怎么办?用这3招轻松搞定!...

你好 由于你是游客 无法查看本文 请你登录再进 谢谢合作当你在爬某些网站的时候 需要你登录才可以获取数据 咋整? 莫慌 小帅b把这几招传授给你 让你以后从容应对那么 接下来就是登录的常见方法无非是这两种 1、让你输入帐号和密码登录2、让你输入帐号密码验证码登录…

ei会议论文录用但不参加会议_美国研究生和博士申请论文发表真的很重要吗?...

在美国研究生和博士申请的过程中,论文可以直观体现申请者研究经历,一篇高质量的论文能够让美国招生官能够快速了解到申请者对所申请专业的理解,同时能够通过文章论述直观感受到申请者的学术思维力、判断力、逻辑分析能力等,这是简…

干货 | 大牛谈嵌入式C语言的高级用法

C语言程序设计是我们的专业基础课,但是C语言本身却是一个非常强大的工具,它是到目前为止最为广泛使用的工具,并且在可以预见的将来,它仍然是皈依为程序员的人们心中的神器。这个工具作什么的呢?它在人和机器之间建立了…

python提示对话框自动关闭_Python - tkinter:打开和关闭对话框窗口

我是Python新手,必须编写一个简单的GUI程序,为了简单起见,我选择在tkinter中这样做。 我想要的GUI应该非常类似于在Windows上安装程序时经常遇到的对话框(您想要安装的位置,您想要的模块等)。基本上当它在p…

第六篇:如何学习C语言?

现在很多人初学者直接选择C语言的人已经变得越来越少了,主要原因还是在招聘岗位数量上无法和java,php等高级语言想媲美,但并不代表C语言已经穷途末路没有前景了,C语言的角色从前台变成了后台服务,在一些关键领域还承担…

long mode 分页_x86 系列 CPU 内存寻址模式总结

说明:S16 表示 16 位段寄存器P16 表示 16 位的普通寄存器, 立即数, 结果为 16 位的表达式等等.P32 同上, 只是扩展到 32 位.一. CPU 概况1. 8086: 8 位数据线, 16 位地址线. 8 位数据线和前8位地址线合用.2. 8088: 16位数据线, 16位地址线. 数据线和地址线完全分时合用.3. 8018…

典型相关分析_2020-2025年中国海水淡化行业发展前景与投资预测分析报告

《2020-2025年中国海水淡化行业发展前景与投资预测分析报告》利用中经未来长期对海水淡化市场跟踪搜集的一手数据,从行业的高度全面而准确的构建分析体系。报告主要分析了海水淡化行业的发展概况、海水淡化行业的发展环境、国外海水淡化行业发展经验借鉴、中国海水淡…

语言还是你不得不服的大哥级别编程语言!

直到今天,有人在喊C语言过时的语言,还有什么值得学习的,现在看Python,PHP等语言现在都很容易用,谁还在学习老C语言,其实这是真的吗?作者下载了两种语言的源代码作为下载器。由于空间的限制&…

字节跳动测试开发4轮面试_字节跳动测试开发工程师一面总结

公司简介:字节跳动是全球发展速度最快的科技公司之一,公司旗下拥有今日头条、抖音、西瓜视频、懂车帝、Faceu激萌、轻颜相机、飞书、皮皮虾、TikTok等多款海内外产品,全系产品月活用户超过15亿。目前还在积极探索游戏、教育、金融领域。字节跳动办公室遍…

python爬虫好学不_python爬虫好学吗

python爬虫难学吗 简单来说互联网是由一个个站点和网络设备组成的大网,我们通过浏览器访问站点,站点把HTML、JS、CSS代码返回给浏览器,这些代码经过浏览器解析、渲染,将丰富多彩的网页呈现我们眼前。爬虫是什么? 如果我…