手机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下都能保持一像素线的问题。
手机1像素线粗_关于移动端一像素线的解决方案相关推荐
- 手机1像素线粗_关于移动端开发 1px 线的一些理解和解决办法
(给前端大全加星标,提升前端技能) 作者: 大转转FE/李兴瑞 1px线变粗的原因 在做移动端项目时,常常是根据设计图设置元素节点的大小和样式,但是有时候根据设计图写出来的样式还是不如人意,虽然表面上 ...
- 一分钟学会看k线图_一分钟学会看k线图(12种阳线阴线图解)
第一,K线图是股票价格变化的表现形式 投资者关注一只股票,肯定是要了解这只股票过去一段时间的价格变化的,而K线图表现的就是股票价格的变化情况.所以K线图本质上是方便投资者了解股票价格变化的一种工具. ...
- fr4走线宽度_如何调整PCB中走线宽度的大小
铜是一种具有高熔点的强导体,但您仍应尽力保持低温.在这里,您需要适当调整走线宽度的大小,以将温度保持在一定范围内.但是,这是您需要考虑给定走线中流动的电流的地方.当使用电源轨,高压组件以及电路板的其他 ...
- 手机1像素线粗_豪威推出4800万像素手机传感器:1/2大底
索尼.三星去年底分别推出了4800万像素的手机CIS图像传感器IMX586.GM1,将智能手机的像素大战推向新高度,IMX586.GM1也成为今年各大厂商旗舰级智能手机的标配了. 索尼.三星是CIS领 ...
- 手机1像素线粗_小米1亿像素手机配置全曝光:史上最炫酷呼吸灯!
小米官方已经定于11月5日发布首款1亿像素拍照手机--小米CC9 Pro. 据悉,小米CC9 Pro采用了一亿像素五摄四闪全焦段的配置,支持双光学防抖.10倍混合光学变焦.50倍数字变焦,拍照对标友商 ...
- 脉歌蓝牙耳机线评测_脉歌 TE-40 蓝牙耳机“升级线”体验
脉歌 TE-40 蓝牙耳机"升级线"体验 2019-01-17 16:30:43 0点赞 1收藏 2评论 购买理由 自从体验过蓝牙耳机带来的便利后就几乎很少用有线耳机了,手上的IM ...
- ccxt k线数据_寻找相似的历史k线
有网友提问应该用什么样的数据库/数据结构/算法来计算某支股票的相似K线? 具体的问题描述是,假设给出某股某段行情K线(单位/日),从任何其他股票历史中匹配出与之最为相似的某段历史K线,并给出相似度值( ...
- python移动平均线绘图_对python pandas 画移动平均线的方法详解
数据文件 66001_.txt 内容格式: date,jz0,jz1,jz2,jz3,jz4,jz5 2012-12-28,0.9326,0.8835,1.0289,1.0027,1.1067,1.0 ...
- javalibrary 线上_《NBA2K21》MT模式线上3V3任务一览 :: 游民星空 GamerSky.com
<NBA2K21>MT模式中玩家们将会与其他玩家进行3V3的对抗,目前也公布了3V3的部分任务,下面请看玩家"Totti"分享的<NBA2K21>MT模式线 ...
最新文章
- 微信小程序从oracle取数,微信小程序 取随机数
- python之禅中文-python之禅-----我最喜欢的翻译版
- ERP中的合并会计报表
- 51nod 1344 走格子【贪心/前缀和】
- HDLBits答案(6)_硬件模块设计的思考方式
- 微抖动,繁忙的等待和绑定CPU
- python类型提示模块包_Python checktypes包_程序模块 - PyPI - Python中文网
- UGUI 与 Spine 的完美结合
- 代码中,对象类与管理类要分开
- Unity3D研究院之Prefab里面的Prefab关联问题
- [2018.10.17 T1] 斜率
- 调用DB2存储过程出现错误
- java jsessionid 会话_jsessionid 对JAVA WEB jsessionid的剖析
- 黑马程序员_银行调度系统
- LPDDR4的ZQ 校准
- Channel is reciprocal
- Mac 上如何使用burpsuite(以谷歌浏览器为例)
- 搜索及代码在GitHub上查重小技巧
- EnvironmentNotWritableError:The current user does not have write permissions to the target...
- E.03.17 Lou Ottens, Father of Countless ==Mixtapes==, Is Dead at 94
热门文章
- 使用JDBC进行简单连接
- socket模拟http的登陆_python模拟登陆知乎(最新版)
- IAR STM32工程报错Error[Pe020]: identifier “GPIO_Pin_0”is undefined D:\STM32F103_Demo\App\main.c
- MAC OS 命令行使用详解
- Guava入门~CharMatcher
- Java测试驱动开发--总结
- Struts2源码阅读(六)_ActionProxyActionInvocation
- mysql数据库进行更新、插入显示中文乱码问题
- 改进初学者的PID-初始化
- Modbus协议栈实现Modbus RTU多主站支持