移动端实1px细线方法
前言
在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗,
那是因为css中的1px并不等于移动设备(物理像素)的1px。物理像素显示是1个像素代表2个像素,所以出现为2px
所以我们在移动端中为了让1px的线“看起来”苗条些,会采用一些手段。
解决办法
实现1px的线
方法一:transform
在移动端中,我们对宽度100%,1px的线进行改造,将其宽度设为200%,高度不变,之后使用transform对其缩放50%。
.line{
width:200% ;
height:1px ;
transform:scale(.5) ;
-ms-transform:scale(.5) ;
-o-transform:scale(.5) ;
-webkit-transform:scale(.5) ;
-moz-transform:scale(.5) ;
transform-origin:top left ;
}
这样苗条的线就出现了!
实现1px的边框
方法一:伪类 + transform
原始border:去掉border,设置相对定位
新border:设置 :before 或者 :after 重做 border ,并使用 transform 的 scale 缩小一半,设置绝对定位
.scale-1px{ height:100px; } |
优点:
所有场景都能满足
支持圆角(伪类和本体类都需要加border-radius)
缺点:
对于已经使用伪类的元素(例如clearfix),可能需要多层嵌套
方法二:-webkit-min-device-pixel-ratio + 媒体查询
media query对应devicePixelRatio有个查询值-webkit-min-device-pixel-ratio, css可以写成这样
.border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #999 } } |
缺点:
- 安卓与低版本IOS不适用
实现边框宽度为1px,宽高各为父元素
方法一:伪类 + transform
.box1 {
position: relative;
border: none;
height: 100px;
width: 100px;
text-align: center;
}
.box1 div::after {
content: '';
border:solid 1px aqua;
position: absolute;
left: -50%;
top: -50%;
bottom: -50%;
right: -50%;
-webkit-transform: scale(.5);
transform: scale(.5);
box-sizing: border-box;
}
<div class="box1">
<div></div>
</div>
|
移动端实1px细线方法的更多相关文章
- 移动端高清适配方案(解决图片模糊问题、1px细线问题)
本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >> ...
- 移动端1px细线解决方案总结
现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在 ...
- 手机端1px细线公共类
手机端1px细线公共类 .borderBottom1px{ position: relative; } .borderBottom1px:after{ content: ""; p ...
- 移动端 CSS 1px 问题及解决方案
移动端 CSS 1px 问题及解决方案 viewport & transfrom: scale viewport 的 initial-scale 设为 1 UI 设计稿用rem 和 trans ...
- 移动端1px细线的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 移动端1px细线解决方案--利用transform缩放方式
移动端1px会显示为2px; 解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放 1. 上边框 相当于 border-top <div class="bor ...
- css笔记--web端小于1px设计的处理方法
HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT ...
- 移动端1px细线问题
1可以用伪类实现 .con{position: relative;.con:before { content: " "; position: absolute; left: 0; ...
- 在移动端实现1px的边框
由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 与设计图产 ...
随机推荐
- AutoItLibrary测试Windows GUI
AutoItLibrary库关键字 AutoItLibrary 的对象操作大体上有几大主要部分,Window 操作.Control 操作.Mouse 操作.Process操作.Run 操作.Reg 操 ...
- IDEA内存设置
之前,博主的idea一直运行正常,今天,开发了一个接口,因为接口在项目中另一个模块,之前从来没有启动过这个模块,由于调试接口将该模块也放到tomcat容器中,结果我的idea不停崩溃,于是查看idea ...
- 装机、做系统必备:秒懂MBR和GPT分区表____转载网络
装机.做系统必备:秒懂MBR和GPT分区表 科技美学 2016-10-17 16:36:23 阅读(3835) 评论(4) 很多网友询问MBR和GPT的问题,涉及到硬盘操作系统的安装,其实除了MBR和 ...
- JNI使用常见错误
1. java.lang.UnsatisfiedLinkError: Couldn't load hello: **findLibrary returned null** 解决方案: * 如果处理器平 ...
- 【VBA】多条件去重
Function kaidan(txt)Dim i As IntegerDim arrSet d = CreateObject("scripting.dictionary")For ...
- mybatis如何遍历Map的key和value【增删改查】
转: mybatis如何遍历Map的key和value 2017年11月28日 10:07:57 Joker_Ye 阅读数:4158 1.sql.xml <?xml version=&quo ...
- 小D课堂 - 新版本微服务springcloud+Docker教程_3-02CAP理论知识
笔记 2.分布式应用知识CAP理论知识 简介:讲解分布式核心知识CAP理论 CAP定理: 指的是在一个分布式系统中,Consistency(一致性). Availabi ...
- OpenID简介
OpenID 是一个以用户为中心的数字身份识别框架,它具有开放.分散性.OpenID 的创建基于这样一个概念:我们可以通过 URI (又叫 URL 或网站地址)来认证一个网站的唯一身份,同理,我们也可 ...
- MR1和MR2的工作原理
MapReduce1 分为6个步骤: 1.作业的提交 1).客户端向jobtracker请求一个新的作业ID(通过JobTracker的getNewJobId()方法获取,见第2步 2).计算作业的输 ...
- shutil使用
1.用shutil移动文件, import shutil shutil.move('/root/test.yaml','/home/') shutil.move('/root/k8s.py','/ho ...