【移动端debug-5】可恶的1px万能实现方案
最近和设计同学调ui,遇到的是一位对1px有极致追求的同学,像素眼一眼看出我写的是不是1px,所以让我好好地研究了一番1px到底怎么写最方便。
一、为什么出不来1px?
简而言之:css的1px只是一个抽象的单位,并非实际设备中的1px。
关于retina屏:
我们知道现在iphone大多数型号都用上了retina屏,而retina屏的分辨率相较于普通屏幕增加了一倍,也就是说原来1个像素宽度的区域内可以塞进2个像素了。我们css写的1px是一个概念像素,在retina屏的实际设备上占了2px的位置。
而对于手机屏幕整体来说,一个标注了750宽的手机(iPhone6)在css中只需要375px就能表示。
二、如何在手机上写出1px?
网上其实有人列了非常多的方案,有用transform的、有用图片的、有用canvas的、还有用0.5px的……从操作简易性来看,用transform的方案是比较简单的,而且适配也比较容易(0.5px的方案安卓不支持)。
原理:写一条1px的线,然后transform:scaleY(0.5)或scaleX(0.5),就能够将retina上显示的2px缩小为实际屏幕中的1px。
三、几种1px的样式实践方案
1、单线
思路:写一个height为1px的元素,然后通过transform:scaleY(0.5)来缩放实现
示例:https://jsfiddle.net/xhabhyf9/2/
.single-line{
margin:0 auto;
height: 1px;
width:200px;
background: #000;
overflow: hidden;
transform: scaleY(0.5);
-webkit-transform: scaleY(0.5);
}
(此处加的一句overflow: hidden有奇效,能使得1px真正实现,如果不加这句会有部分颜色溢出,手机上看起来会比1px粗。但是我查了半天没查到是什么原因,还望有高人指点指点,感激不尽。)
2、四边形&圆角四边形
思路:假定需求是给width为200px、height为100px的矩形画1px的描边。则写css时,元素宽高增加1倍,然后给元素写1px的border,再通过transform:scale(0.5)来整体缩放实现。(如果有圆角,圆角的弧度也要放大2倍,即需求是4px,css则写成8px)
示例:https://jsfiddle.net/xhabhyf9/3/
.rectangle{
height: 200px;
width:400px;
background: #f0f0f0;
border:1px solid #000;
border-radius:8px;
transform: scale(0.5);
-webkit-transform: scale(0.5);
}
3、文字容器的描边
大多数情况下,我们希望文字框的描边随着文字的字数而变化,倘若我们直接在2的例子中的子元素(class="rectangle")里添加文字,则无法实现文字按照父级元素的宽度来排列文字。比如这样:https://jsfiddle.net/xhabhyf9/5/,文字框缩小成了父级元素的50%,无法实现充满父级元素的效果。
思路:给文字框加一层标签,给这层标签元素描边1px,然后给它的外层元素设置为width:200%并transform:scale(0.5),并且用translate让外层元素由于缩放scale带来的位移“归位”
示例:https://jsfiddle.net/xhabhyf9/7/
.rectangle{
background: #f0f0f0;
width:200%;
transform: scale(0.5) translate(-50%,-50%);
-webkit-transform: scale(0.5) translate(-50%,-50%);
}
span{
display:inline-block;
font-size:24px;
border:1px solid #000;
border-radius:8px;
}
【移动端debug-5】可恶的1px万能实现方案的更多相关文章
- 周记5——随机撒花特效、动态修改伪元素样式、contenteditable属性、手机端调试利器VConsole、浏览器端debug调试
记录一些小零碎知识点,以便日后查看~ 1.随机撒花特效 教师节快到了,公司的产品提出一个需求:在IM(即时聊天)聊天界面弹出教师节的祝福“广告”,用户点击“发送祝福”按钮,聊天界面会随机撒花.这里的重 ...
- 移动端H5地图矢量SHP网格切分打包方案
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却 ...
- 移动 APP 端与服务器端用户身份认证的安全方案
最近要做一个项目是java开发后端服务,然后移动APP调用.由于之前没有接触过这块,所以在网上搜索相关的方案.然后搜到下面的一些方案做一些参考. 原文:移动 APP 端与服务器端用户身份认证的安全方案 ...
- 云笔记项目-网页端debug功能学习
在做云笔记项目的过程中,除了服务端在eclipse中debug调试代码外,有时候需要在浏览器端也需要进行debug调试,刘老师举了一个冒泡排序算法的dubug例子,进行了讲解. 首先上浏览器端测试代码 ...
- 移动端Retina屏边框线1px 显示为2px或3px问题解决方法
我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 1.何为“设备像素比dev ...
- 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析
以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...
- 移动端下网页border:1px显示
解决这个问题之前首先要了解移动前端开发viewport的概念,自己写了一篇很粗糙viewport详解的文章对它有了一个很简单的理解.这里推荐一篇很详细的博文<<移动前端开发之viewpor ...
- 移动端1px 边框完整方案(四个方向)
使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l 左右方向 t ...
- 在移动端画出真正的1px边框
一.问题 写H5的样式时候,设置元素的边框为1px,不幸的事情在IOS设备上发生了,设计师会说,咦,边框怎么那么大,这是2px了吧?改成1px.我明明设置成1px了啊. 二.为什么边框变粗了? ...
随机推荐
- How to create a custom action type with a custom control (BarCheckItem), associated with it
https://www.devexpress.com/Support/Center/Example/Details/E1977/how-to-create-a-custom-action-type-w ...
- 使用VMWareWorkstation10搭建学习环境笔记
第一节:介绍虚拟化技术 虚拟化技术1.在一台计算机运行多个操作系统2.教学环境 测试环境3.和硬件无关4.P to V 物理机->虚拟机(Physical to Virtual) V ...
- 【Unity Shader】(六) ------ 复杂的光照(上)
笔者使用的是 Unity 2018.2.0f2 + VS2017,建议读者使用与 Unity 2018 相近的版本,避免一些因为版本不一致而出现的问题. [Unity Sha ...
- 使用proxyee-down解决百度云下载限速问题
1.在下面页面安装HTTP下载器 https://github.com/proxyee-down-org/proxyee-down#%E4%B8%8B%E8%BD%BD 2.安装switchy插件 h ...
- oracle数据库之子查询
子查询也叫内部查询,在主查询之前执行一次并得到结果,此结果一般情况下,是用来当做是主查询的条件. -- 在 emp 表中,找出工资比 ALLEN 的高? -- 先查出 ALLEN 的工资是多少? ...
- 快速获取APP对应的appPackage和appActivity
appPackage和appActivity 进行appium自动化测试非常重要的两个参数,我们所测试的APP不同,这两个参数肯定也是不一样的. 介绍两种方法可快速获取APP的这两个参数: 方法一 1 ...
- List集合中的对象进行排序
类A: public class A implements Comparable<A>{ private Integer id; private String name; public A ...
- 金融科技行业 SDL(转载)
都是一些检查项,值得借鉴,关键在于要能够落地 作者 沈发挺@美的金融科技下载打印版
- Python set 集合
简介 python的set和其他语言类似, 是一个无序不重复元素集, 基本功能包括关系测试和消除重复元素. 集合对象还支持union(联 合), intersection(交), difference ...
- Ajax中post后台.net MVC中Controller的路径问题。
今天使用ajax的post方法,去访问mvc的controller,url的传值是 "//ProductCatalog/PostShareInfo",发现无论如何都访问不到. 我实 ...