对于前端开发者来说，要处理这个问题，首先要补充一个知识点，就是页面的物理像素[devicepixel]&logicalpixel[CSSpixel]设备;在我的另一篇文章中介绍了100%还原文章设计稿，有兴趣的朋友可以看看。为什么1px更厚？为什么在移动CSS中写的是1px，其实看起来比1px粗；了解设备物理像素和逻辑像素的同学应该很容易理解，其实这两个px的含义其实是不一样的，而UI设计师要求的1px是指设备的物理像素1px，以及CSS中记录的像素是逻辑像素。它们之间是有比例关系的，可以通过javascript中的window.devicePixelRatio获取，或者mediaquery的-webkit-min-device-pixel-ratio来获取。当然，比例的多少与设备有关。border在手机上达不到我们想要的效果。这是由于devicePixelRatio特性，iPhone的devicePixelRatio==2，而border-width:1px描述的是设备的独立像素，所以border放大到物理像素2px显示，在iPhone上显得更粗。移动端开发往往需要在html的header中加入如下语句：这句话定义了本页面视口的宽度为设备宽度，缩放初始值和最大缩放值均为1，禁止用户缩放。你的问题可能来了。我总是看到视口。除了知道中文名字，还有什么意思？其实就是设备屏幕上可以用来显示我们网页内容的区域。具体来说就是浏览器或者app中的webview用来显示网页的区域，但是viewport并不局限于浏览器的可见区域。大小，可大可小。体现在用户是否缩放屏幕。细心的同学应该会觉得meta标签中经常会设置user-scalable=no，意思是禁止用户缩放。那么用户缩放会产生什么影响呢？其实就是显示上的变化。当放大一倍时，CSS像素（逻辑像素）所代表的物理像素也随之放大一倍，即设备的物理像素与设备的独立像素的比例增加一倍（减小）。也许你已经明白1px变粗的原因了。视口的设置和屏幕物理分辨率是成比例的，而不是相同的。移动端的window对象有一个devicePixelRatio属性，表示设备物理像素与CSS像素的比值。在retina屏幕的iphone上，这个值为2或3，css中写的1px长度，映射到物理像素为2px或3px一样长。1px问题如何解决1.mediaquery使用devicepixelratio来缩放，并设置小数点像素IOS8已经支持带小数的px值，mediaquery有devicePixelRatio对应的queryvalue-webkit-min-device-pixel-ratio，css可以这样写.border{border:1pxsolid#999}@mediascreenand(-webkit-min-device-pixel-ratio:2){.border{border:0.5pxsolid#999}}@mediascreenand(-webkit-min-device-pixel-ratio:3){.border{border:0.333333pxsolid#999}}【缺点】对设备有要求，小数像素的兼容性目前是贫穷的。2.Viewport+rem方案本方案是对上述方案的优化。整体思路是利用viewport+rem+js动态修改页面的缩放比例，实现小于1像素的显示。页面初始化时，在head中引入原来的默认状态如下：接下来的任务就是动态修改js的缩放比例，实现设置rem根元素的字体大小varviewport=document.querySelector("meta[name=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.333333333,maximum-scale=0.333333333,minimum-scale=0.333333333,user-scalable=no')}vardocEl=document.documentElement;varfontsize=10*(docEl.clientWidth/320)+'px';docEl.style.fontSize=fo大小；【缺点】认为scaling涉及到全局rem单位，比较适合新项目，对老项目可能涉及较多的改动3.设置border-imagescheme。border-image-1px{border-width:1px0px;-webkit-border-image:url("border.png")20拉伸；border-image:url("border.png")20stretch;}【解释】border-width指定边框的宽度，可以设置四个值分别为toprightbottomleftborder-width:topright左下方。border-image这个例子的意思是：裁剪距离图片顶部（属性值没有单位）2px处的border图片为上边框，裁剪下方2px为下边框。左右距离为0像素的裁剪图像没有边框，拉伸显示的组合为：边框图像中，裁剪图像上下各2像素的宽度作为上下边框，并显示在宽度为1像素的边框空间中。左右没有边界。注意这里的1pixel比较特殊，指的是物理像素，而通常设置的长宽1px代表的是逻辑像素（此观点仅供个人理解）。你可能不明白，cropborder是什么鬼？为什么还要裁剪它？border-image确实是一个比较难理解的属性，在w3c里面看了就更加迷茫了。w3c的内容太精炼了，但是解释一点都不够。所以这里张新旭老师对border-image进行了详细的讲解，特别是了解一下九方格的切割方法。当然这个方法是引入图片的，我们也可以把图片换成base64。border-image-1px{border-width:1px0px;-webkit-border-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAECAYAAABP2FU6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAKTWlDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVN3WJP3Fj7f92UPVkLY8LGXbIEAIiOsCMgQWaIQkgBhhBASQMWFiApWFBURnEhVxILVCkidiOKgKLhnQYqIWotVXDjuH9yntX167+3t+9f7vOec5/zOec8PgBESJpHmomoAOVKFPDrYH49PSMTJvYACFUjgBCAQ5svCZwXFAADwA3l4fnSwP/wBr28AAgBw1S4kEsfh/4O6UCZXACCRAOAiEucLAZBSAMguVMgUAMgYALBTs2QKAJQAAGx5fEIiAKoNAOz0ST4FANipk9wXANiiHKkIAI0BAJkoRyQCQLsAYFWBUiwCwMIAoKxAIi4EwK4BgFm2MkcCgL0FAHaOWJAPQGAAgJlCLMwAIDgCAEMeE80DIEwDoDDSv+CpX3CFuEgBAMDLlc2XS9IzFLiV0Bp38vDg4iHiwmyxQmEXKRBmCeQinJebIxNI5wNMzgwAABr50cH+OD+Q5+bk4eZm52zv9MWi/mvwbyI+IfHf/ryMAgQAEE7P79pf5eXWA3DHAbB1v2upWwDaVgBo3/ldM9sJoFoK0Hr5i3k4/EAenqFQyDwdHAoLC+0lYqG9MOOLPv8z4W/gi372/EAe/tt68ABxmkCZrcCjg/1xYW52rlKO58sEQjFu9+cj/seFf/2OKdHiNLFcLBWK8ViJuFAiTcd5uVKRRCHJleIS6X8y8R+W/QmTdw0ArIZPwE62B7XLbMB+7gECiw5Y0nYAQH7zLYwaC5EAEGc0Mnn3AACTv/mPQCsBAM2XpOMAALzoGFyolBdMxggAAESggSqwQQcMwRSswA6cwR28wBcCYQZEQAwkwDwQQgbkgBwKoRiWQRlUwDrYBLWwAxqgEZrhELTBMTgN5+ASXIHrcBcGYBiewhi8hgkEQcgIE2EhOogRYo7YIs4IF5mOBCJhSDSSgKQg6YgUUSLFyHKkAqlCapFdSCPyLXIUOY1cQPqQ28ggMor8irxHMZSBslED1AJ1QLmoHxqKxqBz0XQ0D12AlqJr0Rq0Hj2AtqKn0UvodXQAfYqOY4DRMQ5mjNlhXIyHRWCJWBomxxZj5Vg1Vo81Yx1YN3YVG8CeYe8IJAKLgBPsCF6EEMJsgpCQR1hMWEOoJewjtBK6CFcJg4Qxwicik6hPtCV6EvnEeGI6sZBYRqwm7iEeIZ4lXicOE1+TSCQOyZLkTgohJZAySQtJa0jbSC2kU6Q+0hBpnEwm65Btyd7kCLKArCCXkbeQD5BPkvvJw+S3FDrFiOJMCaIkUqSUEko1ZT/lBKWfMkKZoKpRzame1AiqiDqfWkltoHZQL1OHqRM0dZolzZsWQ8ukLaPV0JppZ2n3aC/pdLoJ3YMeRZfQl9Jr6Afp5+mD9HcMDYYNg8dIYigZaxl7GacYtxkvmUymBdOXmchUMNcyG5lnmA+Yb1VYKvYqfBWRyhKVOpVWlX6V56pUVXNVP9V5qgtUq1UPq15WfaZGVbNQ46kJ1Bar1akdVbupNq7OUndSj1DPUV+jvl/9gvpjDbKGhUaghkijVGO3xhmNIRbGMmXxWELWclYD6yxrmE1iW7L57Ex2Bfsbdi97TFNDc6pmrGaRZp3mcc0BDsax4PA52ZxKziHODc57LQMtPy2x1mqtZq1+rTfaetq+2mLtcu0W7eva73Vwn??UCdLJ31Om0693UJuja6UbqFutt1z+o+02PreekJ9cr1Dund0Uf1bfSj9Rfq79bv0R83MDQINpAZbDE4Y/DMkGPoa5hpuNHwhOGoEctoupHEaKPRSaMnuCbuh2fjNXgXPmasbxxirDTeZdxrPGFiaTLbpMSkxeS+Kc2Ua5pmutG003TMzMgs3KzYrMnsjjnVnGueYb7ZvNv8jYWlRZzFSos2i8eW2pZ8ywWWTZb3rJhWPlZ5VvVW16xJ1lzrLOtt1ldsUBtXmwybOpvLtqitm63Edptt3xTiFI8p0in1U27aMez87ArsmuwG7Tn2YfYl9m32zx3MHBId1jt0O3xydHXMdmxwvOuk4TTDqcSpw+lXZxtnoXOd8zUXpkuQyxKXdpcXU22niqdun3rLleUa7rrStdP1o5u7m9yt2W3U3cw9xX2r+00umxvJXcM970H08PdY4nHM452nm6fC85DnL152Xlle+70eT7OcJp7WMG3I28Rb4L3Le2A6Pj1l+s7pAz7GPgKfep+Hvqa+It89viN+1n6Zfgf8nvs7+sv9j/i/4XnyFvFOBWABwQHlAb2BGoGzA2sDHwSZBKUHNQWNBbsGLww+FUIMCQ1ZH3KTb8AX8hv5YzPcZyya0RXKCJ0VWhv6MMwmTB7WEY6GzwjfEH5vpvlM6cy2CIjgR2yIuB9pGZkX+X0UKSoyqi7qUbRTdHF09yzWrORZ+2e9jvGPqYy5O9tqtnJ2Z6xqbFJsY+ybuIC4qriBeIf4RfGXEnQTJAntieTE2MQ9ieNzAudsmjOc5JpUlnRjruXcorkX5unOy553PFk1WZB8OIWYEpeyP+WDIEJQLxhP5aduTR0T8oSbhU9FvqKNolGxt7hKPJLmnVaV9jjdO31D+miGT0Z1xjMJT1IreZEZkrkj801WRNberM/ZcdktOZSclJyjUg1plrQr1zC3KLdPZisrkw3keeZtyhuTh8r35CP5c/PbFWyFTNGjtFKuUA4WTC+oK3hbGFt4uEi9SFrUM99m/ur5IwuCFny9kLBQuLCz2Lh4WfHgIr9FuxYji1MXdy4xXVK6ZHhp8NJ9y2jLspb9UOJYUlXyannc8o5Sg9KlpUMrglc0lamUycturvRauWMVYZVkVe9ql9VbVn8qF5VfrHCsqK74sEa45uJXTl/VfPV5bdra3kq3yu3rSOuk626s91m/r0q9akHV0IbwDa0b8Y3lG19tSt50oXpq9Y7NtM3KzQM1YTXtW8y2rNvyoTaj9nqdf13LVv2tq7e+2Sba1r/dd3vzDoMdFTve75TsvLUreFdrvUV99W7S7oLdjxpiG7q/5n7duEd3T8Wej3ulewf2Re/ranRvbNyvv7+yCW1SNo0eSDpw5ZuAb9qb7Zp3tXBaKg7CQeXBJ9+mfHvjUOihzsPcw83fmX+39QjrSHkr0jq/dawto22gPaG97+iMo50dXh1Hvrf/fu8x42N1xzWPV56gnSg98fnkgpPjp2Snnp1OPz3Umdx590z8mWtdUV29Z0PPnj8XdO5Mt1/3yfPe549d8Lxw9CL3Ytslt0utPa49R35w/eFIr1tv62X3y+1XPK509E3rO9Hv03/6asDVc9f41y5dn3m978bsG7duJt0cuCW69fh29u0XdwruTNxdeo94r/y+2v3qB/oP6n+0/rFlwG3g+GDAYM/DWQ/vDgmHnv6U/9OH4dJHzEfVI0YjjY+dHx8bDRq98mTOk+GnsqcTz8p+Vv9563Or59/94vtLz1j82PAL+YvPv655qfNy76uprzrHI8cfvM55PfGm/K3O233vuO+638e9H5ko/ED+UPPR+mPHp9BP9z7nfP78L/eE8/sl0p8zAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAAcSURBVHjaBMEBDQAADMMgckv1r20H1WxzoNoPAER9BjAKc4kUAAAAAElFTkSuQmCC")20stretch;border-image:url('如上');}【缺点】需要做图片，圆角可能会显得模糊百度糯米团就是用的这个方案border{background-image:linear-gradient(180deg,red,red50%,transparent50%),linear-gradient(270deg,red,red50%,transparent50%),线性渐变(0deg,red,red50%,transparent50%)),linear-gradient(90deg,red,red50%,transparent50%);background-size:100%1px,1px100%,100%1px,1px100%;background-repeat:no-repeat;background-position:top,righttop,bottom,lefttop;padding:10px;几个部分（百分比控制）实现小于1像素的效果【说明】linear-gradient指定线性渐变，接受大于等于3个参数，第一个是渐变旋转角度，第二个是渐变的颜色和位置。（百分比）都变成这个颜色。这个例子中，第一句是渐变方向为r旋转180度，即从上到下（默认是从下到上0度），渐变从红色开始，到50%的位置还是红色，然后逐渐继承父元素的颜色。【缺点】因为每个边框都是用线性渐变色实现的，所以无法实现圆角。5.box-shadow方案也可以使用阴影来实现。颜色不好控制div{-webkit-box-shadow:01px1px-1pxrgba(0,0,0,0.5);}【理解】我们来回顾一下box-shadow属性的用法。box-shadow:h-shadowv-shadow[blur][spread][color][inset];参数表示：水平阴影位置、垂直阴影位置、模糊距离、阴影大小、阴影颜色、将外阴影改为内阴影，后四项可选。为什么在这个例子中阴影大小设置为负数？设置为-1px是让阴影尺寸略小于div元素的尺寸，这样左右两侧的阴影就不会暴露，只有底部有阴影效果。从而实现分界线效果（单边边框）6.transform:scale(0.5)方案-推荐：非常灵活上面的用法中，没有逃避的思路，就是把1px缩小到0.5px来显示，然而。并非所有设备或浏览器都支持0.5px，请考虑使用媒体查询或视口对其进行缩放。其实1-pixel的问题基本都是在设置边框或者分割线的时候出现的，场景没有覆盖到全局样式。因此，直接缩放需要设置的元素才是我们真正需要的。tranform可以达到这个要求。设置height：1px，根据mediaquery和transform缩放到相应的大小。div{高度：1px;背景：#000；-webkit-transform:scaleY(0.5);-webkit-transform-origin:00;overflow:hidden;}2.使用::after和::befor设置border-bottom:1pxsolid#000，然后scale-webkit-transform:scaleY(0.5);可以实现两条边线的需求div::after{content:'';width:100%;border-bottom:1pxsolid#000;transform:scaleY(0.5);}3.使用::after设置边框：1pxsolid#000;宽度：200%；height:200%,然后缩放scaleY(0.5);缺点是给按钮加上active比较麻烦。.div::after{内容：'';宽度：200%；高度：200%；位置：绝对；顶部：0；左：0；边框：1px实心#bfbfbf；边界半径：4px；-webkit-transform:scale(0.5,0.5);变换：比例（0.5,0.5）；-webkit-transform-origin:topleft;}6.5媒体查询+transfrom对方方案1的优化/*2倍屏*/@mediaonlyscreenand(-webkit-min-device-pixel-ratio:2.0){.border-bottom::after{-webkit-transform:scaleY(0.5);变换：scaleY(0.5)；}}/*3倍屏*/@mediaonlyscreenand(-webkit-min-device-pixel-ratio:3.0){.border-bottom::after{-webkit-transform:scaleY(0.33);变换：scaleY(0.33)；}}来自：https://www.jianshu.com/p/fa6...
