【从0到1掌握移动WEB开发】pixel像素基础

最新推荐文章于 2022-04-17 23:48:11 发布
最新推荐文章于 2022-04-17 23:48:11 发布
阅读量211 收藏
点赞数
分类专栏： 移动多端 文章标签： pixel 像素 移动开发 移动WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42224055/article/details/108306932
版权
pixel像素基础

问题1
​在这里插入图片描述

用代码还原该问题
在这里插入图片描述

查看效果：没有充满整个屏幕
在这里插入图片描述

仔细看图
a59ba5c57a42c58fa0b04c54300cf522.png​

原本640*1136缩小了一半，变成了320*568
​
像素知识

  • px：css pixels逻辑像素，浏览器使用的抽象单位
  • dp，pt：device indepen pixels设备无关像素
  • dpr：devicePixelRatio设备像素缩放比
  • 计算公式：1px=（dpr）的平方*dp​

问题二
在这里插入图片描述

因为dpr=2
​在这里插入图片描述
补充小知识

  • OPI：打印机每英寸可以喷的墨汁点
  • PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度

在这里插入图片描述

注意：单位为硬件像素，非px。

PPI越高，像素越高，图像越清晰。
在这里插入图片描述

但可视度越低，系统默认设置缩放比 越大。

默认缩放比
在这里插入图片描述

所谓的高清屏Retina：dpr都是大于等于2
在这里插入图片描述

