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的痛点, 有很多库或者方法都可以解决, ...
随机推荐
- Mac下查看文件编码方式
一句话:file -I {filename}
- POJ 3344 & HDU 2414 Chessboard Dance(模拟)
题目链接: PKU:http://poj.org/problem? id=3344 HDU:http://acm.hdu.edu.cn/showproblem.php?pid=2414 Descrip ...
- Lightoj 1235 - Coin Change (IV) 【二分】
题目链接:http://www.lightoj.com/volume_showproblem.php?problem=1235 题意: 有N个硬币(N<=18).问是否能在每一个硬币使用不超过两 ...
- CSS学习(十四)-CSS颜色之中的一个
一.理论: 1.RGB色彩模式 a.CMYK色彩模式 b.索引色彩模式 (主要用于web) c.灰度模式 d.双色调模式 2.opacity: a.alphavalue:透明度 b.inheri ...
- 【.NET】C#中遍历各类数据集合的方法
[.NET]C#中遍历各类数据集合的方法 C#中遍历各类数据集合的方法,这里自己做下总结: 1.枚举类型 //遍历枚举类型Sample的各个枚举名称 ...
- [Apple开发者帐户帮助]四、管理密钥(3)撤消,编辑和下载密钥
创建密钥后,您可以撤消,编辑或下载密钥.您只能下载一次密钥.私钥在iOS,tvOS和watchOS上的应用程序之间共享. 所需角色:帐户持有人或管理员. 撤销密钥 如果撤消密钥,它将变为无效并影响使用 ...
- POJ 1118 求平面上最多x点共线
题意:给你n个点的坐标.求一条直线最多能穿过多少个点. 思路:枚举(n^2)+求斜率+排序 (复杂度n^2logn)大功告成 //By: Sirius_Ren #include <cmath&g ...
- 3.sql基础
sql语句是和dbms交谈专用的语句,不同dbms都认sql语法 sql语句中字符串用单引号 sql语句是大小写不敏感的,不敏感指的是sql关键字,字符串值还是大小写敏感的 创建表.删除表不仅可以手工 ...
- http接口 两种调用http接口的方法
import org.apache.commons.httpclient.HttpClient; import org.apache.commons.httpclient.NameValuePair; ...
- [hihocoder][Offer收割]编程练习赛59
替换函数 #pragma comment(linker, "/STACK:102400000,102400000") #include<stdio.h> #includ ...