1px的实现
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
.border{
position: relative;
}
.border::after{
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
border-top:1px solid rgba(7,17,27,0.1);
content: " ";
}
@meta (-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)
}
}
@meta (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
.border-1px::after{
-webkit-transform: scaleY(0.5);
transform:scaleY(0.5)
}
}
</style>
</head>
<body>
1px像素的实现
<div class="border border-1px"> </div>
</body>
</html>
利用meta判断设备像素是dpr的值来,缩放对应的比例
1px的实现的更多相关文章
- 移动端1px边框
问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...
- [半转]1px边框 移动端
半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. ...
- 移动端视网膜(Retina)屏幕下1px边框线 解决方案
原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...
- [Cordova] 手机网页里的1px
[Cordova] 手机网页里的1px 1px的显示 Cordova让开发人员可以使用HTML页面,来开发APP的显示内容.但是在手机上,HTML页面里定义的1px,并不是直接对应到手机屏幕的一个像素 ...
- iOS去除导航栏和tabbar的1px横线
1.在自己定义的导航栏中或者设计稿中经常需要去除导航栏的1px横线,主要是颜色太不协调了 去除之前的图片 要去除这1px的横线,首先应该知道它是什么,在Xcode的界面调试中可以看到,它其实是UIIm ...
- css中的1px并不总等于设备的1px(高分辨率不等 低分辨等)
在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css ...
- 移动端1px
移动端不同尺寸设备dpi不同,会造成1px线条不同程度的缩放,可利用媒体查询device-pixel-ratio,进行不同情况匹配: @media(-webkit-min-device-pixel-r ...
- Retina屏实现1px边框
问题描述 通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示 ...
- 关于移动端1px边框问题
<div class="z_nei_list"> <div class="z_name_left font-size3">身份证号:&l ...
- 解决CSS移动端1px边框问题
移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. < ...
随机推荐
- IOC的使用
1.概要: 在spring中,都是使用反射机制创建对象,将创建对象的权利交给spring容器,就是控制反转(ioc) 对象创建方式 有参构造 无参构造 工厂模式(静态,非静态) 2.创建IDEA控制台 ...
- Vue2.0 官方文档学习笔记
VUE2.0官方文档 基础部分: 1.VUE简介 Vue是一个基于MVVM的框架,其中M代表数据处理层,V代表视图层即我们在Vue组件中的html部分,VM即M和V的结合层,处理M层相应的逻辑数据,在 ...
- html-jquery/js引用外部图片时遇到看不了或出现403情况解决方法
<script type="text/javascript"> function showImg(url) { var frameid = 'frameimg' + M ...
- 使用as开发jni入门(附验证):配置ndk开发环境,配置as相关jni配置
编写jni,生成so文件: 1.通过as内置的Android SDK下载需要使用的ndk,在系统环境变量设置相关参数 2.新建一个普通as项目,新建一个类,用来静态加载so库和书写本地native方法 ...
- SQLAlchemy的基本使用
一.介绍 SQLAlchemy是一种ORM(Object-Relational Mapping)框架,用来将关系型数据库映射到对象上.该框架建立在DB API之上,将类和对象转化成SQL,然后使用AP ...
- 扒一扒IT大佬高考:马云数学1分考北大 李彦宏是状元
http://news.cnblogs.com/n/522622/ 高考今天正式拉开序幕,而像李彦宏.马云等 IT 大佬之前也都参加过高考,他们成绩又都是怎样的呢? 马化腾:放弃天文梦选择计算机 20 ...
- 自定义标签jsp2格式
在写自定义标签时候是不是感觉很烦啊,其实人家也是这样认为的,于是我们的jsp新的标准对标签进行了更改,使我们用起来更简单.到底哪里简单呢?看看代码再说咯: 还是老规矩,先上一个标签的逻辑类: 1. p ...
- python基础教程总结15——7 自定义电子公告板
1. Python进行SQLite数据库操作 简单的介绍 SQLite数据库是一款非常小巧的嵌入式开源数据库软件,也就是说没有独立的维护进程,所有的维护都来自于程序本身.它是遵守ACID的关联式数据库 ...
- 2017-3-7-lint183-wood-cut
2017-3-7-lint183-wood-cut 在河之洲 算法 lintcode problem lintcode183 wood cut solution 注意两点 注意边界条件 取的是最大值而 ...
- UVA 818 Cutting Chains 切断圆环链 (暴力dfs)
题意就是给一张无向图,去掉某些结点,然后连成一条链,问最少去掉几个结点. n很小n<=15,所以直接枚举2^15个状态就行啦. 链的条件是1.无环,2.没有度大于2的点,3.把n个散链连起来需要 ...