目录

一、基础概念

二、移动端基础

1、视口

2、多倍图

3、移动端适配

三、less

一、基础概念

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标签实现

用户不需要缩放、滚动就能看到网站的全部内容

要为移动端设备单独设计一个移动端网站

开启理想视口的方法
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的嵌套规则
* {
    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的继承
.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);
    }
}