自从乔帮主提出retina屏以来。可练就了不少前端兄弟的像素眼，有强迫症的伙伴们日子可就煎熬了。为了画出真正的1像素边框，前端猿们也是受尽各浏览器的虐待了。

关于什么是移动端1像素边框问题，先上两张图，大家就明白了。

图1

图2

实现1PX边框的方法有很多，各有优缺点，比如通过背景图片实现、通过transform: scale(0.5)实现。本次实现的是通过VIEWPORT+rem实现的，优点是可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难、圆角阴影失效问题。缺点嘛，这方法适全新项目，如果老项目想用这种方法，改动量估计会比较大。

<span style="font-size:18px;"><html>

    <head>

        <title>1px question</title>

        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

        <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

        <style>

            html {

                font-size: 1px;

            }

            * {

                padding: 0;

                margin: 0;

            }

            .bds_b {

                border-bottom: 1px solid #ccc;

            }

            .a,

            .b {

                margin-top: 1rem;

                padding: 1rem;

                font-size: 1.4rem;

            }

            .a {

                width: 30rem;

            }

            .b {

                background: #f5f5f5;

                width: 20rem;

            }

        </style>

        <script>

            var viewport = document.querySelector("meta[name=viewport]");

            //下面是根据设备像素设置viewport

            if (window.devicePixelRatio == 1) {

                viewport.setAttribute('content', 'width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no');

            }

            if (window.devicePixelRatio == 2) {

                viewport.setAttribute('content', 'width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no');

            }

            if (window.devicePixelRatio == 3) {

                viewport.setAttribute('content', 'width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no');

            }

            var docEl = document.documentElement;

            var fontsize = 10 * (docEl.clientWidth / 320) + 'px';

            docEl.style.fontSize = fontsize;

        </script>

    </head>

    <body>

        <div class="bds_b a">下面的底边宽度是虚拟1像素的</div>

        <div class="b">上面的边框宽度是虚拟1像素的</div>

    </body>

</html></span>

想看效果的，直接将代码复制下来放服务器，用手机浏览就可以看到效果了。

【H5开发基础】移动端1像素边框问题的解决方案的更多相关文章

  1. 移动端 1px 像素边框问题的解决方案（Border.css）

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

  2. h5开发app,移动端 click 事件响应缓慢的解决方案

    造成点击缓慢的原因 从点击屏幕上的元素到触发元素的 click 事件,移动浏览器会有大约 300 毫秒的等待时间.为什么这么设计呢? 因为它想看看你是不是要进行双击(double tap)操作. 使用 ...

  3. H5开发基础之像素、分辨率、DPI、PPI

    H5开发基础之像素.分辨率.DPI.PPI  html5  阅读约 4 分钟 ​2016-09-03于坝上草原 背景知识: 目前绝大部分显示器都是基于点阵的,通过一系列的小点排成一个大矩形,通过每个小 ...

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

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

  5. 移动web开发基础（一）——像素

    这篇文章要弄清楚2个问题:一.什么是逻辑像素和物理像素:二.这两者有什么关系. 对于问题一,先抛出两个概念.我们经常使用的px就是逻辑像素,是浏览器使用的抽象单位:物理像素又和dp/pt(设备无关像素 ...

  6. stylus解决移动端1像素边框的问题

    首先 我是借用了yo框架的border和他的媒体查询组合 这两个分别是在yo>lib>core>classes>_border.scss(用来获取yo框架封装的border) ...

  7. 移动web 1像素边框

    实现方法 border-image 图片 实现 这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 <使用border-image实现类似iOS7的1px底边> ...

  8. 带你使用h5开发移动端小游戏

    带你使用h5开发移动端小游戏 在JY1.x版本中,你要做一个pc端的小游戏,会非常的简单,包括说,你要在低版本的浏览器IE8中,也不会出现明显的卡顿现象,你只需要关心游戏的逻辑就行了,比较适合逻辑较为 ...

  9. IM开发基础知识补课(七)：主流移动端账号登录方式的原理及设计思路

    1.引言 在即时通讯网经常能看到各种高大上的高并发.分布式.高性能架构设计方面的文章,平时大家参加的众多开发者大会,主题也都是各种高大上的话题——什么5G啦.AI人工智能啦.什么阿里双11分分钟多少万 ...

随机推荐

  1. 5事件DOM零级事件跟DOM二级事件

    事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...

  2. carousel

    <!DOCTYPE html> <html lang="en" ng-app="mainApp"> <head> <m ...

  3. （转）DEDECMS模板原理、模板标签学习 - .Little Hann

    本文,小瀚想和大家一起来学习一下DEDECMS中目前所使用的模板技术的原理: 什么是编译式模板.解释式模板,它们的区别是什么? 模板标签有哪些种类,它们的区别是什么,都应用在哪些场景? 学习模板的机制 ...

  4. Activity之间的数据传递（Arraylist）

    1.使用Serialiable方法 实现序列化 2.使用Parcelable方法(这是android自己封装的类) Parcel类是封装数据的容器,封装后的数据通过Intent和IPC传递     实 ...

  5. oracle问题 《经由直接路径由 EXPORT:V10.02.01 创建的导出文件 IMP-00013: 只有 DBA 才能导入由其他 DBA 导出的文件》

    问题:  经由直接路径由 EXPORT:V10.02.01 创建的导出文件 : 只有 DBA 才能导入由其他 DBA 导出的文件 解决方法:用sys 登录,给当前用户授权,授权语句:grant dba ...

  6. Swift - 21 - 字典实战和UIKit初探

    //: Playground - noun: a place where people can play import UIKit // 数据源 let colors = [ "Air Fo ...

  7. C#简单一句代码，实现pictureBox的照片另存为磁盘文件不出错

    开发人事档案系统时,一般都要利用pictureBox对人员的照片进行操作,包括选择保存照片.另存照片.删除照片,如下图: 将照片保存到数据库和从数据库中删除,网友写了很多实用代码,非常好用.但是要将p ...

  8. nodejs概论（实操篇）

    什么是模块? 模块分为原生模块(node.jsAPI提供的原生模块,在启动时已经被加载)和 文件模块(动态加载模块,主要由原生模块module来实现和完成.通过调 用node.js的require方法 ...

  9. 【USACO 2.2.1】序言页码

    [题目描述] 一类书的序言是以罗马数字标页码的.传统罗马数字用单个字母表示特定的数值,以下是标准数字表: I 1 L 50 M 1000 V 5 C 100 X 10 D 500 最多3个同样的可以表 ...

  10. jQuery toggle() 方法与实例以及代替方法。

    看<jQeury 权威指南>时看到这个toggle()方法.因为之前在慕课网学习接触过.发现两者讲的有细微的不同 以隐藏/显示目标元素效果为例,慕课网是这样讲解的 $("#cli ...