web关于像素的操作

获取设备独立像素比例值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取独立像素与物理像素比例值</title>
</head>
<body>
<script>
    // 像素和设备独立像素的一个关系
    alert(window.devicePixelRatio);
</script>
</body>
</html>

获取设备的物理像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // 以像素计，屏幕的大小
    var screenWidth = window.screen.width;
    var screenHeight = window.screen.height;
    console.log('屏幕的宽度为: ' + screenWidth);
    console.log('屏幕的高度为: ' + screenHeight);
</script>
</body>
</html>

css像素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS像素</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #F7F7F7;
            /*height: 1400px;*/
        }
        .box {
            width: 1152px;
            height: 120px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

别废话,拿你代码给我看。