您的位置：首页 > 移动开发

how to make 1px border

2017-02-28 23:23 246 查看
    在移动端项目中，我们常常用到1px的边框。当我们在样式中直接写入border-bottom：1px solid #000;之后，在浏览器中、浏览器模拟的手机模式下，看到的效果确实是1px。但是在真机里，由于物理像素与实际像素的关系，我们往往直接写入的1px在设备像素比（device-pixel-ratio，不清楚的同学可以参阅张鑫旭的这篇文章设备像素比devicePixelRatio简单介绍）为2的手机里，呈现的是2px的物理像素。

    那么我们如何在移动端中也让边框呈现出真实的1px呢？

    我们可以利用伪类（:before，:after)创建出来一个空元素，利用“父相子绝”定位于该元素的某个位置，然后设置该伪类空元素的边框;再利用媒体查询（不懂的自行百度），判断设备像素比，将其边框在Y轴上进行相应的缩放，以达到实现真实的1px边框。

以下是我用常见的方式写的。如果你擅长less或者sass或者stylus，那更方便了。命名成一个公共的类名或变量，哪里用到哪里放。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1px border</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,user-scalable=yes" />
<style type="text/css">
/*
* 我meta标签中设置的最大缩放比例为2，方便你将页面放大2倍之后观察变化
* 用手机浏览时，扫描二维码，将下面的代码注释放开观察，然后再注释，再观察，就那么一瞬间，可以看到
* 边框宽度确实发生了变化
*
* */
#father{
width: 300px;height: 300px;background: pink;
position: relative;
}
.border-1px:after{
display: block;
position: absolute;
left: 0;
/*bottom: 0;定位到下部(下边框)*/
top:0;/*定位到上部(上边框)*/
width:100%;/*上下边框时，撑开到父元素的宽度*/
border-top: 1px solid blue;
/*height: 100%;左右边框时，撑开到父元素的高度
border-left:1px solid blue;*/
content:' ';
}
/*@media(-webkit-min-device-pixel-ratio: 1.5){
.border-1px:after{
border-top-color: brown;
-webkit-tansform:scaleY(0.7);
transform:scaleY(0.7);
}
}
@media(-webkit-min-device-pixel-ratio: 2){
.border-1px:after{
border-top-color: brown;
-webkit-tansform:scaleY(0.5);
transform:scaleY(0.5);
}
}*/
</style>
</head>
<body>
<div id="father" class="border-1px">我的边框是1px</div>
</body>
</html>



                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                1px边框
                                                移动端
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航