当样式像素一定时,因手机有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. Duplicate property mapping of contactPhone found in

    启动的时候报Duplicate property mapping of contactPhone found in com....的错误,是因为在建立实体对象的时候,有字段重复了,有的是继承了父类的字 ...

  2. #define中的#和##作用

    #define语句中的#是把参数字符串化,##是连接两个参数成为一个整体. #define FACTORY_REF(name) { #name, Make##name } 中#name就是将传入的na ...

  3. linux系列之-—01 shell编程笔记

    一.特殊变量($0.$1.$2. $?. $# .$@. $*) shell编程中有一些特殊的变量可以使用.这些变量在脚本中可以作为全局变量来使用. 名称 说明 $0 脚本名称 $1-9 脚本执行时的 ...

  4. 【转】实现LoadRunner多个场景的顺序执行

    应用场景假设有3个不同的测试场景,分别为并发登录.核心业务.可靠性测试,3个场景有先后执行顺序.由于白天测试机器另有用处,只能在晚上进行性能测试,这时我们的期望是能否把测试场景都设定好之后晚上自动运行 ...

  5. 理解Paxos Made Practical

    Paxos Made Practical 当一个组中一台机器提出一个值时,其它成员机器通过PAXOS算法在这个值上达成一致. Paxos分三个阶段. 第一阶段: 提出者会选出一个提议编号n(n> ...

  6. 解决javah生成.h头文件找不到找不到android.support.v7.app.AppCompatActivity的问题

    问题描写叙述: 在使用Android Studio进行JNI开发时,须要使用javah生成C或C++的头文件,可是可能会遇到: 错误: 无法訪问android.support.v7.app.AppCo ...

  7. php判断手机号码

      //PHP判断手机号码 public function isMobile($params) { $pattern = "/^(13[0-9]|14[0-9]|15[0-9]|17[0-9 ...

  8. GoodUI:页面布局的技巧和设计理念

    http://goodui.org/ 中文翻译:http://www.cnblogs.com/Wayou/p/goodui.html 一年了,小小少年从幼年期过渡到成长期要开始加速冲刺了.毕竟钻头就是 ...

  9. MongoDB相关的一些技术文章

    安装 win7下安装和配置MongoDB的总结---阿冬专栏

  10. WebService_使用三要素

    一.Java中WebService规范 JAVA 中共有三种WebService 规范,分别是JAX-WS.JAX-RS.JAXM&SAAJ(废弃). 1.JAX-WS规范 JAX-WS 的全 ...