.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. 负载均衡(二)DNS负载均衡

    一.DNS原理及解析过程详解 相信大家在平时工作中都离不开DNS解析,DNS解析是互联网访问的第一步,无论是使用笔记本浏览器访问网络还是打开手机APP的时候,访问网络资源的第一步必然要经过DNS解析流 ...

  2. pyqt5-QAbstractScrollArea滚动条

    继承  QObject-->QWidget-->QFrame-->QAbstractScrollArea 是抽象类 import sys from PyQt5.QtWidgets i ...

  3. LeetCode--102--二叉树的层次遍历(python)

    给定一个二叉树,返回其按层次遍历的节点值. (即逐层地,从左到右访问所有节点). 例如:给定二叉树: [3,9,20,null,null,15,7], 3    / \  9 20  / \ 15 7 ...

  4. LeetCode 1143 最长公共子序列

    链接:https://leetcode-cn.com/problems/longest-common-subsequence 给定两个字符串 text1 和 text2,返回这两个字符串的最长公共子序 ...

  5. pytest-生成测试报告

    import pytest """ 使用pytest编写用例,必须遵守以下规则: (1)测试文件名必须以"test_"开头或者"_test& ...

  6. wepy 中文乱码

    <view class="loginTitle"> <view class="{{currentTab==0?'select':'default'}}& ...

  7. mysql CHECK约束 语法

    mysql CHECK约束 语法 作用:CHECK 约束用于限制列中的值的范围. 直线电机 说明:如果对单个列定义 CHECK 约束,那么该列只允许特定的值.如果对一个表定义 CHECK 约束,那么此 ...

  8. mysql OR运算符 语法

    mysql OR运算符 语法 作用:在 WHERE 子语句中把两个或多个条件结合起来. 语法:SELECT * FROM 表名 WHERE 字段1 运算符 值 OR 字段2 运算符 值 说明:如果第一 ...

  9. Java——常用类(StringBuffer)

    [StringBuffer]   <1>java.lang.StringBuffer代表可变的字符序列. <2>StringBuffer和String类似,但是StringBu ...

  10. codevs 4064 组合 x

    很久之前发过啦~不过删掉了...再发一下 4064 组合 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 组合就 ...