6.移动开发基础

一、移动web开发入门

1.像素

（1）分辨率

（2）物理像素（physical pixel）：也叫设备像素（dp：device pixel）

（3）CSS像素：也叫逻辑像素（logical pixel），也叫设备独立像素（dip：device independent pixel）；实际开发中使用的像素。

（4）设备像素比（dpr：device pixel ratio）：dpr=设备像素/CSS像素（缩放比是1的情况下）；dpr=2表示一个css像素用2*2个设备像素来绘制。

（5）标清屏和高清屏：dpr是1的为标清屏，大于1的都可认为是高清屏。

（6）缩放：缩放改变的是css像素的大小。

（7）PPI/DPI（pixels per inch /dots per inch）：PPI表示每英寸的物理像素点。

                                        ；

为屏幕对角线的分辨率，为屏幕横向分辨率，为屏幕纵向分辨率，为屏幕对角线的长度（单位为英寸）。

2.视口-viewport

1.  
   <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1,minimum-scale=1">
2.  
    
3.  
   //viewport：视口
4.  
   //content="width=device-width"自适应视口宽度
5.  
   //initial-scale：缩放比
6.  
   //user-scalable=no：用户不能控制屏幕放大缩小。

3.box-sizing 

1.  
   box-sizing:content-box;
2.  
   //宽度和高度分别应用到元素的内容框,在宽度和高度之外绘制元素的内边距和边框。
3.  
    
4.  
   box-sizing:border-box;
5.  
   //为元素设定的宽度和高度决定了元素的边框盒。
6.  
   就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
7.  
   通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

4.Flex布局 

（1）什么是flex布局：Flex 是 Flexible Box 的缩写，意为"灵活的盒子"或"弹性的盒子"，所以 flex 布局一般也叫作"弹性布局"。

（2）基本概念：

flex容器：采用flex布局的元素，称为flex容器。

flex项目：flex容器的所有子元素（孙子元素不是）自动成为容器成员，称为flex项目。项目默认沿主轴排列。

（3）容器属性：

a.display：属性决定是否使用flex布局。

1.  
   .box{ display:flex|inline-flex}
2.  
   //flex：将对象作为弹性伸缩盒显示.
3.  
   //inline-flex：将对象作为内联块级弹性伸缩盒显

b.flex-direction：决定主轴的方向（即项目的排列方向）

1.  
   .box { flex-direction: row | row-reverse | column | column-reverse; }
2.  
   //row（默认值）：主轴为水平方向，起点在左端
3.  
   //row-reverse：主轴为水平方向，起点在右端
4.  
   //column：主轴为垂直方向，起点在上沿
5.  
   //column-reverse：主轴为垂直方向，起点在下沿

c.flex-wrap：默认情况下，项目都排在一条线（又称"轴线"）上，flex-wrap 属性定义，如果一条轴线排不下，如何换行。

1.  
   .box{ flex-wrap: nowrap | wrap | wrap-reverse; }
2.  
   //nowrap（默认）：不换行
3.  
   //wrap：换行，第一行在上方
4.  
   //wrap-reverse：换行，第一行在下方

d.flex-flow：是 flex-direction 属性和 flex-wrap 属性的简写形式，默认值为 row nowrap。

.box { flex-flow: <flex-direction> || <flex-wrap>; }

e.justify-content：定义了项目在主轴上的对齐方式。

1.  
   .box { justify-content: flex-start | flex-end | center | space-between | space-around; }
2.  
   //flex-start（默认值）：左对齐
3.  
   //flex-end：右对齐
4.  
   //center： 居中
5.  
   //space-between：两端对齐，项目之间的间隔都相等
6.  
   //space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

f.align-items：定义项目在交叉轴上如何对齐。

1.  
   .box { align-items: flex-start | flex-end | center | baseline | stretch; }
2.  
   //flex-start：交叉轴的起点对齐
3.  
   //flex-end：交叉轴的终点对齐
4.  
   //center：交叉轴的中点对齐
5.  
   //baseline: 项目的第一行文字的基线对齐
6.  
   //stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

g.align-content：定义了多根轴线（多行）在交叉轴上的对齐方式，如果项目只有一根轴线（一行），该属性不起作用。

