stylus解决移动端1像素线等问题
引用了yo框架中的_border.scss(用来获取yo框架封装的border) 以及 variables.scss(用来获取媒体查询的规则)
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;
省略点ellipsis的解决方案(支持多行)
wrap($is-wrap = true)
if $is-wrap == true
word-wrap: break-word;
word-break: break-all;
else
white-space: nowrap; ellipsis($width = null, $line-clamp = 1)
overflow: hidden;
text-overflow: ellipsis;
width: $width;
if abs($line-clamp) > 1
// 要使得多行截取生效,display的值只能为-webkit-box
display: -webkit-box !important;
-webkit-line-clamp: $line-clamp;
flex-direction column
wrap()
else
wrap(false)
将上述代码放入styl文件中,就可以直接使用!
stylus解决移动端1像素线等问题的更多相关文章
- stylus解决移动端1像素边框的问题
首先 我是借用了yo框架的border和他的媒体查询组合 这两个分别是在yo>lib>core>classes>_border.scss(用来获取yo框架封装的border) ...
- 7种方法解决移动端Retina屏幕1px边框问题
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
- iOS的一像素线
文/stark_yang(简书作者)原文链接:http://www.jianshu.com/p/b83dca88ef73著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 时常总结以前学过 ...
- fastclick.js解决移动端(ipad)点击事件反应慢问题
参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...
- iOS开发——基础篇——iOS的一像素线
文/stark_yang(简书作者)原文链接:http://www.jianshu.com/p/b83dca88ef73著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 时常总结以前学过 ...
- 目前解决移动端1px边框最好的方法
在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...
- 【H5开发基础】移动端1像素边框问题的解决方案
自从乔帮主提出retina屏以来.可练就了不少前端兄弟的像素眼,有强迫症的伙伴们日子可就煎熬了.为了画出真正的1像素边框,前端猿们也是受尽各浏览器的虐待了. 关于什么是移动端1像素边框问题,先上两张图 ...
- 修改CKplayer.js 源码解决移动端浏览器全屏不能限制快进的问题
原文地址:https://www.cnblogs.com/jying/p/9642445.html,转载请说明出处. 最近项目需要播放视频且限制未观看部分的快进功能,找了两款js插件ckplayer和 ...
- touch-action 解决移动端300ms延迟问题
CSS3 新属性, touch-action: manipulation; 可以有效的解决移动端300ms延迟的问题 移动端300ms延迟问题一直都是h5APP的痛点, 有很多库或者方法都可以解决, ...
随机推荐
- BPMN使用工具
EA 非常多设计人员都在使用EA.他不仅支持UML,相同也全然支持BPMN2.0.<BPMN规范中的三种视图 >展示的BPMN中三种视图就是使用此工具所绘制. activitidesig ...
- 开发DataSnapserver
在上次的文章中讨论了怎样把传统的Delphi 主从架构应用程序逐渐转换为DataSnap JSONserver.在本篇文章中让我们正式讨论怎样使用Delphi XE开发DataSnap/REST ...
- hdu 1542(线段树+扫描线 求矩形相交面积)
Atlantis Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Su ...
- bzoj 1556 墓地秘密 —— 状压DP
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1556 预处理出两个障碍四个方向之间的距离(转弯次数),就可以状压DP了: 但预处理很麻烦.. ...
- Python 32 通信循环 连接循环 粘包问题
一:通信循环 二:连接循环 三:粘包问题
- go之map
一.概念 简述 1.map 是一种无序的键值对的集合.(类似于python的字典dict) 2.map 的key 与 value 都是有类型的,且定义阶段时就已经统一 定义方式 # 方式一 var m ...
- 【LOJ#10115,tyvj1473】校门外的树(第3次升级)
PS:思路来源于Clove_unique的博客,在此万分感谢 这道题可以用树状数组轻松过,然而...树状数组不太熟悉,还是用线段树比较好(虽然代码比较长) [思路分析] [一开始的思路] 最开始的错误 ...
- android切换卡顿解决方法
如果想要让应用用户流畅的滑动体验的话,那么就必须对activity和fragment的生命周期有一个完整的概念以及在何种情况下会触发哪些事件. 在自己目前做的项目中,就遇到了这样的问题,那么就把自己的 ...
- Oracle 当输入参数允许为空时
场景: 有一个存储过程p_test 带有多个输入参数code.name.number p_test(code IN VARCHAR2,nameIN VARCHAR2,number IN VARCHAR ...
- Javascrpt核心概念(2)--操作符
学习操作符这个章节最好回忆一下C里的惯例,因为ECMAScript的标准很多继承自C的语法 一元操作符 只能操作一个值得操作符 递增和递减操作符 var age = 29; ++age; //30 v ...