border-1px的实现(stylus)
当样式像素一定时,因手机有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)的更多相关文章
- Stylus-富有表现力的、动态的、健壮的CSS
今天总结一下Stylus记一些常用的也是最基本的用法 一. 选择器 Stylus是基于缩进的这让我们可以更快捷的编写css比如 body { margin:; paddind:; font-size ...
- Retina屏下1px border
layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上 ...
- retina屏实现border边框1px
.border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff33 ...
- border.css(解决移动端1px问题)
由于某些机型分辨率过高,会导致1px变成2-多px像素的问题,引用bordercss解决 @charset "utf-8"; .border, .border-top, .bord ...
- 移动端1px的border
移动端浏览器解决1px的底部border问题 1.使用border:1px solid #e0e0e0. 在不同设备下由于devicePixelRatio不同导致1px实际显示的长度不同.所以在移动端 ...
- 移动端 1px 像素边框问题的解决方案(Border.css)
前言 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案 将以下代码放在border.css文件中,然后引入 常用className border:整个盒子都有边框 border-t ...
- 移动端比1px还小的border
巧用border 在移动端 经常出现border,细边框但有的时候 产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border下面是代码 希望对大家有所帮助 .thinner-bord ...
- CSS预处器的对比——Sass、Less和Stylus
预处器的对比--Sass.LESS和Stylus 转载: 英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- sass、less和stylus的安装使用和入门实践
刚 开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是 一个人完成的,对于这种团队的项目开发,前端实践用c ...
随机推荐
- update语句执行卡死现象原因及解决方案
https://blog.csdn.net/wpz0713/article/details/51499654 原因分析: 可能在PLSQL Developer执行update时没有commit,ora ...
- 使用python转换markdown to html
起因 有很多编辑器可以直接将markdown转换成html,为什么还要自己写呢?因为我想写完markdown之后,即可以保存在笔记软件中(比如有道),又可以放到github进行版本管理,还可以发布到博 ...
- 树莓派 mongodb 安装&报错处理
树莓派 mongodb 安装&报错处理 编译过的源码下载地址: http://files.cnblogs.com/files/xueshanshan/mongodb-rpi.zip addus ...
- 辛星浅析一次ajax的实现过程
说到ajax,那绝对是一个老生常谈的话题,近些年ajax技术的使用颇为盛行. 以下我们就以jQuery为例来从一个真实的项目中看一下ajax的实例. 首先是前端页面,这个页面我们使用的是bootstr ...
- Java中有多少种设计模式?请简单画一下三种常见设计模式的类图?
转载:http://blog.csdn.net/longyulu/article/details/9159589 一.设计模式的分类 总体来说设计模式分为三大类: 创建型模式,共五种:工厂方法模式.抽 ...
- 使用ADO.NET对SQL Server数据库进行訪问
在上一篇博客中我们给大家简介了一下VB.NET语言的一些情况,至于理论知识的学习我们能够利用VB的知识体系为基础.再将面向对象程序设计语言的知识进行融合便可进行编程实战. 假设我们须要訪问一个企业关系 ...
- lambda和抽象类
lambda的使用条件是‘一个接口仅有一个待实现的方法’: so,lambda不能使用在抽象类上,使用后或提示‘Target type of a lambda conversion must be a ...
- string operation in powershell
https://blogs.technet.microsoft.com/heyscriptingguy/2014/07/15/keep-your-hands-clean-use-powershell- ...
- Oracle 删除用户和表空间////Oracle创建删除用户、角色、表空间、导入导出、...命令总结/////Oracle数据库创建表空间及为用户指定表空间
Oracle 使用时间长了, 新增了许多user 和tablespace. 需要清理一下 对于单个user和tablespace 来说, 可以使用如下命令来完成. 步骤一: 删除user drop ...
- validationEngine验证的使用
改校验的方法功能很强大,具体查看api http://code.ciaoca.com/jquery/validation_engine/ 效果: