移动端概念、视口、标准盒子和怪异盒子

移动端概念

常用设备机型
	iPhone5---真实大小（320）-----设计稿（640px）----2倍
	iPhone678---真实大小（375）-----设计稿（750px）----2倍
	iPhoneplus---真实大小（414）-----设计稿（1242px）----2倍
	iPhoneX---真实大小（375）-----设计稿（1125px）----2倍
	
	设备像素比=设备像素/设备独立像素

	设备像素（物理像素），设计稿大小，ps量出来的大小
	设备独立像素（逻辑像素，虚拟像素，css像素），设备的大小、开发人员要写的css像素
	
	开发人员写的css像素=ps量出来/dpr

视口

	布局视口：一般写出来的代码都放在布局视口上，布局视口一般比较大
	视觉视口：设备真实能看见的区域 
		因为将来要把布局视口的东西放在视觉视口上，但是我们已知
	理想视口：要求布局视口呈现1:1的关系，不要放大也不要缩小
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	字体图标的使用
		字体图标，文字，拥有文字相关样式

盒子模型

	组成部分
		内间距
		内容区
		边框线
		外间距
	总宽计算规则：内容区+左右内间距+左右边框线
	分类：
		标准盒子（w3c盒子）box-sizing:content-box(默认值)
			自己定义的width指的是内容区的宽度
			所以写了内间距和边框线之后会导致把盒子撑大
		怪异盒子（IE盒子）box-sizing:border-box
			自己定义的width指的是盒子总宽度
			 写了内间距和边框线之后不会导致盒子撑大（而是把内容区自动变小）