半转的意思是借鉴参考，搬砖，加了一些自己的想法。

在移动端里，因为存在2倍像素的问题，所以很多时候，移动端上的1px边框并不是意义上的。从下图红色框看到dpr：2.0 ，表示1px等于2倍的物理像素。

网上找了一下，自己总结了一下。

实现方法代码如下：

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport">

 <meta content="yes" name="apple-mobile-web-app-capable">

 <meta content="black" name="apple-mobile-web-app-status-bar-style">

 <meta content="telephone=no" name="format-detection">

 <meta content="email=no" name="format-detection">

 <title>1px的边框问题</title>

 <style type="text/css">

 .line {

     height: 50px;

     width: 200px;

     line-height: 50px;

     background-color: #CCC;

     text-align: center;

     border-bottom:1px solid red;

     margin-bottom: 20px;

 } 

 .scale {

     height: 50px;

     width: 200px;

     line-height: 50px;

     background-color: #CCC;

     text-align: center;

     margin-bottom: 20px;

 }

 .scaleV2 {

     height: 50px;

     width: 200px;

     line-height: 50px;

     text-align: center;

     background-color: #CCC;

     margin-bottom: 20px;

     border-radius: 5px;

 }

 .topLine,.bottomLine,.leftLine,.rightLine,.borderLine,.radiusLine{

     position: relative;

 }

 .bottomLine:after {

     position: absolute;

     content: '';

     width: 200%;

     left: 0;

     bottom: 0;

     height: 1px;

     padding-bottom: 1px;

     background-color: red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left bottom;

     transform-origin: left bottom;

 }

 .topLine:after {

     position: absolute;

     content: '';

     width: 200%;

     left: 0;

     top: 0;

     height: 1px;

     background-color: red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left bottom;

     transform-origin: left bottom;

 }

 .leftLine:after {

     position: absolute;

     content: '';

     width: 1px;

     left: 0;

     top: 0;

     height: 200%;

     background-color: red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left bottom;

     transform-origin: left top;

 }

 .rightLine:after {

     position: absolute;

     content: '';

     width: 1px;

     right: 0;

     top: 0;

     height: 200%;

     background-color: red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: center bottom;

     transform-origin: right top;

 }

 .borderLine:after {

     position: absolute;

     content: '';

     width: 200%;

     left: 0;

     top: 0;

     height: 200%;

     border: 1px solid red;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left top;

     transform-origin: left top;

 }

 .radiusLine:after {

     position: absolute;

     content: '';

     width: 200%;

     left: 0;

     top: 0;

     height: 200%;

     border: 1px solid red;

     border-radius: 10px;

     -webkit-transform: scale(.5);

     transform: scale(.5);

     -webkit-transform-origin: left top;

     transform-origin: left top;

 }

 </style>

 </head>

 <body>

 <div class="line">1px</div>

 <div class="scale topLine">0.5px 上边框</div>

 <div class="scale bottomLine">0.5px 下边框</div>

 <div class="scale leftLine">0.5px 左边框</div>

 <div class="scale rightLine">0.5px 右边框</div>

 <div class="scale borderLine">0.5px 边框</div>

 <div class="scaleV2 radiusLine">0.5px 圆角边框</div>

 </body>

 </html>

其实还是发现有一些的问题。

就是在在圆角的情况下会有写漏空。

看了一个大神的博客，他是用这样的一种方法的。没有这样的问题。

.btn:before {

    content: '';

    position: absolute;

    top: -50%;

    bottom: -50%;

    left: -50%;

    right: -50%;

    -webkit-transform: scale(0.5);

    transform: scale(0.5);

    border-style: solid;

    border-width: 1px;

    border-color: red;

    -webkit-border-radius: 10px;

    border-radius: 10px;

}

实现.5px的圆角边框

.5px的边框，看起来看神奇，这里感谢蓝叔提供的方法。

原理：先定义1px的圆角边框，然后拉伸内容的宽度和高度为父级的2倍(边框厚度不变)，然后再使用transform:scale(0.5)缩放为原来的0.5倍

转：http://peunzhang.cnblogs.com/

[半转]1px边框 移动端的更多相关文章

  1. 移动端1px边框

    问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 ...

  2. 移动端视网膜（Retina）屏幕下1px边框线 解决方案

    原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在de ...

  3. 7种方法解决移动端Retina屏幕1px边框问题

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  4. 移动端1px边框实现

    问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像 ...

  5. 7种方法实现移动端Retina屏幕1px边框效果

    在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...

  6. 移动端1px边框问题

    用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪 ...

  7. 移动端1px边框伪类宽高计算

    移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高1 ...

  8. CSS3实现小于1px的边框(移动端)

    <!doctype html> <html lang="en"> <head> <meta content="width=dev ...

  9. 目前解决移动端1px边框最好的方法

    在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina ...

随机推荐

  1. 【Google Chrome】 Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource问题解决

    问题??打开Google Chrome浏览器报错如下: 结论  浏览器出于安全性考虑,默认对跨域访问禁止 解决方法  给浏览器添加启动参数 --allow-file-access-from-files ...

  2. 初识html5的localStorage本地存储

    一.概述 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前,这些都是 ...

  3. 浅析天猫H5站点

    前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿.艺龙.同程等与携程的移动站点竞品分析,竞品分析的目的一般是技术对比,但是更多的是业务对比,知己知彼,百战不殆:我们同时会借鉴. ...

  4. iOS字体加载三种方式

    静态加载 动态加载 动态下载苹果提供的多种字体 其他 打印出当前所有可用的字体 检查某字体是否已经下载 这是一篇很简短的文章,介绍了 iOS 自定义字体加载的三种方式. 静态加载 这个可以说是最简单最 ...

  5. git的简单理解及基础操作命令

    前端小白一枚,最近开始使用git,于是花了2天看了廖雪峰的git教程(偏实践,对于学习git的基础操作很有帮助哦),也在看<git版本控制管理>这本书(偏理论,内容完善,很不错),针对所学 ...

  6. freeswitch注册过程分析

    操作系统:debian8.5_x64freeswitch 版本 : 1.6.8 本文仅描述sip注册的简单场景,即话机直接向处于同一个局域网的fs进行注册. SIP协议的消息结构 消息框架 SIP协议 ...

  7. Spring 事务详解

    实现购买股票案例: 一.引入JAR文件: 二.开始搭建分层架构---创建账户(Account)和股票(Stock)实体类 Account: ? 1 2 3 4 5 6 7 8 9 10 11 12 1 ...

  8. 解决IE浏览器文字上面放无内容的元素选不中的方法

    <div class="md1"> <p><i>sdgsgereryeryery</i></p> <label c ...

  9. codevs 3288 积木大赛

    题目描述 Description 春春幼儿园举办了一年一度的"积木大赛".今年比赛的内容是搭建一座宽度为 n 的大厦,大厦可以看成由 n 块宽度为1的积木组成,第i块积木的最终高度 ...

  10. codevs 1245 最小的N个和

    1245 最小的N个和 http://codevs.cn/problem/1245/ 题目描述 Description 有两个长度为 N 的序列 A 和 B,在 A 和 B 中各任取一个数可以得到 N ...