移动端web页面知识小结之像素密度、分辨率、屏幕尺寸

最新推荐文章于 2024-07-07 00:07:17 发布

aiolos1111

最新推荐文章于 2024-07-07 00:07:17 发布

阅读量7.8k

点赞数 1

分类专栏：移动Web 文章标签：移动端 web 分辨率-像素

本文链接：https://blog.csdn.net/aiolos1111/article/details/51784846

版权

本文总结了移动端Web页面的像素密度、分辨率和屏幕尺寸的相关知识，包括DPI&PPI的概念，分辨率与CSS像素的关系，以及屏幕尺寸对显示效果的影响。强调在不同设备和缩放比例下，CSS中的1px并不等同于设备物理像素。

摘要由CSDN通过智能技术生成

  一直以来，本人对移动端分辨率、像素等概念傻傻分不清，特查阅多位牛人博客后总结如下要点，以便日后查看。

文档来源

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.html
http://www.uisdc.com/mobile-ui-measurement-guideline
http://www.25xt.com/appdesign/8336.html

屏幕分辨率

是指屏幕上垂直方向和水平方向上的像素个数，单位是px。常见取值 480X800,320X480等

IPhone手机的屏幕分辨率如下图：

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

aiolos1111

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

移动端-像素和分辨率

L990614的博客

10-13

1593

