【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素比 | 代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果 )

这篇具有很好参考价值的文章主要介绍了【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素比 | 代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果 )。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。





一、物理像素 / 物理像素比



移动端 网页开发 与 PC 端开发有很多不同之处 , 在图片处理方向需要采用 二倍图 / 三倍图 / 多倍图 方式进行图片处理 ;

图片处理的方式与如下的 物理像素 物理像素比 概念相关 ;


物理像素 : 物理像素就是 设备 上的分辨率 , 如 1920 x 1080 像素 , 就是宽度上有 1920 个像素 , 高度上有 1080 像素 ;

物理像素比 : 设置 1 像素 在 实际设备中 , 能显示的像素个数 , 就是物理像素比 ;

  • 移动端中 1 像素 , 需要结合 物理像素比 进行设置 , 可能实际中对应 2 像素 , 也可能对应实际中的 0.5 像素 ;
  • 物理像素比 是 移动端 设备的固有属性 ;

电脑端 设置 1 像素 就是 1 像素大小 ; 移动端设置 1 像素 , 需要结合屏幕像素比进行设置 ;


不同手机的物理像素比 :

【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素比 | 代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果 )


可参考 【Android 屏幕适配】屏幕适配基础概念 ② ( 像素 px 与 密度无关像素 dip | 像素 px 与 密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系 ) 博客 , Android 应用开发时 , 1 dip 屏幕像素无关密度 , 在不同的 屏幕像素密度 的手机中 的 换算关系 ;

px 与 dip 的换算关系 :

  • 屏幕像素密度 ( DPI , Dots Per Inch ) 为 120 dpi 时 ( ldpi ) , 1 dip = 0.75 px ;

  • 屏幕像素密度 ( DPI , Dots Per Inch ) 为 160 dpi 时 ( mdpi ) , 1 dip = 1 px ;

  • 屏幕像素密度 ( DPI , Dots Per Inch ) 为 240 dpi 时 ( hdpi ) , 1 dip = 1.5 px ;

  • 屏幕像素密度 ( DPI , Dots Per Inch ) 为 320 dpi 时 ( xhdpi ) , 1 dip = 2 px ;

  • 屏幕像素密度 ( DPI , Dots Per Inch ) 为 480 dpi 时 ( xxhdpi ) , 1 dip = 3 px ;

  • 屏幕像素密度 ( DPI , Dots Per Inch ) 为 640 dpi 时 ( xxxhdpi ) , 1 dip = 4 px ;





二、代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果



在下面的代码中 , 分别在 PC 端浏览器 和 移动端浏览器 中显示 100x100 像素的盒子 , 对比二者的显示效果 ;


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
    <title>meta 视口标签</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

PC 端显示效果 : PC 端 100 像素就是显示 100 像素 ;

【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素比 | 代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果 )

Pixel2 的屏幕尺寸是 1920 x 1080 , 但是设置 411 像素 , 就可以将整个屏幕宽度占用 , 相当于屏幕中的 1080 像素 , 这里说明移动设备的 像素值 是屏幕无关像素 , 需要结合 物理像素比 才能计算出正确的 像素值 ;

【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素比 | 代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果 )文章来源地址https://www.toymoban.com/news/detail-422147.html

到了这里,关于【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素比 | 代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果 )的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包