1.  
   .box { align-content: flex-start | flex-end | center | space-between | space-around | stretch; }
2.  
   //flex-start：交叉轴的起点对齐
3.  
   //flex-end：与交叉轴的终点对齐
4.  
   //center：与交叉轴的中点对齐
5.  
   //space-between：与交叉轴两端对齐，轴线之间的间隔平均分布
6.  
   //space-around：每根轴线两侧的间隔都相等，所以，轴线之间的间隔比轴线与边框的间隔大一倍
7.  
   //stretch（默认值）：轴线占满整个交叉轴

（4）项目的属性：

a.order：定义项目的排列顺序，数值越小，排列越靠前，默认为0。

b.flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大；如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）；如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍；如果有的项目有 flex-grow 属性，有的项目有 width 属性，有 flex-grow 属性的项目将等分剩余空间。

c.flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小；如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小；如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效。

d.flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）；浏览器根据这个属性，计算主轴是否有多余空间，它的默认值为auto，即项目的本来大小

e.flex：是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto后两个属性可选；该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)

f.align-self：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性；默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

5.媒体查询--基础

（1）什么是媒体查询：media query

1.  
   @media screen and (min-width: 900px) {
2.  
   body {
3.  
   background-color: red;
4.  
   }

（2）为什么需要没媒体查询：一套样式不可能适应各种大小的屏幕，针对不同的屏幕大小写样式。

（3）媒体样式：all（default）、screen、print、speech

（4）媒体查询中的逻辑：与（and）、或（,）、非（not）

（5）媒体特征表达式：

1.  
   width/max-width/min-width
2.  
   -webkit-device-pixel-ratio/-webkit-max-device-pixel-ratio/-webkit-min-pixel-ratio
3.  
   orientation
4.  
   landscape/portrait
5.  
    
6.  
   height
7.  
   device-width/device-height
8.  
   screen.width/screen.height
9.  
   aspect-ratio 视口的宽高比

6.媒体查询--策略 

（1）断点：改变屏幕大小，当页面显示不正常的时候，就需要设置断点。

1.  
   @media (max-width: 576px) {
2.  
   .col {
3.  
   width: 100%;
4.  
   }
5.  
   }
6.  
   @media (min-width: 577px) and (max-width: 768px) {
7.  
   .col {
8.  
   width: 50%;
9.  
   }
10.  
    }
11.  
    @media (min-width: 769px) and (max-width: 992px) {
12.  
    .col {
13.  
    width: 25%;
14.  
    }
15.  
    }
16.  
    @media (min-width: 993px) and (max-width: 1200px) {
17.  
    .col {
18.  
    width: 16.6666666667%;
19.  
    }
20.  
    }
21.  
    @media (min-width: 1201px) {
22.  
    .col {
23.  
    width: 8.333333333%;
24.  
    }
25.  
    }
26.  
     
27.  
    /*pc first*/
28.  
    .col {
29.  
    width: 8.333333333%;
30.  
    }
31.  
    @media (max-width: 1200px) {
32.  
    .col {
33.  
    width: 16.6666666667%;
34.  
    }
35.  
    }
36.  
    @media (max-width: 992px) {
37.  
    .col {
38.  
    width: 25%;
39.  
    }
40.  
    }
41.  
    @media (max-width: 768px) {
42.  
    .col {
43.  
    width: 50%;
44.  
    }
45.  
    }
46.  
    @media (max-width: 576px) {
47.  
    .col {
48.  
    width: 100%;
49.  
    }
50.  
    }
51.  
     
52.  
    /*mobile first*/
53.  
    .col {
54.  
    width: 100%;
55.  
    }
56.  
    @media (min-width: 576px) {
57.  
    .col {
58.  
    width: 50%;
59.  
    }
60.  
    }
61.  
    @media (min-width: 768px) {
62.  
    .col {
63.  
    width: 25%;
64.  
    }
65.  
    }
66.  
    @media (min-width: 992px) {
67.  
    .col {
68.  
    width: 16.6666666667%;
69.  
    }
70.  
    }
71.  
    @media (min-width: 1200px) {
72.  
    .col {
73.  
    width: 8.33333333%;
74.  
    }
75.  
    }

二、响应式布局

三、移动端屏幕适配

这篇好文章是转载于：学新通技术网