1.像素分辨率 重点：像素 分辨率的关系难点：印刷不同产品时的不同分辨率设置的理解像素概念网页中的像素单位像素(pixel)概念一般而言，pixel（像素）是图像的基本采样单位。详细解释见维基像素条目。所以它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），而是一个抽象概念。 CSS像素(css pixel) CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素。在CSS规范中，长度单位可以分为两类，绝对(absolute)单位以及相对(relati

手机浏览器都是按照什么分辨率解析移动端网页的

weixin_34121282的博客

07-17

202

无论是公司项目还是合作项目有时候都需要一些移动端网页开发的任务,比如扫描二维码之后或者内嵌到客户端里面的页面,等等. 本篇文章主要通过调研不同横向分辨率的移动设备的网页解析情况,来给出移动端网页设置宽度的建议. 在给出调研结果之前,如果你对移动端网页开发还不够了解的话,请先阅读”移动端网页开发基础”. 各位都知道手机的横向分辨率多种多样,所以我们在编写代码之前都会加入一句: <meta ...

参与评论您还未登录，请先登录后发表或查看评论

为什么移动端设计稿都是 750

最新发布

weixin_64684095的博客

07-07

505

因为最初是用 iphone6/iphone6 plus 确立的这个标准，而他的分辨率是 375 _ 667，实际上它拥有两倍物理像素密度 750 _ 1334。所以设计师一般会用 750 这个宽度来设计界面。保证设计的精细度。为后续切图提供了遍历。

手机分辨率和网页中的px是一回事吗？

weixin_34032827的博客

04-30

184

手机分辨率和网页中的px是一回事吗？目录 1.背景介绍 2.知识剖析 3.常见问题 4.解决方案 5.编码实战 6.扩展思考 7.参考文献 8.更多讨论 1.背景介绍首先，什么是viewport 通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域再具体一点，就是浏览器上用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览...

常见移动设备屏幕分辨率

weixin_30566111的博客

09-07

761

以上是常见的设备屏幕分辨率，移动端为ipad（1204*768）及以下的在写移动端适配页面的时候可运用媒体查询设置断点，常见移动设备效果可在chrome上查看响应式页面常用css媒体查询 @media only screen and ( max-width:768px ) { ... } /*and后一定要有空格*/ 转载于:https://www.cnbl...

html手机分辨率选择,怎么看手机分辨率（手机屏幕分辨率多少才合适？）

weixin_33267354的博客

06-03

3193

最近出了很多新机，很多人在购买前会详细查看手机参数，其中“分辨率”这一项让不少人一头雾水，究竟手机分辨率是什么？对我们的使用体验有什么影响？是不是分辨率越高越好？教授估计这些问题百思特网让很多对手机了解不多的朋友产生困扰，所以今天就来为大家科普科普~一、什么是手机屏幕分辨率？图像的显示都是由许多像素点排列组成的，手机屏幕分辨率就代表着像素个数，当用手机屏幕中横向的像素点与竖向的像素点相乘的时候，再...

【移动端网页布局】移动端网页布局基础概念 ① ( 移动端浏览器 | 移动端屏幕分辨率 | 移动端网页调试方法 )

让学习成为一种习惯 ( 韩曙亮の技术博客 )

04-21

2692

一、移动端浏览器二、移动端屏幕分辨率 三、移动端网页调试方法

android逻辑分辨率,移动端web页面知识小结之手机分辨率与手机像素

weixin_39706441的博客

05-25

1080

一直以来，本人对移动端分辨率、像素的概念傻傻分不清，特总结下文，以便日后查看。一屏幕分辨率是指屏幕上垂直方向和水平方向上的像素个数。常见取值 480X800,320X480等IPhone手机的屏幕分辨率如下图：二逻辑分辨率(像素)和物理分辨率(像素)IPhone手机逻辑像素与物理像素的对应关系如下图：物理像素PX：CSS pixels 物理像素逻辑像素dp/pt/dip:device in...

移动端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

微信小程序（适配小结、移动端1px与选择器权重）

weixin_45343878的博客

08-16

535

WXSS选择器权重与优先级 WXSS优先级与CSS类似，权重如下图所示权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式权重案例适配小结上节介绍的物理像素与逻辑像素相关概念，关键词：物理像素dp （1）物理像素(physical pixel) 物理像素又被称为设备像素（device pixel简称dp）他是显示设备中一个最微小的物理部件。一个设备的物理像素...

获取android手机的分辨率、像素密度等

03-24

获取android手机的屏幕宽度，屏幕高度，屏幕密度density，font density，屏幕密度DPI

微信小程序（布局适配与物理逻辑像素）

weixin_45343878的博客

08-16

1906

移动端开发经常遇到一些概念：物理像素、逻辑像素、像素密度、像素比等关键词：屏幕尺寸、物理像素/屏幕分辨率/物理分辨率、逻辑像素DIP、像素密度PPI、像素比DPR、视网膜显示屏Retina、rpx、vw、vh等屏幕尺寸屏幕尺寸指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米常见的屏幕尺寸有2.4、2.8、3.5、3.7、4.2、5.0、5.5、6.0等如何计算手机尺寸？知道手机...

手机html设计规范,终于晓得手机网站设计尺寸规范

weixin_39769627的博客

06-07

1025

你知道移动端网页设计尺寸是多少吗？下面就随小编来了解一下吧。iPhone手机网页的设计尺寸iPhone5尺寸是640x1136px分辨率是326PPIiPhone4和iPhone4S尺寸是640x960px分辨率是326PPIiPhone和iPodTouch第一代、第二代、第三代尺寸是320x480px分辨率是163PPI安卓网页的设计尺寸320dp：一个普通的手机屏幕(240X320，320×4...

【像素与浏览器视口的细节】及移动web设置“width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no“原因

树上骑个猴的博客

01-08

3064

初学网页制作，很常见的做法就是找各种线上的网页，然后查看源代码，参考学习这些网页是如何实现自己的设计的。而对我来说，我印象最深的一个知识点，是这样的： <div class="wrapper"></div> .wrapper{width:980px;margin:0 auto;} 这个在现在来看，其实就是经典的固定宽度的网页布局。不过，以前的时候，我并不知道为什么这样做就可以。当时的理解是：一个定宽，水平居中的容器，来容纳网页的主体内容，就可以使网页能在不同分辨率的显示屏都有相对

H5自适应屏幕分辨率大小

weixin_33671935的博客

08-15

2462

　说明： ①：H5自适应不同分辨率的设备，其实主要就一句 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> width=device-width 屏幕宽度；initial-scale...

dpi 、 dip 、分辨率、屏幕尺寸、px、density 关系以及换算

07-14

1863

一、基本概念 dip ： Densityindependent pixels ，设备无关像素。 dp ：就是dip px ：像素 dpi ：dots per inch ，直接来说就是一英寸多少个像素点。常见取值 120，160，240。我一般称作像素密度，简称密度 density ：直接翻译的话貌似叫密度。常见...

Web UI(DPI问题)

Prothi

07-17

267

最近在做web项目，主要使用css+html搭建UI,设计Web UI考虑浏览器和分辨率的问题是理所当然的，但是，有一个属性DPI(右键桌面->设置->高级)有正常(96DPI),大尺寸(120DPI)和自定义这几个选项。我们项目的界面在正常(96DPI)下排版正常，但是在大尺寸(120DPI)下就会出现局部地方混乱的情况，大家有谁遇到过这种问题，谈谈自己的经验吧。（关于WEB UI设计的也行）...