.borderOnePx{
position: relative;
}
.borderOnePx::after {
content: '';
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.borderOnePx::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
} /* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.borderOnePx::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
  

移动端1像素解决方法,根据媒体查询transform缩放的更多相关文章

  1. 移动端1px像素解决方式,从1px像素问题剖析像素及viewport

    在移动端web开发过程中,如果你对边框设置border:1px,会发现,边框在某些手机机型上面显示的1px比实际感觉会变粗,这也就是1像素问题.如下图是对桌面浏览器和移动端border设置1px的比较 ...

  2. echarts移动端字体模糊解决方法

    echarts使用canvas画图,在移动端使用rem时候,若viewport的scale被缩放,则字体会发生模糊,本人采用的解决方法是在不同的dpr下使用不同的字体大小,具体代码如下: 获取字体大小 ...

  3. 前端笔记之移动端&响应式(上)媒体查询&Bootstrap&动画库&zepto&velocity

    一.媒体(介)查询 1.1 基本语法 媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有:width.height和color(等).使用媒体查询可以在不改变 ...

  4. 移动端常用的meta标签,媒体查询以及一些样式设置《转载收藏》

    <meta name="screen-orientation" content="portrait"> <meta name="fu ...

  5. 移动端开发rem布局之less+媒体查询布局的原理步骤和心得

    rem即是以html文件中font-size的大小的倍数rem布局的原理:通过媒体查询设置不同屏幕宽度下的html的font-size大小,然后在css布局时用rem单位取代px,从而实现页面元素大小 ...

  6. 客户端向服务端传送特殊字符解决方法(检测到有潜在危险的 Request.Form 值)

    当客户端向服务端传输特殊字符时报错,错误信息如下图:

  7. 移动端300ms延迟解决方法在vue 里面的一些小坑

    话不多说上图: 至于import为什么会报错,瞅下面这个图: 总结:要搞懂个必须了解下es6的解构赋值才能在这方面装逼,网上资料一大堆自行百度.

  8. mybatis高级(2)_数据库中的列和实体类不匹配时的两种解决方法_模糊查询_智能标签

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  9. 移动端 rem单位做适配的 媒体查询节点

    @media screen and (min-width:300px){html,body,input{font-size:15px}}@media screen and (min-width:320 ...

随机推荐

  1. 超级POM

    在一个有POM的文件夹下执行: mvn help:effective-pom 会输出一个超级POM文件,可以就该文件,进行分析.

  2. Django框架架构总览

    Django框架架构总览 理解Django是如何运作的 条目创建于 2013-08-14     1464 views     服务器君一共花费 15.204 ms 进行了 4 次数据库查询,努力地为 ...

  3. 深入理解MySql事务

    事务是MySQL等关系型数据库区别于NoSQL的重要方面,是保证数据一致性的重要手段.本文将首先介绍MySQL事务相关的基础概念,然后介绍事务的ACID特性,并分析其实现原理. MySQL博大精深,文 ...

  4. 包、time、datetime、hashlib和hmac、request、re

    目录 包 包的特点 time模块 datetime模块 hashlib模块和hmac模块 hmac密钥(加盐) typing模块 request模块 正则模块 以下必须得记住 哪些做了解 包 包,这里 ...

  5. 【ZJOI2008】树的统计

    题目 一棵树上有n个节点,编号分别为1到n,每个节点都有一个权值w. 我们将以下面的形式来要求你对这棵树完成一些操作: I. CHANGE u t : 把结点u的权值改为t II. QMAX u v: ...

  6. __new__与__init__的区别

    __new__  : 控制对象的实例化过程 , 在__init__方法之前调用 __init__ : 对象实例化对象进行属性设置 class User: def __new__(cls, *args, ...

  7. select下拉框数据回显

    前台页面 <select class="select" name="operatorId" id="operatorId" style ...

  8. 【CF1247E】Rock Is Push(DP,二分)

    题意:有一个n*m的方格,每一格可能为空也可能有石头,要从(1,1)走到(n,m),每次可以往右或往下走 每次走的时候都会将自己面前的所有石头向移动方向推一格,如果碰到了边界就推不过去 问方案数模1e ...

  9. Apache编译教程

    手工编译安装Apache, 版本httpd-2.4.29(免费提供安装包,懒人福利:提供安装脚本):https://blog.51cto.com/13728740/2158576 编译安装apache ...

  10. Windows 搭建Hadoop 2.7.3开发环境

    1.安装配置Java环境 1.1.安装Windows版本的jkd应用程序 当前的系统环境是64位Windows 7,因此下载64位JDK,下载地址:http://download.oracle.com ...