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 ...
随机推荐
- Spring之IOC篇章具体解释
专题一 IOC 1.接口以及面向接口编程 a.结构设计中,分清层次以及调用关系,每层仅仅向外(或者上层)提供一组功能接口,各层间仅依赖接口而非实现类这样做的优点是,接口实现的变动不影响各层间的调用 ...
- linuxc线程信号-pthread_cond_wait理解
pthread_cond_wait(pthread_cond_t *cond, pthread_mutex_t*mutex)函数 传入的參数mutex用于保护条件,由于我们在调用pthread_con ...
- soapUI系列之—-05 JDBC Request & Xpath Match
一.配置JDBC Connection String 1. 以Oracle为例,要使用JDBC数据库就要先下一个 oracle JDBC的驱动,下载成功后把它放到soapUI安装目录下的 bin/e ...
- Python爬虫开发【第1篇】【多线程爬虫及案例】
糗事百科爬虫实例: 地址:http://www.qiushibaike.com/8hr/page/1 需求: 使用requests获取页面信息,用XPath / re 做数据提取 获取每个帖子里的用户 ...
- web 开发之js---页面缓存, jsp 缓存, html 缓存, ajax缓存,解决方法
有关页面缓存问题.这个问题上网找了好多.但发觉各种解决方法,都彼此分离,没有一篇统一的解决方法,本人近日,也遇到了页面缓存的问题,根据网上各页面缓存的解答,做了一个总结. 1.服务器端缓存的问题, 防 ...
- ZOJ 3691 Flower(最大流+二分)
Flower Time Limit: 8 Seconds Memory Limit: 65536 KB Special Judge Gao and his girlfriend's ...
- [IT学习]Linux 学习笔记
1.踢掉用户 # who 15:23:13 up 26 days, 1:44, 2 users, load average: 0.00, 0.05, 0.03 USER TTY FROM LOGIN@ ...
- oracle 12c 13姨
搞了一下oracle 12c.有些体会还是先记下来. 12c搞搞新意思,弄了个CDB(容器数据库,可不是商务中心CBD哟)和PDB(可插拔数据库).PDB插在CDB里. 简单而言,CDB就是一个数据库 ...
- iOS开发——高级篇——多线程dispatch_apply
我们知道遍历数组是一个相对耗时的操作,而同时手机的核是越来越多,所以我们需要充分利用iOS多核的作用. 特别是在遍历操作中还有其他耗时操作.像我们平时直接遍历数组的操作 ,i< ,i++){ / ...
- SSH常见错误
错误一: IOException parsing XML document from ServletContext resource [/WEB-INF/applicationContext.xml] ...