有时候在移动端显示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像素边框的更多相关文章

  1. HTML 学习笔记 CSS样式(边框)

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

  2. 移动端 1px 像素边框问题的解决方案(Border.css)

    前言 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案 将以下代码放在border.css文件中,然后引入 常用className border:整个盒子都有边框 border-t ...

  3. 移动端一像素边框解决方案[css scale]

    新建一个border.css的文件,然后将代码复制粘贴,然后引用border.css样式文件,然后给需要添加边框的元素,加相应的类样式. tips: border-bottom[一像素下边框]:bor ...

  4. amazeui学习笔记--css(基本样式2)--基础设置Base

    amazeui学习笔记--css(基本样式2)--基础设置Base 一.总结 1.盒子模型:外margin,内padding,这里的内外指的边框 2.border-box:Amaze UI 将所有元素 ...

  5. HTML+CSS笔记 CSS笔记集合

    HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...

  6. CSS实现多重边框和内凹圆角

    CSS实现多重边框 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset=&q ...

  7. amazeui学习笔记--css(布局相关1)--网格Grid

    amazeui学习笔记--css(布局相关1)--网格Grid 一.总结 基本使用 1.div+class布局:amaze里面采取的就是div+class的布局方式  <div class=&q ...

  8. amazeui学习笔记--css(常用组件12)--面板Panel

    amazeui学习笔记--css(常用组件12)--面板Panel 一.总结 1.面板基本样式:默认的 .am-panel 提供基本的阴影和边距,默认边框添加 .am-panel-default,内容 ...

  9. amazeui学习笔记--css(常用组件8)--列表list

    amazeui学习笔记--css(常用组件8)--列表list 一.总结 1.链接列表:就是多个链接在一起组成的列表, 使用 <ul> 结构嵌套链接列表,添加 .am-list.还是ui包 ...

随机推荐

  1. 转:perl源码审计

    转:http://www.cgisecurity.com/lib/sips.html Security Issues in Perl Scripts By Jordan Dimov (jdimov@c ...

  2. 关于latex的画图

    可以使用latex画一些简单的图 可以参考这个链接:http://www.latexstudio.net/archives/9400(PGFPlots绘图简易教程[转载])

  3. windows环境下模仿Linux环境发起curl请求

    1.到官网下载curl工具包 2.在curl.exe目录中使用(使用方式1) 解压下载后的压缩文件,通过cmd命令进入到curl.exe所在的目录. 由于博主使用的是windows 64位 的系统,因 ...

  4. Wannafly挑战赛7 C - 小Q与氪金游戏

    题目描述 “为世界上所有的美好而战!”小Q同学最近沉迷“稳固3”,为了从最新的蛋池中抽出自己喜欢的角色卡,不惜氪下重金.在这个游戏中,氪一单可以得到x个宝石,而抽一次卡需要花费y个宝石,由于游戏策划十 ...

  5. Python并发编程-进程的几个方法

    join()方法 from multiprocessing import Process import time def func(arg1,arg2): print('*'*arg1) time.s ...

  6. 【Java】SpringBoot入门学习及基本使用

    SpringBoot入门及基本使用 SpringBoot的介绍我就不多说了,核心的就是"约定大于配置",接下来直接上干货吧! 本文的实例: github-LPCloud,欢迎sta ...

  7. FastReport.Net使用:[35]奇偶行

    文本控件类型的奇偶行数据实现(普通) 1.普通的奇偶行数据主要使用报表对象的EvenStyle(偶数行样式)属性实现. 首先通过 报表-->样式 菜单打开样式编辑器,编辑几个备用样式. 样式的编 ...

  8. bzoj4556: [Tjoi2016&Heoi2016]字符串 (后缀数组加主席树)

    题目是给出一个字符串,每次询问一个区间[a,b]中所有的子串和另一个区间[c,d]的lcp最大值,首先求出后缀数组,对于lcp的最大值肯定是rank[c]的前驱和后继,但是对于这个题会出现问题,就是题 ...

  9. 把json格式的字符串转换成javascript对象或数组

      第一种 JSON.parse(jsonString) 第二种 eval("("+jsonString+")") 第三种 var obj=(function ...

  10. Ubantu14.04下编译OpenCV3.0.0以及读取图片例子

    以前一直使用opencv 2.x的版本,现在3.0的已经发布成正式版了,尝试在Linux下安装. 收集了一篇不错的经验教程: Ubuntu14.04下安装OpenCV3.0经验. 编译的过程大概需要3 ...