移动web开发入门

学习目标

移动web开发基础概念：像素  、视口-viewport
移动web开发基础知识:box-sizing、图标字体、flex布局、媒体查询、移动端常用单位
响应式布局
移动端屏幕适配
移动端事件
移动端调试
终端检测
移动端常见问题
移动端性能优化

基本概念：

一、像素
分辨率：分辨率越高，越清晰；如1792*828像素分辨率，竖着分为1792个点的物理像素，横着分为828个点的物理像素
物理像素（实际开发中不用）：与设备有关，不可改变；也称设备像素
css像素：也称逻辑像素和设备独立像素
.box{
	width:200px;
	height:200px;
}
设备像素比（dpr）=设备像素/css像素；对于设备像素比的情况见截图
标清屏和高清屏：dpr=1为标清屏；dpr>1为高清屏
缩放：改变的是css大小
PPI/DPI：pixels/dots per inch ;每英寸的物理像素点；计算的方式见图
二、视口--viewport

//width=device-width;将宽度设置成设备的宽度
//initial-scale=1；缩放比：设备像素/css像素，一般的浏览器5以内的支持
//maximum-scale=1,minimum-scale=1,user-scalable=no；一般情况下由于布局已经布局好了，不希望用户进行缩放
<meta name='viewport'content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"">

获得屏幕的宽度

box—sizing：分为content-box(默认的盒子，设置padding和border会撑开盒子，使盒子比原本的宽高更大)和border-box（包含了padding和border，设置两者不会撑开盒子，盒子大小不会改变);eg:两幅图片width:50%,float,设置了padding之后就会掉下去，可以用border-box盒子

图标字体：即具有字体的一些特性，又具有图标的一些特性（矢量图不会失真）

阿里巴巴矢量图标库（https://www.iconfont.cn）

<i class="iconfont icon-scan"></i>
<i class="iconfont icon-backtop"></i>
<i class="iconfont icon-personal"></i>

图标字体的操作运用