.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. git概述(二)

    分支管理 分支在实际中有什么用呢?假设你准备开发一个新功能,但是需要两周才能完成,第一周你写了50%的代码,如果立刻提交,由于代码还没写完,不完整的代码库会导致别人不能干活了.如果等代码全部写完再一次 ...

  2. git-bash下, 启动sshd

    今天发现git-shell下居然有sshd.exe, 尝试了一下,居然起来了.在windiwos下起sshd也是如此简单. #先编辑C:\Program Files (x86)\Git\etc\ssh ...

  3. vue 常见错的可能原因

    标签或者组件名写错 Unknown custom element: <h> - did you register the component correctly? For recursiv ...

  4. watch和computed

    watch和computed都是以Vue的依赖追踪机制为基础的,它们都试图处理这样一件事情:当某一个数据(称它为依赖数据)发生变化的时候,所有依赖这个数据的“相关”数据“自动”发生变化,也就是自动调用 ...

  5. 进阶:python3实现 插入排序

    一图胜千言,插入排序的核心逻辑如下: 将数据分成两半,前一半是已排好序的,后一半是待排序的 每次取后一半中的第一个数,在已排序的一半中,逆序依次比较,找到要插入的位置 记录插入的位置,在最后判断是否需 ...

  6. Kaggle 入门资料

    kaggle入门之如何使用 - CSDN博客 http://blog.csdn.net/mdjxy63/article/details/78221955 kaggle比赛之路(一) -- 新手注册账号 ...

  7. 大数据笔记(二十)——NoSQL数据库之MemCached

    一.为什么要把数据存入内存? 1.原因:快2.常见的内存数据库 (*)MemCached:看成Redis的前身,严格来说Memcached的不能叫数据库,原因:不支持持久化 (*)Redis:内存数据 ...

  8. 大数据笔记(三)——Hadoop2.0的安装与配置

    一.Hadoop安装部署的预备条件 准备:1.安装Linux和JDK. 安装JDK 解压:tar -zxvf jdk-8u144-linux-x64.tar.gz -C ~/training/ 设置环 ...

  9. How to run a function when the page is loaded?

    How to run a function when the page is loaded? window.onload = codeAddress; should work - here's a d ...

  10. Ta还没有分享呢,过段时间再来看看吧~ 解决办法

    自己摸索出来的.只能查看以前分享的奥.   找到要查看用户的id号   利用特百度搜索工具实现检索 http://www.tebaidu.com/user--1.html 将红字部分替换为刚才复制的u ...