椰卤工程师
关注
专栏目录
Chapter1 - 像素(Pixel)操作
rongyupan的博客
07-11 699
Chapter1 - 像素(Pixel)操作 import cv2 as cv import numpy as np src = cv.imread("opencv.png") 一、改变像素值 # copy image, deep copy img_copied = np.copy(src) # change value img_changed = img_copied img_cop...
移动Web开发入门(一) -- 像素、媒体查询、em、rem
Sun_blog
08-23 461
文章目录一、移动Web开发二、基本概念分辨率物理像素CSS像素物理像素和CSS像素的关系设备像素比（dpr）获取dprPPI 、 DPI视口（viewport）设置 Viewport获取视口宽度三、媒体查询媒体类型媒体查询的逻辑关系媒体特征表达式常用媒体尺寸四、移动端常用单位pxemremvw/vh 一、移动Web开发 移动web开发是指针对手机、平板电脑等移动设备的web开发。 二、基本概念 分辨率 分辨率(resolution，又称解析度)指显示器所能显示的像素的多少，显示器可显示的像素越多，画面就越精
pixel像素基础
07-27 392
地址：http://www.imooc.com/video/9564 dp（安卓）,pt（iphone）是物理像素 ppi是由物理像素确定的 一英寸内有多少个像素渲染，ppi越高，图片越清晰 1px = dpr^2 * dp 这个是不是有问题？ 1px = dpr ^2 * dp 是平面上的像素换算，但实际开发当中使用更多的是长度上的换算： 1p...
Pixel移动开发像素知识
C_hydar的博客
11-26 542
px： CSS pixels 逻辑像素，浏览器使用的抽象单位 dp, pt：device independent pixels 设备无关像素 dpr：devicePixelRatio 设备像素缩放比 计算公式：1px = [（dpr）^2] *dp   DPI：打印机每英寸可以喷的墨汁点（印刷行业） PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度 PPI越高，像素数越高，图像越清晰...
Google为Pixel和Chromebook开发自己的处理器
chengdu_IT的博客
12-19 147
Axios 援引一名知情人士的话说，谷歌最近成功录制了代号为“白查佩尔 SoC”的视频，并且已经使用了几个星期了。该处理器包含 8 个 Arm 核心和一些额外的硅，旨在加速谷歌的机器学习算法(即一个用于推理的小型 TPU)，并提高谷歌助手应用程序的性能。据报道，该芯片使用了三星的 5LPE (5nm)处理技术。由于一款新的移动 SoC 通常需要一年左右的时间才能投入商用，因此，如果一切按计划进行，且该芯片的性能具有竞争力，那么预计在 2021 年晚些时候，white hapel 将为谷歌的 Pixel 智.
像素（Pixel）、DPI与PPI一看就明白
热门推荐
weixin_47557271的博客
03-21 1万+
Pixel、DPI、PPI
（一）移动端 Web 开发基础
weixin_46227563的博客
04-17 2493
文章目录一、移动 Web 开发基础概念1. 像素(1) 分辨率(2) 物理像素(3) CSS 像素(4) 设备像素比(5) 标清屏和高清屏(6) 缩放(7) PPI / DPI2. 视口 viewport二、移动 Web 开发基础知识1. box-sizing2. 图标字体3. flex 布局(1) 什么是 flex 布局(2) flex 布局的基本概念(3) flex 容器的属性(4) flex 项目的属性4. 媒体查询(1) 什么是媒体查询（media query）(2) 为什么需要媒体查询(3) 媒体
移动Web开发基础-Viewport
前端向朔
09-23 1709
导语：移动Web开发自然要从Viewport说起，那什么是Viewport呢？字面意思为视图窗口，在移动设备上就是指用来显示页面的那部分区域。 用移动设备来访问没有做特殊处理的PC页面，移动设备是显示不下那么宽的内容的，所以移动设备一般会将页面缩小来显示整个页面，用户可以将页面放在来看清楚内容，在做移动Web开发的时候，我们可以手动的设置页面的视窗宽度，页面缩放比例以及是否允许用户...
2020年史上最全移动端Web整理从开发基础到实战(一)
weixin_45992710的博客
12-12 380
一、基础知识 1、屏幕 移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。 通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）。 而分辨率则一般用像素来度量 px，表示屏幕水平和垂直方向的像素数，例如 1920*1080 指的是屏幕垂直方向和水平方向分别有1920和1080个像素点而构成。 2、长度单位 在Web开发中可以使用px（像素）、em...
Pixel
10-25
Pixel
移动web开发入门—基础知识、自适应布局、调试
c11073138的博客
07-21 677
之前没做过移动端web开发，最近接手的一个小项目是做微信公众号，需要考虑手机适配。UI给出的设计稿是一般是基于iphone手机做的（15年之后是基于ipone6），我们的UI是基于iphone6来做的（iphone6手机的分辨率是1334 * 750）。开发过程中主要有几个疑问： 1、如何将设计稿的尺寸转换到开发尺寸？ 2、如何实现自适应？ 3、如何调试在手机中的展示效果 下面会针对这几个问题展开...
【剑桥摄影协会】数码相机像素（Pixel）基础
星辉领域
07-27 1228
随着数码相机技术的不断发展，各种技术相关的术语层出不穷，刚入门的小白常常对此异常困惑。本文主要是让大家能够分清数字像素相关的一些概念，比如传感器尺寸、百万级像素、抖动和打印尺寸等。同时，理解这些概念，也会有助于挑选你的第一台数码相机。
pixel
qiume的专栏
05-12 645
A4:640、960CM:38
字体的大小(pt)和像素(px)转换
foreverlikui的博客
03-09 8936
px:相对长度单位。像素（Pixel）。 pt:绝对长度单位。点（Point）。 1in = 2.54cm = 25.4 mm = 72pt = 6pc 具体换算是： PointsPixels Ems Percent 6pt 8px0.5em 50% 7pt 9px0.55em 55% 7.5pt 10px 0.625em 62.5% 8pt 11px 0.7em 70% 9pt 12px ...
[转]PT与PX区别
AS3
08-01 1152
http://blog.sina.com.cn/s/blog_3de4869d0100ho63.html     字体大小的设置单位，常用的有2种：px、pt。这两个有什么区别呢？ 先搞清基本概念：px就是表示pixel，像素，是屏幕上显示数据的最基本的点； pt就是point，是印刷行业常用单位，等于1/72英寸。 这样很明白，px是一个点，它不是自然界的长度单位，谁能说出一个“...
跨多端框架Taro VS uni-app 选型对比
椰卤工程师的个人博客
05-15 2162
【场景实现】React+material-ui+typescript实现H5上传身份证后显示图片 ，FileReader.readAsDataURL()方法读取图像信息
椰卤工程师的个人博客
12-02 1299
原理 readAsDataURL方法用于读取指定的内容File。读取操作完成后，readyState变成DONE，并loadend触发。那时，该result属性包含数据作为数据：URL表示文件数据为base64编码的字符串。 举个栗子 HTML <input type="file" onchange="previewFile()"><br> <img src="" height="200" alt="Image preview..."> Javascript funct
移动端Web界面开发：布局差异、步骤与常见问题解析
ppi）反映了设备的屏幕密度，如iPhone 4的实际物理像素为640x960，逻辑像素则为320x480，这意味着在某些设备上，多个物理像素可能对应一个逻辑像素，这就需要考虑设备像素比（device pixel ratio, DPR）。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

椰卤工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值