1px 边框问题

最新推荐文章于 2024-04-28 16:25:19 发布

春雨惊春.

最新推荐文章于 2024-04-28 16:25:19 发布

阅读量802

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_53979554/article/details/118079309

版权

文章目录

前言
一、方法一：设置单独的元素表示边框
- 步骤：
- 缺点：
二、方法二：缩放整体边框
- 步骤：
- 缺点：
总结

前言

高清屏幕下 1px 会对应更多个物理像素，所以 1px 宽度的边框看起来会比较粗。解决方法如下：

一、方法一：设置单独的元素表示边框

步骤：

边框使用伪类元素或单独的元素实现
在高清屏幕时，设置缩放

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    <title>1px 边框问题(方法一)</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
        }
        #box1{
            background-color: pink;
            border-bottom: 1px solid black;
        }
        #box2{
            position: relative;
            background-color: #bfa;
            margin-top: 10px;
        }
        #box2::before{
            content: ' ';
            position: absolute;
            left: 0;
            top: -1px;
            width: 100%;
            height: 1px;
            background-color: black;
        }
        @media (-webkit-max-device-pixel-ratio: 2) {
            #box2::before{
                transform: scaleY(0.5);
            }
        }
        @media (-webkit-max-device-pixel-ratio: 3) {
            #box2::before{
                transform: scaleY(0.3333);
            }
        }
    </style>

</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>

执行结果如图：
在这里插入图片描述

缺点：

在不同的移动端设备的最大像素比属性 -webkit-max-device-pixel-ratio 值不同，如果用这种方法，需要为每一种设备设置缩放比例。

二、方法二：缩放整体边框

步骤：

使元素整体缩小，放大布局视口，使元素看起来变小，如：假设屏幕像素比dpr=2，则设置initial-scale=0.5（initial-scale = 设备独立像素 / 布局视口宽度）
利用 rem 将元素内容放大
计算正确的 font-size 值，将元素大小改回正确大小

示例：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>1px 边框问题(方法二)</title>
    <style type="text/css">
        #box1{
            width: 4rem;
            height: 4rem;
            background-color: pink;
            border-bottom: 1px solid black;
        }
    </style>
</head>
<body>
<div id="box1"></div>
<script type="text/javascript">
    //元素整体缩小 调整布局视口的默认缩放比例 initial-scale = 设备独立像素/布局视口宽度 , 如设置 iPhone 6 的 initial-scale = 375/750
    //获取屏幕像素比
    var dpr = window.devicePixelRatio;
    //计算 initial-scale 的值
    var initialScale = 1/dpr;
    //获取 meta 标签
    var meta = document.querySelector("meta[name=viewport]");
    //设置 content 属性 , 使元素整体缩小
    meta.content="width=device-width, user-scalable=no, initial-scale="+initialScale;

    //设置 font-size , 使元素内容放大
    var fontSize =50;
    document.documentElement.style.fontSize = fontSize +'px';

    //计算正确的 font-size 值 , 将元素大小改回正确的大小
    var newFontSize = fontSize*dpr;
    document.documentElement.style.fontSize = newFontSize +'px';
    window.onresize = function(){
        var dpr = window.devicePixelRatio;
        var initialScale = 1/dpr;
        var meta = document.querySelector("meta[name=viewport]");
        meta.content="width=device-width, user-scalable=no, initial-scale="+initialScale;

        var fontSize =50;
        document.documentElement.style.fontSize = fontSize +'px';

        var newFontSize = fontSize*dpr;
        document.documentElement.style.fontSize = newFontSize +'px';
    }
</script>
</body>
</html>

执行结果对比如图：
在这里插入图片描述

缺点：

需要根据不同的 fontSize 值设置不同的 rem 单位。

总结

对比两种方法，我觉得还是第二种方式更方便。移动设备种类繁多，如果用第一种方式难免会有遗漏掉的；但是第二种方式只需要注意将 font-size 值的关联控制好，就可以自动适配不同设备的屏幕。

如图所示，第一种方式换一种设备就会出问题，但第二种方式会自动进行屏幕适配：

在这里插入图片描述

（全文完）

春雨惊春.

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
1px 边框问题

文章目录前言一、方法一：设置单独的元素表示边框步骤：缺点：二、方法二：缩放整体边框步骤：缺点：总结前言高清屏幕下 1px 会对应更多个物理像素，所以 1px 宽度的边框看起来会比较粗。解决方法如下：一、方法一：设置单独的元素表示边框步骤：边框使用伪类元素或单独的元素实现在高清屏幕时，设置缩放示例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