移动Web开发

[MrZWH]

物理像素

物理像素（physical pixel）也可以叫做设备像素（dp：device pixel）

CSS 像素

CSS 像素也可以叫做逻辑像素（logical pixel），还可以叫做设备独立像素（dip：device independent pixel）

设备像素比

• 设备像素比（dpr：device pixel ratio）
• dpr= 设备像素/CSS像素（缩放比是1的情况下）

PPI

• 每英寸的物理像素点
• ppi：pixels per inch
• dpi：dots per inch

视口 viewport

width=device-width与initial-scale=1效果一样
maximum-scale=1,minimum-scale=1与user-scalable=no效果一样

获取视口 viewport 宽度：

var viewWidth = document.documentElement.clientWidth || window.innerWidth || document.documentElement.getBoundingClientRect().width

不能用screen.width获取视口宽度，因为有兼容性问题，有时候会获得设备宽度

获取 dpr：window.devicePixelRatio

box-sizing

图标字体

flex 布局

容器的属性：

• display
• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

项目的属性：

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

媒体查询

媒体类型：

• all（default）
• screen/print/speech

媒体查询中的逻辑：

• 与（and）
• 或（，）
• 非（not）

媒体特征表达式：

• width/max-width/min-width
• -webkit-device-pixel-ratio/-webkit-max-device-ratio/-webkit-min-ratio
• orientation
  • landscape/portrait
• height
• device-height/device-width
• screen.width/screen.height
• aspect-ratio 视口的宽高比

媒体查询策略：

• xs：<576px
• sm: 576px~768px
• md: 768px~992px
• lg: 992px~1200px
• xl: >1200px

移动端常用单位

• px
• %
• em
• rem
• vw
• vh

[MrZWH]

响应式布局

• 2010年五月由Ethan Marcotte提出的一个概念
• 一个网站兼容多种终端
• 对不同屏幕尺寸（大小）做出响应，并进行相应布局的一种移动Web开发方式

结构、内容和布局的概念

布局针对的是结构

栅格系统

• 响应式布局的一种实现
• 将页面栅格化

3-1

[MrZWH]

移动调试和终端检测

远程调试工具Vorlon.JS

npm i -g vorlon

vorlon

多终端同步工具Browsersync

监听文件变动，自动刷新连接到页面的设备

npm i -g browser-sync

shift + 右键可在当前目录下打开命令行

启动：

browser-sync start --server --files="css/*.css,*.html"

终端检测

通过navigator.userAgent

var isMobile = navigator.userAgent.match(/android|iphone|ipad|ipod/i)