移动端web之像素基础

px:css pixels逻辑像素，浏览器使用的抽象单位

dp,pt :device independent pixels 设备无关像素

dpr:devicePixelRatio 设备像素缩放比

计算公式：1px=(dpr)2 * dp

iphone 5 的dpr等于2

因此：平面上 1px=4*dp  640dp*1136dp

　　　纬度上 1px=2*dp  320px*568px

DPI:打印机每英寸可以喷的墨汁点

PPI：屏幕每英寸的像素数量，即单位英寸内的像素密度

在计算机显示设备参数描述上，二者意思表达的是一样

计算公式：以iphone5为例

ppi=√（11362+6402）/4=326ppi(视网膜Retina屏) 注意：单位为硬件像素，非px


ppi越高，像素数越高，图像越清晰

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

时间： 2024-10-05 09:43:15

移动端web之像素基础的相关文章

web端 第一天认识基础

.NET 分为两大类 一.客户端应用程序   C/S 技术: Winform WPF MFC   MVVM 二.外部端应用程序  B/S(网页端应用程序/WEB端/WEB端应用程序) 目前学的技术是ASP.NET 前身是ASP 分支:WebForm MVC 以后假设有人问你  你会ASP.NET么? 你得问问   你说的是哪个方向? WebForm  还是 MVC 客户端运行机制: 用户电脑上的客户端                                                

移动端web开发常见问题

上一篇总结了一些有关html5和css3的面试题,这一篇是有关于移动端web开发的常见问题,希望一样对你有一些帮助. Meta相关 1. 添加到主屏后的标题(IOS) <meta name="apple-mobile-web-app-title" content="标题"> 2. 启用 WebApp 全屏模式(IOS) 当网站添加到主屏幕后再点击进行启动时,可隐藏地址栏(从浏览器跳转或输入链接进入并没有此效果) <meta name="a

探究移动端web开发

探究移动端web开发 什么使移动端开发呢?这就是在手机等移动端设备上的网页开发.而当今比较流行的通过rem进行移动端的适配,所以这篇文章会主要介绍一些基本概念以及rem适配方案. 第一部分:基本概念 物理像素:这个就是在屏幕上可以控制的最小显示单位,比如显示颜色的最小单位. css像素: 就是我们在设计网页时在css中使用的像素,比如:border: 1px black solid;这里的1px即为css像素,实际上这种像素就是下面我们要介绍的设备独立像素. 设备独立像素(density-ind

移动端web适配屏幕方案总结

基础知识点 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点. iPhone5的物理像素是640X1136. PS:在普通屏幕下,1个css像素对应1个物理像素(1:1).        在超高像素密度屏幕(Retina显示屏)下,1个css像素对应4个物理像素(1:4).(这里指专指苹果超高清屏幕)        因此,在移动端方面就需要设置dpr来保证超高清屏显示图片不会失真. 逻辑像素( logical p

移动端web开发2

补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS的meta标签: ⑴ 允许全屏浏览页面的标签: <meta name="apple-mobile-web-app-capable" content="yes" /> ⑵ safari顶端状态栏样式定义/隐藏: <meta name="apple-mobile-web-app-status-bar-style" content="blank"

手机移动端WEB资源整合

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=&

移动端web资源

meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略将页面中的数字识别为电话号码 <meta name="format-detection" content=&

移动端web开发进阶

三个月前曾写过一篇跨终端响应式页面设计入门的博客,上了博客园头条也得到了不少关注,今天想在这篇博客的基础上,继续写一篇进阶的文章. 补充 基于“入门”一文,我想再补充几个基础知识点,主要都是针对iOS的meta标签: ⑴ 允许全屏浏览页面的标签: <meta name="apple-mobile-web-app-capable" content="yes" /> ⑵ safari顶端状态栏样式定义/隐藏: <meta name="appl

【超级干货】手机移动端WEB资源整合：转载

转载于:http://www.w3cfuns.com/notes/24611/fbba9cbd616e795360ea45515494aa53.html meta基础知识 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 忽略将页面中的数字识别为电话号码 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对ios的safari 将网站添加到主屏幕快速启动方式,仅针对ios的safari顶端状态条的样式 viewport模板 viewport模板——通用