移动端Web基础--像素

最新推荐文章于 2020-04-26 14:24:40 发布
VIP文章 最新推荐文章于 2020-04-26 14:24:40 发布
阅读量425 收藏 1
点赞数 1
分类专栏： 前端 文章标签： 移动端基础 设备像素 物理像素 CSS像素 像素
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42420703/article/details/83574838
版权

文章目录

看了许多关于设备像素、视口的博客，有一部分内容写的不是很清楚，而且每篇博客的知识点的讲述也有些差异，看了许多都快把自己弄懵了，都不知道怎么理解才好，下面是我的总结。

设备像素

对于设备来说，有两个设备像素：物理像素、独立像素。

物理像素

指的是设备屏幕的物理像素，任何设备的物理像素数量都是固定的。
屏幕分辨率的意思是，设备屏幕上的物理像素个数。
比如iPhone 6 的屏幕分辨率为750像素*1334像素，表示在宽度上，有750个像素点，高度上有1334个像素点。
看看下面这组数据：

手机类型 屏幕尺寸
最低0.47元/天 解锁文章
xiao xu
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
移动Web手册-中文版-ppk编写.rar
08-29
1.适合前端开发者及前端移动端开发的工程师
iPhone 6屏幕：4.7英寸1334*750分辨率，5.5英寸1920*1080，UI适配不困难
万花筒 邪灵噶 的博客
09-10 9859
苹果iPhone 6应该会配置4.7英寸屏幕，显示分辨率为1334*750。换句话说，尽管iPhone 6的屏幕像素密度与iPhone 5S相同为326ppi，不过因为分辨率的高宽都发生了变化，手机应用的UI适配问题可能再一次重现，正如当年iPhone 5刚推出的时候，开发人员也花了好一段时间才完成了应用分辨率的适配工作。
移动端如何获得更清晰的图片（物理像素与开发px关系）
furfur-jiang的博客
03-27 495
物理像素是真实存在的最小的颗粒，可以成为分辨率 电脑的1开发px = 1个物理像素点 但是 iphone8 1px = 2个物理像素 iphone6 Plus 1px = 3个物理像素 也就是说，一个图片在电脑端和手机端看到的清晰程度会不同 如果是一个1px=2个物理像素 也就是说准备的图片需要是手机所需2倍，然后通过手动缩小一倍，可以让移动端的图片更加清晰 可以利用ps软件的cutterman多...
移动端web页面知识小结之像素、物理像素、逻辑像素
aiolos1111的专栏
07-11 1万+
一直以来，本人对移动端分辨率、像素等概念傻傻分不清，特查阅多位牛人博客后总结如下要点，以便日后查看。 文档来源http://weizhifeng.net/you-should-know-about-dpi.html http://www.chinaz.com/manage/2015/0902/441624.shtml http://www.cnblogs.com/2050/p/3877280
移动端web页面知识小结之像素密度、分辨率、屏幕尺寸
aiolos1111的专栏
06-29 7808
一直以来，本人对移动端分辨率、像素等概念傻傻分不清，特查阅多位牛人博客后总结如下要点，以便日后查看。 文档来源http://weizhifeng.net/you-should-know-about-dpi.html http://www.chinaz.com/manage/2015/0902/441624.shtml http://www.cnblogs.com/2050/p/38772
移动端web开发——像素的适配
AmberQu的博客
03-26 1823
像素和dpr定义像素，又称画素，是图像显示的基本单位，译自英文“pixel”，pix 是英语单词 picture 的常用简写，加上英语单词“元素” element，就得到 pixel，故“像素”表示“图像元素”之意，有时亦被称为 pel(picture element)像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更...
像素密度与CSS3的viewport在移动端Web响应式布局中的运用
09-27
viewport是CSS3中调整缩放的利器,特别适用于移动端Web界面的操作与布局,接下来我们就来详解像素密度与CSS3的viewport在移动端web响应式布局中的运用.
解决移动端1像素边框
12-14
解决移动端存在的一像素边框问题，可以完美的展示在web端上，通用的方式调用即可
移动Web—CSS为Retina屏幕替换更高质量的图片
01-19
有很多设备的“devicePixelRatio”都大于1.5或者等于2（window.devicePixelRatio = 物理像素/dips）。我的三星项目就是个最新的iPhone和iPad版本设置了“devicePixeRatio”等于“2”。Retian似乎是屏幕显示的一种...
移动端开发，web网页开发，像素转换工具
12-17
可以进行像素和dip之间的转化 ，方便开发者做一些单位的转换和频幕适配
【原创】移动端高清、多屏适配方案
weixin_30333885的博客
07-03 625
移动端高清、多屏适配方案 背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。 对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。 对于retina屏...
移动端Web页面适配方案
weixin_33722405的博客
03-20 747
更新：完整js代码和sass mixin已上传于gitHub，点击此处可获取 =================================================== 移动端Web页面，即常说的H5页面、手机页面、webview页面等。 手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容...
web 页面 常用分辨率(PC 移动端)
qq_39722799的博客
11-18 5705
之前在网上看到过一些,但是原网址忘记是哪个了 PC端： 按屏幕宽度大小排序（主流的用橙色标明） 分辨率 比例 | 设备尺寸 1024*500 （8.9寸） 1024*768 （比例4：3|10.4寸、12.1寸、14.1寸、15寸; ） 1280*800（16：10|15.4寸） 1280*1024(比例：5：4...
关于移动端网页里的像素
大概关于
07-12 2184
可能你也看到过px，dp，dip，sp，设备独立像素、虚拟像素……这些单位或概念吧，如果你对它们很了解，那本篇对你可能就没什么用了，当然本文并不试图解释这些东西的意思，而是尽可能通过解释这些东西产生的原因，记录一下自己对这些东西的理解。 虚拟像素 最初的最初，一个px单位就够了，很简单纯洁啊，一个px就代表一个屏幕上的像素点。电脑的屏幕虽然尺寸也有差距，但是不大。一般开发网页可以把...
关于Html5移动端适配不同分辨率的布局总结
baidu_41205301的博客
05-26 8866
关于现在比较流行的一些框架比如bootstrap，用得多的人会发现bootstrap确实在做扁平化风格的网站方面，提供了很大的便利，适配不同分辨率的pc端，包括能适配到移动端。但是就我个人而言，从pc端适配到移动端这种一整套的方式还是有所不妥的，毕竟pc端显示的内容相对于移动端来说是很多很繁琐的，而移动端显示的风格大多以扁平化为主，屏幕显示的内容也不宜过多过于繁琐，所以要想直接从pc端适配到移动端...
多少像素才合适 网页设计标准尺寸大讲解
twosecond
07-14 939
许多的网页设计在进行网页布局设计时，进行界面网页的宽度尺寸设计都比较迷茫，800*600尺寸及1024*768尺寸的分辨率下，网页应该设计为多少像素才合适呢？太宽就会出现水平滚动条了，下面我们就网页设计的标准尺寸进行讲解。网页设计标准尺寸：1、800*600下，网页宽度保持在778以内，就不会出现水平滚动条，高度则视版面和内容决定。2、1024*768下，网页宽度保持在1002以内，如
Swift -- 屏幕的分辨率，图片的像素，像素是否固定大小，屏幕的尺寸，来一一解惑
SoftwareDoger的博客
04-26 981
送给小白： 像素： 图片的属性，我们可以看到公交上面滚动播放字体的屏幕，你细看的话其实是一颗颗LED的灯组成的，一个像素就是一个LED灯泡，一张图片其实就是很多个不同颜色的点组成的，这个店就是像素 分辨率： 设备屏幕的属性，iPhone6的分辨率是1334 x 750, 指的就是iPhone横向有750像素，纵向有1334像素 屏幕的尺寸：经常说iPhone6是4.7英寸的屏幕，XR是6.1英...
【响应式web设计(一)】像素
Linda的前端开发路
05-05 871
响应式设计基础之像素的基础知识
iPhone屏幕尺寸、分辨率及适配
热门推荐
曾梦想仗剑走天涯
12-26 48万+
从初代iPhone3GS到现如今的iPhone6(+)，屏幕尺寸、分辨率、像素密度都在在不断增大。如何适配不同的屏幕尺寸，使UI更加协调美观，这给iPhone/iOS应用开发者带来了挑战。 本文结合个人在iOS UI开发和适配方面的粗浅经验，对常用屏幕适配相关因素做个梳理盘点，以备日后查阅。
移动端使用v-html不换行
最新发布
10-21
在移动端使用v-html时，由于HTML文件中的文本可能会很长，因此可能会导致文本不换行。为了解决这个问题，可以在CSS中使用`word-break: break-all;`属性来强制文本在单词之间换行。另外，还可以使用`white-space: pre...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值