移动端一像素边框
来源:互联网 发布:微商做图软件有哪些 编辑:程序博客网 时间:2024/05/16 07:14
移动端一像素边框
由于手机屏幕dpi(设备像素比)[关于dpi内容可点击这里](http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/)的不同,正常的一像素在手机端显示出来的就不是所谓的一像素,而是根据不同手机屏幕的dpi显示不同的像素,但是一像素边框又是一个很常见的需求,故这里mark一下所谓的一像素边框。可将下面代码写入mixin.styl文件下,加入全局样式,可直接传入颜色参数得到边框线
border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: 0 width: 100% border: 1px solid $color content: ' '
观察上述代码看到还是之前的1px,并未有特殊变化,此时我们需要使用css3新增的scaleY来进行缩放,达到所要的效果。
如下代码片段:
@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加入到所要实现一像素边框处的class处就可以实现响应式的一像素边框了。
阅读全文
0 0
- 移动端一像素边框
- 移动端一像素的边框问题
- 在移动端实现一像素边框
- 移动端1像素边框问题
- 移动端1像素的边框
- 移动端1px像素边框
- 一像素边框
- 一像素边框实现
- 移动web 1像素边框
- 移动端1像素边框问题的解决方案
- 移动端(手机)1像素边框真正实现
- 移动端(手机)1像素边框实现方法
- 一像素边框的实现
- HTML+CSS制作一像素边框
- 移动端(手机)实现1像素下边框的方法
- 生成一像素表格边框的五种方法
- ios 嵌套 H5 页面 一像素底部边框不出现
- 移动端像素的深究
- 51nod1089---最长回文子串 V2(51nod基础:Manacher算法)
- Linux---lnmp之mysql
- 【shell】head/tail及常见用法
- 《零基础入门学习Python》学习过程笔记【017函数】
- 利用Angular2的Observables实现交互控制
- 移动端一像素边框
- Angular4示例--数据显示
- openCV学习笔记(一)------进度条视频播放控制
- bzoj P4034 [HAOI2015]树上操作
- WPF实现拖拽功能
- 第1章 初识C语言
- 【HDU 1258】Sum It Up(DFS,去重技巧)
- DNS全解析
- Redis集群搭建与简单使用