当样式像素一定时,因手机有320px,640px等.各自的缩放比差异,所以设备显示像素就会有1Npx,2Npx.为保设计稿还原度,解决就是用media + scale.

// stylus语法
border-1px($color)
position:relative
&:after
content:''
display:block
position:absolute
left:0
bottom:0
width:100%
border:1px solid $color @media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
.border-1px
&::after
-webkit-transform:scaleY(0.7)
transform:scaleY(0.7) @media(-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2)
.border-1px
&::after
-webkit-transform:scaleY(0.5)
transform:scaleY(0.5)

border-1px的实现(stylus)的更多相关文章

  1. Stylus-富有表现力的、动态的、健壮的CSS

    今天总结一下Stylus记一些常用的也是最基本的用法 一.  选择器 Stylus是基于缩进的这让我们可以更快捷的编写css比如 body { margin:; paddind:; font-size ...

  2. Retina屏下1px border

    layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上 ...

  3. retina屏实现border边框1px

    .border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff33 ...

  4. border.css(解决移动端1px问题)

    由于某些机型分辨率过高,会导致1px变成2-多px像素的问题,引用bordercss解决 @charset "utf-8"; .border, .border-top, .bord ...

  5. 移动端1px的border

    移动端浏览器解决1px的底部border问题 1.使用border:1px solid #e0e0e0. 在不同设备下由于devicePixelRatio不同导致1px实际显示的长度不同.所以在移动端 ...

  6. 移动端 1px 像素边框问题的解决方案(Border.css)

    前言 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案 将以下代码放在border.css文件中,然后引入 常用className border:整个盒子都有边框 border-t ...

  7. 移动端比1px还小的border

    巧用border 在移动端 经常出现border,细边框但有的时候 产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border下面是代码 希望对大家有所帮助 .thinner-bord ...

  8. CSS预处器的对比——Sass、Less和Stylus

    预处器的对比--Sass.LESS和Stylus 转载: 英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less ...

  9. CSS预处理器Sass、LESS 和 Stylus

    CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...

  10. sass、less和stylus的安装使用和入门实践

    刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...

随机推荐

  1. Cubieboard搭建Hadoop指南

    1.刷固件 出厂的Cubieboard是Android系统,需要Linux系统安装Hadoop,到此网址下载: http://dl.cubieboard.org/software/a20-cubiet ...

  2. 为什么不建议用Table布局

    Tables的缺点 1.Table要比其它html标记占很多其它的字节.(延迟下载时间.占用server很多其它的流量资源.) 2.Tablle会阻挡浏览器渲染引擎的渲染顺序.(会延迟页面的生成速度, ...

  3. 西门子PLC学习笔记六-(Step7指令简单介绍)

    1.指令操作数 指令操作数由操作标示符和參数组成. 操作标识符由主标识符和辅标识符组成. 主标识符有:I(输入过程影像寄存器).Q(输出过程映像寄存器).M(位寄存器).PI(外部输入寄存器).PQ( ...

  4. router-link的a样式变成div样式元素属性

    <router-link tag="div" :to="itemChild.path"><span>{{itemChild.name}} ...

  5. HDU 1160 FatMouse&#39;s Speed(DP)

    题意  输入n个老鼠的体重和速度   从里面找出最长的序列  是的重量递增时速度递减 简单的DP  令d[i]表示以第i个老鼠为所求序列最后一个时序列的长度  对与每一个老鼠i  遍历全部老鼠j  当 ...

  6. hdu 4925 Apple Tree--2014 Multi-University Training Contest 6

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4925 Apple Tree Time Limit: 2000/1000 MS (Java/Others ...

  7. IDEA 使用方法快捷键

    Ctrl+Shift + Enter,语句完成“!”,否定完成,输入表达式时按 “!”键Ctrl+E,最近的文件Ctrl+Shift+E,最近更改的文件Shift+Click,可以关闭文件Ctrl+[ ...

  8. caioj1275&&hdu4035: 概率期望值6:迷宫

    期望的大难题,%%ZZZ大佬的解释,不得不说这是一道好题(然而膜题解都没完全看懂,然后就去烦ZZZ大佬) 简单补充几句吧,tmp的理解是个难点,除以tmp的原因是,当我们化简时,子节点也有一个B*f[ ...

  9. aliyun 日志服务(Log Service,Log)是针对日志场景的一站式服务

    日志服务(Log Service,Log)是针对日志场景的一站式服务,在阿里巴巴集团内部被广泛使用.用户无需开发就能快捷完成日志生命周期中采集.消费.投递以及查询功能. 日志服务当前提供如下功能 日志 ...

  10. [USACO16JAN]愤怒的奶牛Angry Cows

    传送门 一道神奇的DP………(鬼知道他为什么在tarjan里面) 一开始可能会考虑贪心或者什么其他神奇的算法,不过还是DP比较靠谱. 我们用f[i]表示摧毁所有i左侧的炸 药包最少需要的能量,用g[i ...