移动web开发

一基础知识

1.1

屏幕

屏幕尺寸——对角线的长度

分辨率——像素度量（水平和垂直）

1.2

长度度单位（相对和绝对长度）

像素是一个相对的长度单位（像素没有固定的长度）

1.3

像素密度（DPI.PPI）--Dots Per Inch Pixels Per Inch

单位面积像素里面能放多少的点数

屏幕尺寸固定时，当PPI 越大，像素的实际大小就会越小越高，，清晰度yu当PPI越小，像素实际大小就越大

补充：Retina -视网膜屏幕

图片固定的情况下，PPI越高，图像越小

Ipone家族

ipone3G 480*320 3.5英寸 PPI 163

ipone4 960*640 3.5英寸 PPI 326

1.4

设备独立像素

保证图像内容在不同的PPI设备上看上去大小差不多

IOS(PT)——point Android(DIP或者DP)——Device independent pixel 前端——Css

1.5

物理像素——不可人为改变

CSS像素 （电脑屏幕默认基本上是1:1）

二.视口

在PC端，浏览器窗口决定了html元素的大小，所以可以视为视口就是浏览器窗口。

在移动端，视口将不受到浏览器窗口的影响（ 视口设置的一般比浏览器窗口大）

怎么解决在移动端来解决视口大于设备出现的缩放或者滚动条 ？（layout porview【视口】和ideal portview【设备的】）注意：不设置的话默认是980的

<meta name="viewport" content="width=device-width">（设备的高）

<meta name="viewport" content="width=568">（设备的高，两种写法）

三.移动浏览器（一般需要兼容这三方面）

系统浏览器

应用内置浏览器（ 重要 ）——qq,微信，内置浏览器（ WebView ）

第三方浏览器——安装

四.屏幕适配

五.媒体查询 （需要明确知道我们处于哪种设备中）

1.媒体类型（pc和移动）

2.媒体特性

六.CSS 预处理器（管理和维护css）

Less Sass stulus

问题：比较移动web网页和App的区别(流畅度，滚动条，长按文字选中)

七,em，rem长度单位

1em=16px 但是设置字体可以更改 font-size=12px; 1em=12px;

注意：字体是相对于自身的设置, rem参照的是html，与当前元素的字号 无关

八.触屏事件

1.touchstart touchmove touchend

2.TouchEvent对象

touches: 位于屏幕上的所有手指的列表

targetTouches: 位于 该元素上 的所有手指的列表

changedTouches：touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点

九.网页布局

固定宽度布局 流式布局（百分比） 栅格化布局 响应式布局

响应式布局：新闻 论坛 企业宣传 个人博客 文字内容为主