移动端1px边框制作

最新推荐文章于 2022-04-19 17:35:31 发布

ime33

最新推荐文章于 2022-04-19 17:35:31 发布

阅读量547

点赞数 1

分类专栏：前端布局文章标签： ime33 border 移动端一像素 transform

本文链接：https://blog.csdn.net/ime33/article/details/67640170

版权

前端布局专栏收录该内容

25 篇文章 0 订阅

订阅专栏

未经允许，不得转载！！

水平有限，欢迎交流、指正！！

关于设备像素比（devicePixelRatio）

所谓设备像素比（devicePixelRatio[dpr]）指的就是物理像素(physical pixel)和独立像素(device-independent pixels [dips])的比例。

物理像素：就是我们经常所说的分辨率，如iphone 6 的分辨率就是750x1334

独立像素：就是手机的实际视窗，如iphone 6的视窗就是375x667

当devicePixelRatio值等于1时（也就是最小值），那么它普通显示屏

当devicePixelRatio值大于1(通常是1.5、2.0)，那么它就是高清显示屏。

一、利用媒体查询+伪类/边框方法（放到手机浏览，如：http://192.168.2.104/xingfang/index01.html）

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>移动端1像素制作方法</title>
        <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 
        <style type="text/css">
            *{padding: 0;margin: 0}
            h3{padding: 15px 0;text-align: center;font-size: 16px;background: #eee}
            .demo{width: 100%;height: 30px;line-height: 30px;text-align: center;font-size: 14px;margin-top: 15px;color: #000;position: relative;}
            .demo1:before,.demo3:before,.demo4:before{content: "";display: block;width: 100%;height: 1px;background: #eee;position: absolute;left: 0;right: 0;top: 0}
            .demo2:before{content: "";display: block;width: 100%;border-top: 1px solid #eee;position: absolute;left: 0;right: 0;top: 0}
            .demo1:after,.demo2:after,.demo3:after,.demo4:after{content: "";display: block;width: 100%;height: 1px;background: #eee;position: absolute;left: 0;right: 0;bottom: 0}
            @media only screen and (-webkit-min-device-pixel-ratio:1.5){
                .phone:before{/*媒体查询 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
                    transform:scaleY(0.7);
                    -webkit-transform:scaleY(0.7);
                }
                .phone:after{/*媒体查询 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
                    transform:scaleY(0.7);
                    -webkit-transform:scaleY(0.7);
                }
            }
            @media only screen and (-webkit-min-device-pixel-ratio:2){
                .phone:before{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
                    transform:scaleY(0.5);
                    -webkit-transform:scaleY(0.5);
                }
                .phone:after{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
                    transform:scaleY(0.5);
                    -webkit-transform:scaleY(0.5);
                }
            }

            @media only screen and (-webkit-min-device-pixel-ratio:1.5){
                .phoneborder:before{/*媒体查询 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
                    transform:scaleY(0.7);
                    -webkit-transform:scaleY(0.7);
                }
                .phoneborder:after{/*媒体查询 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
                    transform:scaleY(0.7);
                    -webkit-transform:scaleY(0.7);
                }
            }
            @media only screen and (-webkit-min-device-pixel-ratio:2){
                .phoneborder:before{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
                    transform:scaleY(0.5);
                    -webkit-transform:scaleY(0.5);
                }
                .phoneborder:after{/* 高清显示屏(设备像素比例大于等于1.5)使用2倍图  */
                    transform:scaleY(0.5);
                    -webkit-transform:scaleY(0.5);
                }
            }
        </style>
    </head>
    <body>
        <h3>移动端1像素制作方法</h3>
        <div class="demo demo1">demo1原版高度height</div>
        <div class="demo demo2">demo2原版边框border</div>

        <div class="demo demo3 phone">移动端demo3高度height设置的1px</div>
        <div class="demo demo4 phoneborder">移动端demo4边框border的1px</div>
    </body>
</html>

效果：