移动web点5像素的秘密(转)
最近和一个朋友聊天,朋友吐露了工作上的一些不开心,说自己总是喜欢跟别人比较,活得比较累,这种感觉大部分人经历过,往往觉得是自己心态不好,其实不然,这是人性,此时应该快速摆脱这种状态,想到DOTA大9神的笔录,游戏也是人生,懂得思考的人生才会不断促使自己进步,详细我不清楚了,大概意思是这样:人这一辈子就一次,快乐很重要,人如何感受到快乐,说起来真的不难,有两个点,一点是“你能够让别人喜欢你”;另外一点是“跟好朋友一起时你能够卸下面具”,是怎么样的就怎么样。希望能给不开心的同学寻找一丝帮助~
回到今天的主题.5px(0.5px简写为.5px),可能大家听过.9,它是android平台应用软件开发里的一种特殊图片形式,本文的.5指如何使用css实现.5px的线条~
目录
- 你可能不知道的.5px
- border属性不支持.5px吗
- 实现.5px的线条
- 实现.5px的圆角边框
你可能不知道的.5px
移动web设计中,在retina显示屏下网页会由1px会被渲染为2px,那么视觉稿中1px的线条还原成网页需要css定义为.5px。文章开头的漫画中,细心的设计师发现粗线条并吐槽,前端哥的理由是因为css的border-width不支持.5px,所以用了1px来替代,最终渲染为2px的粗线条,这个问题往往会被忽视,从而导致移动网页中普遍存在2px的粗线条。
retina下的网页1px被渲染为2px(甚至是3px,例如iPhone 6 Plus),可参考的文章《高清显示屏原理及设计方案》
错误案例示范:微信-AA收款-详情页按钮,视觉稿给过来的按钮边框是1px,重构上线后按钮边框是2px。
此问题已优化,如何实现请往下看。
border值不支持.5px吗
有部分同学使用boder-width:.5px后,在PC或者页面页面看不到.5px的边框(ios 8系统已完美支持border-width值0.5px线条),会认为border-width不支持.5px,是不是这样,我们先做个试验。
首先打开链接或者扫描二维码,体验demo
http://1.peunzhang.sinaapp.com/demo/d5px/border.html
可以看出.5px的border在chrome浏览器上不显示线条,如下图:
调大chrome分辨率后,.5px的border在PC浏览器上显示出线条,如下图:
.5px的border在iPhone 6 plus下显示出线条,如下图:
.5px的border在三星galaxy s4 android 5.0.1下不显示线条,如下图:
其它设备就不一一截图,有兴趣的请测试,有惊喜,简单整理如下表格:
试验结果参考
- css的border-width值支持.5px,显示状态受屏幕分辨率的影响
- ios 8和winphone 8的设备对高清屏做了特殊处理,支持显示border-width:.5px
- android 几乎所有的机型不支持显示.5px的边框
另外,本文也对height值做了试验,结果跟border-width是一样的,我们还可以试验font-size、box-shadow等属性。
http://1.peunzhang.sinaapp.com/demo/d5px/height.html
实现.5px的线条
网络上有很多方法,如设置viewport,box-shawdow,border-image,background-image,transform:scale等,这里不做介绍(百度或者谷歌“retina 1px 边框”有答案),本文只介绍一种觉得比较好用的方法,一来兼容性好,二来不依赖图片。
transform:scale(x,y)
通过css支持定义border或者height为.5px大的线条,在android设备中的无法显示出来,这里有个小技巧,果设置线条为1px,然后通过transform:scale(x,y)来缩放线条为原来的一半,可显示0.5px的线条。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>点5测试 - scale</title> <style type="text/css"> .line { height: 50px; line-height: 50px; background-color: #CCC; border-bottom:1px solid red } .scale { position: relative; height: 50px; line-height: 50px; background-color: #CCC } .scale:after { position: absolute; content: ''; width: 100%; left: 0; bottom: 0; height: 1px; background-color: red; -webkit-transform: scale(1,.5); transform: scale(1,.5); -webkit-transform-origin: center bottom; transform-origin: center bottom } </style> </head> <body> <div class="line">1px</div> <br/><br/> <div class="scale">0.5px</div> </body> </html>
http://1.peunzhang.sinaapp.com/demo/d5px/height-scale.html
实现.5px的圆角边框
.5px的边框,看起来看神奇,这里感谢蓝叔提供的方法。
原理:先定义1px的圆角边框,然后拉伸内容的宽度和高度为父级的2倍(边框厚度不变),然后再使用transform:scale(0.5)缩放为原来的0.5倍
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>点5测试 - border-radius</title> <style type="text/css"> body{padding: 50px;-webkit-touch-callout:none;} [class*="btn"]{margin: 0 auto;} .btn-1 { width: 200px; height: 42px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; line-height: 42px; background-color: #EDEDED; border: 1px solid red; } .btn { position: relative; width: 200px; height: 42px; -webkit-border-radius: 5px; border-radius: 5px; text-align: center; line-height: 42px; background-color: #EDEDED; } .btn:before { content: ''; position: absolute; top: -50%; bottom: -50%; left: -50%; right: -50%; -webkit-transform: scale(0.5); transform: scale(0.5); border-style: solid; border-width: 1px; border-color: red; -webkit-border-radius: 10px; border-radius: 10px; } </style> </script> </head> <body> <div class="btn-1">1px border</div> <br/><br/> <div class="btn">.5px border</div> </body> </html>
http://1.peunzhang.sinaapp.com/demo/d5px/border-radius.html
如果你在chrome打开,会发现缩放线条会导致边框颜色变浅,但大家可以放心使用,因为在大部分移动设备(相对高端)的颜色还是正常的。
http://www.cnblogs.com/PeunZhang/p/4709822.html
转载于:https://www.cnblogs.com/softidea/p/4756147.html
移动web点5像素的秘密(转)相关推荐
- 移动web开发之像素和DPR
定义 像素,又称画素,是图像显示的基本单位,译自英文"pixel",pix是英语单词picture的常用简写,加上英语单词"元素"element,就得到pixe ...
- web开发之像素和DPR详解
像素和DPR 我们在web开发的过程中,经常会提到「像素」这个词,那么,像素到底是什么?移动端的像素与桌面端是否有区别?同样大小的手机屏幕,为什么有的像素高,有的像素低?下面让我们通过资料阅读,一起找 ...
- 移动web开发之像素和DPR详解
前话: 像素在web开发中几乎天天用到,但到底什么是像素,移动端和桌面端的像素有区别吗,缩放对像素有影响吗,视网膜屏幕和像素有什么关系?关于这些问题,可能就不清楚了.本文将介绍关于像素的相关知识 什么 ...
- 【原】移动web资源整理
[原]移动web资源整理 回顾2014年,刚转来到新的部门,非常渴望做出一个所谓的成功产品,心态几乎变了,每天都忙忙碌碌在项目中,把原来阅读和学习的习惯给忽视了,作为一个技术人员,没有通过学习新的知识 ...
- web前端入门到实战:CSS属性width和height
width 是定义元素内容区的宽度: height是定义元素在内容区的高度. 在内容区外面可以增加内边距(padding).边框(border)和外边距(margin),这样的话就成了我们常说的盒子模 ...
- 如何解决web端图片加载慢卡顿的问题???
公司官网上面有一的功能是在后台发布公司动态之后,在前台显示公司动态内容. 但是上上周团建之后,上传的公司动态中的图片加载速度就非常的慢. 图片加载慢的原因有两个: 1.图片过大导致的加载缓慢. 2.网 ...
- CTF-攻防世界-MISC-高手进阶区(001-018 持续更新中...)
马上就要进军CTF了,准备把MISC,CRYPTO,WEB的题目好好刷一下... 目录 MISC 高手进阶区 base64÷4 embarrass 神奇的Modbus wireshark-1 pure ...
- Ajax 完整教程 (转)
Ajax 完整教程 第 1 页 Ajax 简介 Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应 ...
- Hiding Images in Plain Sight: Deep Steganography 于众目睽睽之下隐藏图像:深度隐写术
Hiding Images in Plain Sight: Deep Steganography 于众目睽睽之下隐藏图像:深度隐写术 1.摘要 隐写术是将秘密信息隐藏在另一条普通信息中的一种实践.通常 ...
- Ajax 完整教程(转载)
第 1 页 Ajax 简介 Ajax 由 HTML.JavaScript™ 技术.DHTML 和 DOM 组成,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序.本文的作者是 ...
最新文章
- 微软官方pe工具_小白用户如何制作系统启动版,微软出官方工具啦,简单一键制作...
- mysql group by 天_MySQL group by语句如何优化
- 【CyberSecurityLearning 附】域的复习+小综合实验(重要!)
- wxWidgets:wxRegEx类用法
- C# Repeater绑定显示数组
- Web API 2 入门——创建ASP.NET Web API的帮助页面(谷歌翻译)
- python常用api_[原创]IDAPython常用API整理
- [CODEVS3641]上帝选人
- ES6新特性_ES6的Rest参数---JavaScript_ECMAScript_ES6-ES11新特性工作笔记012
- WPF - ViewModle中关闭Window
- 安卓开发3d模型展示源码_玩具模型样品3D打印,让玩具开发无限可能
- iMX8MPlus和iMX8QM机器学习框架eIQ性能对比
- H.264/AVC原理介绍
- PPT 宏 macro图片crop
- 软件需求分析——UML用例图
- python自动翻译pdf_python pdf一键翻译脚本
- 【论文精读】TACRED Revisited: A Thorough Evaluation of the TACRED Relation Extraction Task
- 无法调用自己电脑的gpu,即torch.cuda.is_available()返回false
- Importerror: libgl.so.1: cannot open shared object file: no such file or directory
- [Practical.Vim(2012.9)].Drew.Neil.Tip01 学习摘要