1px边框问题
当我们 css 里写的 1px 的时候，由于它是逻辑像素，导致我们的逻辑像素根据这个设备像素比（dpr）去映射到设备上就为 2px，或者 3px，由于每个设备的屏幕尺寸不一样
，就导致每个物理像素渲染出来的大小也不同（记得上面的知识点吗，设备的像素大小是不固定的），这样如果在尺寸比较大的设备上，1px 渲染出来的样子相当的粗矿，这
就是经典的一像素边框问题。
解决方案
核心思路，就是在 web 中，浏览器为我们提供了 window.devicePixelRatio 来帮助我们获取 dpr。在 css 中，可以使用媒体查询 min-device-pixel-ratio，区分 dpr：我们根
据这个像素比，来算出他对应应该有的大小，但是暴露个非常大的兼容问题。
其中 Chrome 把 0.5px 四舍五入变成了 1px，而 firefox/safari 能够画出半个像素的边，并且 Chrome 会把小于 0.5px 的当成 0，而 Firefox 会把不小于 0.55px 当成 1px
，Safari 是把不小于 0.75px 当成 1px，进一步在手机上观察 iOS 的 Chrome 会画出 0.5px 的边，而安卓(5.0)原生浏览器是不行的。所以直接设置 0.5px 不同浏览器的差异
比较大，并且我们看到不同系统的不同浏览器对小数点的 px 有不同的处理。所以如果我们把单位设置成小数的 px 包括宽高等，其实不太可靠，因为不同浏览器表现不一样
。
transform: scale(0.5) 方案
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:00;
overflow: hidden;
}
css 根据设备像素比媒体查询后的解决方案
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
如何适配
viewport
添加一个适配meta标签
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
适配方法
rem适配
rem 的布局需要引入阿里早期开源的移动端适配方案flexible.js，引用后在页面上统一使用rem来布局。
flexible原理
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
rem 是相对于 html 节点的 font-size 来做计算的。所以在页面初始话的时候给根元素设置一个 font-size，接下来的元素就根据 rem 来布局，这样就可以保证在页面大小变
化时，布局可以自适应。
vw,vh布局
vh、vw 方案即将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分为 100 份。
webpack 解析 css 的时候用 postcss-loader 有个 postcss-px-to-viewport 能自动实现 px 到 vw 的转化
{
loader: 'postcss-loader',
options: {
plugins: ()=>[
require('autoprefixer')({
browsers: ['last 5 versions']
}),
require('postcss-px-to-viewport')({
viewportWidth: 375, //视口宽度（数字)
viewportHeight: 1334, //视口高度（数字）
unitPrecision: 3, //设置的保留小数位数（数字）
viewportUnit: 'vw', //设置要转换的单位（字符串）
selectorBlackList: ['.ignore', '.hairlines'], //不需要进行转换的类名（数组）
minPixelValue: 1, //设置要替换的最小像素值（数字）
mediaQuery: false//允许在媒体查询中转换px（true/false）
})
]
}
px为主，vx和vxxx（vw/vh/vmax/vmin）为辅，搭配flex布局
考虑到用户需求方面，比较推荐flex弹性布局。
（批注：西安宏博网络科技有限公司，业务包含西安高端网站建设和西安高端网站制作策划等。对于客户的网站，无论是改版还是重做，我们都会给予相应的建议和改进方法
，确保用户网站在后期的运营能让客户满意。至于其他问题可以进入【http://www.hooboo.cc/】来了解咨询。）
