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的痛点, 有很多库或者方法都可以解决, ...
随机推荐
- Android Notification状态栏通知
没有添加额外的震动及声音效果,这里直接实现了通知的功能,看效果吧: MainActivity.java package com.example.notification; import android ...
- Android - Error: "java.io.IOException: setDataSource failed.: status=0x80000000"
Error: "java.io.IOException: setDataSource failed.: status=0x80000000" 本文地址: http://blog.c ...
- 修改android系统开机动画
本文转载自:http://blog.csdn.net/u012301841/article/details/51598115 修改android系统开机动画
- CodeForces - 743D Chloe and pleasant prizes
Chloe and pleasant prizes time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- Codeforces--596A--Wilbur and Swimming Pool(数学)
A - Wilbur and Swimming Pool Crawling in process... Crawling failed Time Limit:1000MS Memory ...
- centos7 二次封装定制
- PCB MS SQL表值函数与CLR 表值函数 (例:字符串分割转表)
将字符串分割为表表经常用到,这里 SQL表值函数与CLR 表值函数,两种实现方法例出来如下: SELECT * FROM FP_EMSDB_PUB.dbo.SqlSplit('/','1oz/1.5 ...
- go 条件语句if
一.if 语句 格式 if condition { // do something } 举例 package main import "fmt" func main(){ var ...
- C# 获取当月有多少天
int days = DateTime.DaysInMonth ( 2009, 9 ); int days = DateTime.DaysInMonth ( DateTime.Now.Year, Da ...
- 海量数据统计topK
有一个1G大小的一个文件,里面每一行是一个词,词的大小不超过16字节,内存限制大小是1M.返回频数最高的100个词. 思路: 把这1G的数据一次性全部读入内存是不可能了,可以每次读一行,然后将该词存到 ...