zoukankan      html  css  js  c++  java
  • 设备像素比(devicePixelRatio)

    前言
      设备像素比(devicePixelRatio):设备物理像素与设备独立像素的比值。可以通过window.devicePixelRadio来获取。
      设备物理像素:设备能显示的最小单位。
      设备独立像素:独立于设备的用于逻辑上衡量像素的单位。
      如果设备总是以物理像素来显示内容,可能导致内容太小而看不清。浏览器就会对内容做一次放大后再渲染。这个放大比例就是设备像素比。
      当我们进行浏览器缩放时,其实就是在改变浏览器的设备像素比。
    PPI
    在显示设备中,PPI(pixel per inch)单位英寸的像素数,代表屏幕的像素密度。
    当PPI越高时在同一尺寸的屏幕上能显示更多的像素,也能够展现更多的画面细节。
     PPI的计算:屏幕的物理像素除以物理尺寸。
    PPI过高的问题:相同的图片素材,在越高的设备上会显示得越小(PPI提高一倍,图片在设备中显示小了4倍):
    CSS像素
    前端开发时,用来控制元素样式的单位像素,称为CSS像素。
    浏览器默认情况下,CSS像素和屏幕像素1:1:
    当页面放大时,CSS像素被拉伸,1个CSS像素大于1个屏幕像素:
  • 相关阅读:
    粘性固定 position:sticky
    vue组件样式scoped
    vue组件结构
    vue根据路由判断所在的内容
    配置系统变量
    div中放入一个img元素导致div高度会多出几个像素
    button标签设置line-height问题
    Netty学习——protoc的新手使用流程
    Netty学习——Google Protobuf的初步了解
    Netty学习——Google Protobuf使用方式分析和环境搭建
  • 原文地址:https://www.cnblogs.com/tyxloveyfq/p/4323603.html
Copyright © 2011-2022 走看看