这个是什么像素?

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
好帮手慕久久 2023-03-23 11:22:55

同学你好,解答如下:

1、没有为什么,浏览器就没有把此处设置成物理像素,所以我们没法把它当成物理像素去看。比如iphone4的物理像素是960*640,但是模拟器中是480*320。

2、不用管什么物理像素、css像素,就简单把它看成“页面设置了视口后(不考虑dpr),移动设备上html的页面宽”就行。比如:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, minimum-scale=1">
  <title>视口</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: red;
    }
  </style>
</head>

<body>
</body>

</html>

该页面设置了视口,那么整个页面宽高如下:

https://img1.sycdn.imooc.com//climg/641bc5c9094b8f2814730654.jpg

按照这个尺寸,我们可以对比设计稿,设置元素尺寸。

祝学习愉快!

  • https://img1.sycdn.imooc.com//climg/641bd2fe09a3346d18150724.jpg

    为什么这里说的 浏览器 显示的是 物理像素??

    2023-03-23 12:18:21
  • 解答如下:

    习题说的是“手机逻辑像素”, 它和“物理像素”不是一个概念:

    https://img1.sycdn.imooc.com//climg/641bdf1609cea34e08610061.jpg

    “物理像素”是我们说的“分辨率”。

    2023-03-23 13:12:48
  • 手机逻辑像素 跟 视频讲的 CSS像素 是同一个?如果是同一个的话,为什么公式上面还有CSS逻辑像素??

    2023-03-23 14:46:12
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师