目录
一、基础概念
1、屏幕大小：指屏幕的对角线长度；1英寸（inch）=2.54厘米（cm）
2、屏幕分辨率：指横向纵向的物理像素总点数，一般表示为：n*m
3、屏幕密度（ppi）：又称屏幕像素密度，是指屏幕上每英寸里包含的物理像素点个数，单位是ppi，是衡量一块屏幕是否清晰的核心指标
PPI的计算方法是：PPI=开平方（X*X+Y*Y）/Z
(其中X,Y指长,宽像素数，Z指屏幕大小)
4、物理像素：单位px,是电脑屏幕上的一个物理成像点（发光元器件）
5、css像素：逻辑像素，又称程序员像素，是我们在编写css，js，less时使用的像素，单位也是px
6、设备独立像素：DIP或DP，又称屏幕密度无关像素。
引言：在没有出现高清屏 的年代，1个css像素对应1个物理像素，但自从高清屏问世，二者就不再是1对1的关系了
苹果公司，在2010年推出了一种新的显示标准：在屏幕尺寸不变的前提下，把更多的物理像素点压缩至一块屏幕里，这样分辨率会更高，显示效果会更加细腻，苹果将这种屏幕成为：Retina屏幕（视网膜屏幕），与此同时推出配备这种屏幕的划时代产品-iPhone4
设备独立像素的出现，使得即使在【高清屏】下，例如苹果的retina屏，也可以让元素有正常的尺寸，让代码不受到设备的影响，它是设备厂商根据屏幕特性设置的，无法更改
设备独立像素于物理像素关系
普通屏幕下1个设备独立像素对应1个物理像素
高清屏幕下1个设备独立像素对应N个物理像素
设备独立像素与css 像素关系
在无法缩放的情况下（标准情况下）：1css像素=1设备独立像素，即：dpr=物理像素/设备独立像素
7、像素比
像素比（dpr）：单一方向设备 物理像素和设备独立像素之间的比例
8、像素之间的关系
在不考虑缩放的情况下（理想状态下）：
普通屏（dpr=1）：1css像素=1设备独立像素=1物理像素 2010之前
高清屏（dpr=2）：1css像素=1设备独立像素=2物理像素
高清屏（dpr=3）：1css像素=1设备独立像素=3物理像素
程序员写了一个width为100px的盒子，那么：
代表100个css像素；
若用户不进行缩放，则对应100个设备独立像素；
在dpr为2的设备上，这100个css像素占据了100*2=200个物理像素（横向）
例如：iPhone6 为例
物理像素：750px ，
设备独立像素375px ，
css 像素：375px
二、移动端基础
1、视口
布局视口
默认的布局视口容器是980px，对pc页面进行压缩，压到跟手机一样大小，就可以看了，只是元素看上去很小，只能手动去缩放，体验效果不好
视觉视口
视觉视口就是用户可见的区域，它的绝对宽度永远和设备屏幕一样宽，但这个宽度里包含的css像素值是变化的，需要滚动查看
理想视口（完美视口）
与屏幕（设备独立像素）等宽的布局视口，称之为理想视口；让布局视口宽度与屏幕等宽（设备独立像素），靠meta标签实现
用户不需要缩放、滚动就能看到网站的全部内容
要为移动端设备单独设计一个移动端网站
开启理想视口的方法
html
<meta name='viewport' content='width=device-width' />
html
<!-- 设置完美视口大小
device-width 视口宽度和设备保持一致
initial-scale 表示页面的初始缩放值，==>屏幕宽度（设备独立像素）/布局视口宽度
user-scalable 是否允许用户缩放
maxinum-scale=1.0, 最大允许缩放比例
mininum-scale=1.0， 最小允许缩放比例
-->
<meta name="viewport"
content="
width=device-width,
initial-scale=1.0,
user-scalable=no
maxinum-scale=1.0,
mininum-scale=1.0 " />
2、多倍图
一倍图：
使用的是100*100 物理像素的图片
100*100分辨率图片==》对应屏幕中100*100的发光点（物理像素）==》对应css中50*50px
此时强行设置100*100px css像素，很明显对比起来就较为模糊
二倍图
使用200*200的图片
200*200分辨率的图片==》对应屏幕200*200的发光点（物理像素）==》css中100*100px
此时设置为100*100px，正好完美对应显示
在现在移动端中，例如：在iphone6 中，需要显示多少px 的图片，为了不被强行放大， 需要使用宽高为2 被分辨率的图片，显示更好的效果。
而这种使用的宽高为2 倍分辨率大小的图片，称之为2 倍图
实际开发过程中还存在2 倍图、3 倍图、4 倍图之类的，但是具体使用哪一种看公司具体的需要
命名特点：
xxxx@2x.png二倍图
xxx@3x.png三倍图
在实际开发中如果给的是1 倍图，那就多大写多大；如果是2 倍图，那就是图片的大小/2 ；3 倍图，就是图片的大小/3······ ；
3、移动端适配
rem，媒体查询，flexible.js，混合布局，vw、vh（未来趋势）
用flexible.js开发
github地址：https://github.com/amfe/lib-flexible
官方文档地址：https://github.com/amfe/article/issues/17
综上所有，一起使用，选取一种主要技术选型，其他技术为辅助（推荐）
rem 适配--- 移动端开发的步骤
第一步：拿到多大的设计稿，将root font size 改成 ：设计稿的大小/10
第二步：引入flexable.js ，会动态的去修改html 的字体大小
第三步：正常根据设计稿的大小去开发，将所有的px 值换算为rem 的值
用 vw 去开发
1 、看设计稿是多大，自定义 1rem=100px ， 然后 1px=xxxvw, 将 html{font-size:xxxvw}
2 、去更改 root font size ，更改 1rem=100px
3 、根据设计稿的大小，将 px 值写成 rem
总结：
都是一个绝对值为参考值
flexable.js 是以设备独立像素为绝对值，去算 rem 的值
vw 是设备的视口的宽度为绝对值，去算 rem 的值
最终都是把设计稿中的 px 换算成 rem
三、less
是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言，
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展
less的中文官网：http://lesscss.cn/
less有混合嵌套继承等规则，实际使用非常方便，结构清晰明了，且适配度高
less的嵌套规则
css
* {
margin: 0;
padding: 0;
}
#list {
background-color: #333;
overflow: hidden;
height: 50px;
line-height: 50px;
width: 400px;
margin: 50px auto;
li {
list-style: none;
float: left;
width: 25%;
text-align: center;
a {
text-decoration: none;
color: white;
}
// &表示上一级
&:hover {
background-color: tomato;
}
}
}less的继承
css
.box {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.box:hover{
background-color: red;
}
#wrap {
width: 300px;
height: 300px;
border: 1px solid red;
position: relative;
#box1 {
width: 100px;
height: 100px;
background-color: pink;
// 只继承box样式
&:extend(.box);
}
#box2 {
width: 50px;
height: 50px;
background-color: orange;
// 所有跟box相关的样式，都继承
&:extend(.box all);
}
}