【笔记】css 1像素边框
有时候在移动端显示1像素的边框时 可能因为dpi 的原因造成像素有变差 所以为了达到显示的像素达到预期效果就要编写一个css 通用类达到1像素边框的效果
关于dpi 的解释请看张鑫旭老师的文章:http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/
下面是代码部分
.border-1px{
position: relative;
}
.border-1px::after{
content: " ";
display: block;
position: absolute;
top:;
left:;
width: 100%;
border-bottom: 1px solid #ccc;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5){
.border-1px{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
/* 当在手机屏幕显示的时候 缩放0.5 即原来大小的一半 */
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2){
.border-1px{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
<div id="father" class="border-1px">我是父元素</div>
归根究底,这个1px 边框就是利用 after(或者before)这个伪类利用元素的位置关系进行排列的
最合核心的部分是媒体查询,根据属性 min-device-pixel-ratio 使伪类元素根据屏幕做缩放
【笔记】css 1像素边框的更多相关文章
- HTML 学习笔记 CSS样式(边框)
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
- 移动端 1px 像素边框问题的解决方案(Border.css)
前言 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案 将以下代码放在border.css文件中,然后引入 常用className border:整个盒子都有边框 border-t ...
- 移动端一像素边框解决方案[css scale]
新建一个border.css的文件,然后将代码复制粘贴,然后引用border.css样式文件,然后给需要添加边框的元素,加相应的类样式. tips: border-bottom[一像素下边框]:bor ...
- amazeui学习笔记--css(基本样式2)--基础设置Base
amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- CSS实现多重边框和内凹圆角
CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...
- amazeui学习笔记--css(布局相关1)--网格Grid
amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式 <div class=&q ...
- amazeui学习笔记--css(常用组件12)--面板Panel
amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...
- amazeui学习笔记--css(常用组件8)--列表list
amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...
随机推荐
- 转:perl源码审计
转:http://www.cgisecurity.com/lib/sips.html Security Issues in Perl Scripts By Jordan Dimov (jdimov@c ...
- 关于latex的画图
可以使用latex画一些简单的图 可以参考这个链接:http://www.latexstudio.net/archives/9400(PGFPlots绘图简易教程[转载])
- windows环境下模仿Linux环境发起curl请求
1.到官网下载curl工具包 2.在curl.exe目录中使用(使用方式1) 解压下载后的压缩文件,通过cmd命令进入到curl.exe所在的目录. 由于博主使用的是windows 64位 的系统,因 ...
- Wannafly挑战赛7 C - 小Q与氪金游戏
题目描述 “为世界上所有的美好而战!”小Q同学最近沉迷“稳固3”,为了从最新的蛋池中抽出自己喜欢的角色卡,不惜氪下重金.在这个游戏中,氪一单可以得到x个宝石,而抽一次卡需要花费y个宝石,由于游戏策划十 ...
- Python并发编程-进程的几个方法
join()方法 from multiprocessing import Process import time def func(arg1,arg2): print('*'*arg1) time.s ...
- 【Java】SpringBoot入门学习及基本使用
SpringBoot入门及基本使用 SpringBoot的介绍我就不多说了,核心的就是"约定大于配置",接下来直接上干货吧! 本文的实例: github-LPCloud,欢迎sta ...
- FastReport.Net使用:[35]奇偶行
文本控件类型的奇偶行数据实现(普通) 1.普通的奇偶行数据主要使用报表对象的EvenStyle(偶数行样式)属性实现. 首先通过 报表-->样式 菜单打开样式编辑器,编辑几个备用样式. 样式的编 ...
- bzoj4556: [Tjoi2016&Heoi2016]字符串 (后缀数组加主席树)
题目是给出一个字符串,每次询问一个区间[a,b]中所有的子串和另一个区间[c,d]的lcp最大值,首先求出后缀数组,对于lcp的最大值肯定是rank[c]的前驱和后继,但是对于这个题会出现问题,就是题 ...
- 把json格式的字符串转换成javascript对象或数组
第一种 JSON.parse(jsonString) 第二种 eval("("+jsonString+")") 第三种 var obj=(function ...
- Ubantu14.04下编译OpenCV3.0.0以及读取图片例子
以前一直使用opencv 2.x的版本,现在3.0的已经发布成正式版了,尝试在Linux下安装. 收集了一篇不错的经验教程: Ubuntu14.04下安装OpenCV3.0经验. 编译的过程大概需要3 ...