Web笔记-移动前端开发笔记

因为最近有个移动端的小项目，在此稍微学习下移动端开发基础概念。免得用框架的时候莫名其妙。

px(CSS pixels)：逻辑像素，浏览器使用的抽象单位；

dp,pt(device independent pixels)：设备无关像素；

dpr(devicePixelRatio)：设备像素放缩比；

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

下面先解释下dp，为设备像素放缩比：

高清屏(Retina屏)：dpr都是大于等于2的。

以iPhone5为例，为640dp*1136dp。设备像素放缩比为2.0。

根据上面的公式可以得1px = (2)^2 * dp，这个是平面上的，那纬度上的就位：1px = 2 * dp；

所以：640dp * 1136dp => 320px * 568px

然后解释下上面那个ppi相关的概念：

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

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

这个像素是指硬件像素非px；

以iphone5为例：

ppi = √(1136^2 + 640^2) / 4 = 326ppi (视网膜Retina屏)

PPI越高，像素越高，图像越清晰。

如下栗子：

下面是关于html下面的viewport相关。

在移动端的开发我们一般会加这句话：

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">

就可以适应移动端了。

这里来简单说下里面的属性：

width：设置布局viewport的特定值（“device-width”）；

initial-scale：设置页面的初始缩放；

minimum-scale：最少缩放；

minimum-scale：最大缩放；

user-scalable：用户能否缩放；

Web笔记-移动前端开发笔记相关推荐

Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...
web前端开发笔记46-71，78-83 2022/11/04
web前端开发笔记一.标签群组通配等选择器(TAG) 1.标签选择器 2.群组选择器(不同标签) 3.通配选择器(一锅端) 二.层次选择器 - 后代():M N - 父子:M > N - 兄弟 ...
HTML5 高级系列：web Storage 学前端开发要先看这个
HTML5 高级系列:web Storage 学前端开发要先看这个前言 HTML5 的 web Storage 存储方式有两种:localStorage 和 sessionStorage. 这两种方 ...
asp.net web开发框架_Web前端开发必不可少的9个开源框架
大多数人想到Web开发时,通常会想到HTML或JavaScript,往往忽略了CSS,根据Wikipedia的说法,CSS既是网页中最重要也是最常被遗忘的部分之一,尽管它是万维网的三大基础技术之一. ...
Web前端开发笔记——第一章 Web前端概论
目录前言一.Web系统 (一)Web系统的定义 (二)前端和后端二.网站和网页 (一)网站的开发历程 (二)网页的组成元素三.浏览器四.前端技术 (一)超文本标记语言(HTML) (二)层叠 ...
Web前端开发笔记——第三章 CSS语言第六节 CSS定位
目录一.定义二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素三.浮动定位 (一)左浮动和右浮动 (二)清除浮动四.层定位 (一)st ...
Web前端开发笔记——第二章 HTML语言第六节区域标签、列表标签
目录一.区域标签 (一)div标签的定义 (二)div标签的属性二.列表标签 (一)列表标签的定义 (二)列表标签的类型 1.有序列表 (1)有序列表的定义 (2)有序列表的属性 2.无序列表 ( ...
Web前端开发笔记——第二章 HTML语言第二节基本标签
目录前言一.标题标签二.段落标签和段内换行三.预留格式标签四.行内组合标签五.水平线标签六.注释标签七.空格字符例题(创建一个网页) 结语前言本节主要讲解HTML的一些基本标签. ...
【学习笔记】前端开发面试锦集
链接地址:https://microzz.com/2017/02/10/interview/ 前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增,正如赫门在2015深JS大会上的&l ...

Web笔记-移动前端开发笔记

Web笔记-移动前端开发笔记相关推荐

最新文章

热门文章