当样式像素一定时,因手机有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. [TypeScript] Query Properties with keyof and Lookup Types in TypeScript

    The keyof operator produces a union type of all known, public property names of a given type. You ca ...

  2. 大型网站技术架构(四)--核心架构要素 开启mac上印象笔记的代码块 大型网站技术架构(三)--架构模式 JDK8 stream toMap() java.lang.IllegalStateException: Duplicate key异常解决(key重复)

    大型网站技术架构(四)--核心架构要素   作者:13GitHub:https://github.com/ZHENFENG13版权声明:本文为原创文章,未经允许不得转载.此篇已收录至<大型网站技 ...

  3. java纯数字加密解密实例

    我们都知道,在用户加入信息时,一些比較敏感的信息,如身份证号,手机号,用户的登录password等信息,是不能直接明文存进数据库的.今天我们就以一个详细的样例来说明一下纯数字的java加密解密技术. ...

  4. poj1840Eqs(哈希判重)

    题目链接: 传送门 思路: 这道题是一个简单的hash的应用,假设直接暴力的话肯定承受不了5重for循环,所以比赛的时候我先到分成两组.可是后来用到了很多数组,然后想到数字太大,还先到stl判重, 后 ...

  5. 查看android-support-v4.jar引出的问题

    1.前面博文里也写过如何关联android-support-v4.jar的源码 今天新项目用上述方法的时候,竟然不成功..来回反复试了很长时间,最后发现 新建项目,会自动引用一个类库(自动新建的..) ...

  6. 自己写的Android端HttpUtil工具类

    package com.sxt.jcjd.util; import java.io.IOException; import java.io.UnsupportedEncodingException; ...

  7. apache使用总结

    由于某些原因,经常会使用apache(有时用nginx) 现在我主要用它做反向代理,偶尔弄一下负载均衡和添加head头 apache官网 http://httpd.apache.org/ 下载地址 h ...

  8. Hibernate 之 How

    分享自: http://blog.csdn.net/jnqqls/article/details/8242520 在上一篇文章Hibernate 之 Why? 中对Hibernate有了一个初步的了解 ...

  9. MYSQL之数据库初窥

    mysql数据库 1.数据库简单介绍    数据库概念:是依照数据结构来组织.存储和管理数据的仓库. 2.经常使用术语    数据库:是一些关联表的集合    数据表:表是数据的矩阵,在数据库中看起来 ...

  10. mongo03

    Mongo存储的单位是文档,文档是js对象, use test2 db.createCollection("stu")//隐士创建库显示创建表 db.stu.,name:" ...