移动WEB开发小知识

最新推荐文章于 2023-12-29 11:34:38 发布

Sam_Wsp

最新推荐文章于 2023-12-29 11:34:38 发布

阅读量116

点赞数

分类专栏： IT 文章标签：移动WEB

本文链接：https://blog.csdn.net/Sam_Wsp/article/details/102627064

版权

IT 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一.屏幕

屏幕尺寸实际上指的是屏幕对角线的长度，而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数。

二.长度单位

可以使用px（像素）、em、pt（点）、in（英寸）、cm（厘米）做为长度单位，最常用px（像素）做为长度单位；

三.像素密度

DPI（Dots Per Inch）是印刷行业中用来表示打印机每英寸可以喷的墨汁点数，计算机显示设备从打印机中借鉴了DPI的概念，由于计算机显示设备中的最小单位不是墨汁点而是像素，所以用PPI（Pixels PerInch）值来表示屏幕每英寸的像素数量，我们将PPI、DPI都称为像素密度，但PPI应用更广泛，DPI在Android设备比较常见。

屏幕尺寸固定时，当PPI 越大，像素的实际大小就会越小，画面越精细，当PPI越小，像素实际大小就越大。

四.设备独立像素

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

dp（或pt）和px并不总是绝对的倍数关系（并不总能保证能够整除），而是window.devicePixelRatio ~= 物理像素/独立像素。

五.像素

1.物理像素指的是屏幕渲染图像的最小单位，属于屏幕的物理属性，不可人为进行改变，其值大小决定了屏幕渲染图像的品质。

// 获取屏幕的物理像素尺寸
window.screen.width;
window.screen.height；

// 以像素计，屏幕的大小
    var screenWidth = window.screen.width;
    var screenHeight = window.screen.height;
    console.log('屏幕的宽度为: ' + screenWidth);
    console.log('屏幕的高度为: ' + screenHeight);

2.CSS像素，与设备无关像素，指的是通过CSS进行网页布局时用到的单位，其默认值(PC端)是和物理像素保持一致的（1个单位的CSS像素等于1个单位的物理像素），但是我们可通缩放来改变其大小。

<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>