移动端开发

一、视口（浏览器显示页面内容的屏幕区域）

1、分类

（1）布局视口（layout viewport）不合适

  一般移动浏览器都默认设置了一个布局视口，用于解决早期pc段页面在手机上显示的问题

（2）视觉视口（visual viewport）不合适

  用户正在看到的网站的区域

（3）理想视口（ideal viewport）

  需要手动添写meta视口标签通知浏览器操作，meta视口标签的目的：布局视口宽度应该与理想视口宽度一致

2、meta视口标签

<meta name="viewport" content+"width=device_width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">

3、标准的viewport写法：如上

二、二倍图

1、 物理像素&物理像素比

（1）物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的，PC端1px就是一个物理像素点，但是在移动端不是，

（2）物理像素比：一个px能显示的物理像素的个数称为物理像素比或屏幕像素比，不同手机的物理像素比不同

2、多倍图

准备的图片比实际需要的图片尺寸大两倍，然后手动缩小倍数（直接设置宽度和高度），再放进去

3、背景缩放

background-size:width height;（只写一个参数，一定是宽度，等比例缩放）

cover：完全覆盖盒子，可能有部分显示不全

contain：等比例拉伸到宽度或者高度铺满盒子，可能有部分空白区域

三、移动端开发选择

1、单独制作移动端页面（主流）

通过设备判断，打开相应的页面，两个不同

（1）流式布局（百分比布局）

（2）flex弹性布局

（3）less+rem+媒体查询布局

（4）混合布局

2、响应式兼容pc移动端（其次）

根据浏览器不同来显示，是一个页面

制作麻烦，需要花很大的精力去调兼容性问题

（1）媒体查询

（2）bootstarp

四、移动端技术解决方案

1、CSS初始化

 2、特殊样式

五、移动端常见布局

1、流式布局（百分比布局）

将盒子的宽度设置为百分比（占屏幕的百分比）

可以设置最大宽度和最小宽度：max-width，min-width

六、flex布局

1、布局原理：

任何一个容器都可以使用flex布局

（1）当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align都失效（flex布局可以是div盒子垂直居中）

（2）采用flex布局的元素称为flex容器，它所有的子元素自动称为flex项目，子容器可以横向排列也可以纵向排列

2、flex常见父项属性

（1）flex-direction 设置主轴方向

在flex布局中，分为主轴和侧轴（x、y轴；行和列），跟着主轴排列

默认主轴：x轴；默认侧轴：y轴

flex-direction属性值

 （2）justify-content 设置主轴上的子元素排列方式

注意：使用这个属性前现确定好主轴是哪个

平分剩余空间：将剩余空间平均分配给每个盒子，magin值一样

（3）flex-wrap 设置子元素是否换行

flex布局中默认子元素不换行，如果装不开会缩小子元素的宽度

nowrap：默认值，不换行；wrap：换行

（4）align-items 设置侧轴上的子元素排列方式（单行）

属性值：

 stretch：拉伸到父盒子的值，但是不能给高度

（5）align-content 设置侧轴上的子元素的排列方式（多行）只能用在子元素换行了的情况下

必须有flex-wrap：wrap

 （6）flex-flow（flex-direction和flex-wrap的复合属性）

flex-flow：flex-diretion flex-wrap

3、flex子项常见属性

（1）flex属性

定义项目分配剩余空间，用flex来表示占多少份数

flex：number 数值越大分配的越多

（2）align-self 控制子项自己在侧轴的对齐方式

允许单个项目有不同的对齐方式，可覆盖align-items属性

（3）order  定义项目的排列顺序

数值越小，排列越靠前，默认为0；一般设置为负数。

没有改变结构，不要改变父元素

4、背景线性渐变

background:linear-gradient(起始方向，颜色1，颜色2,···）；

起始方向可以是：方位名词或者度数，如果省略默认是top

七、rem适配布局（宽度和高度都等比例缩放）

1、rem单位

ren是一个相对单位，类似于em，em是父元素的文字大小。

rem的基准是相对于html元素的字体大小

rem的优点：可以通过html里面的文字大小来改变页面中所有的元素，实现整体控制

2、媒体查询（Media Query）

（1）@media可以针对不同的屏幕尺寸设置不同的样式

（2）重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面

（3）语法规范：@media mediatype and|not|only （media feature） {

                             CSS-Code；

                             }

   mediatype 媒体类型：

关键字 and not only ：

media feature 媒体特性，必须有小括号：

（4）媒体查询+rem实现元素动态大小变化

（5）引入资源：当样式比较繁杂时，可以对不同媒体引入不同的样式文件

语法规范：<link rel="stylesheet" href="style320.css media="screen and (min-width: 320px)">

                  <link rel="stylesheet" href="style640.css media="screen and (min-width: 640px)">

3、less基础

（1）维护css的弊端

  css没有变量、函数、作用域等概念，需要书写大量看似没有逻辑的代码，冗余度很高；不方便维护及扩展，不利用复用；没有计算能力。

（2）less

是一门css的扩展语言，加入了程序式语言。

（3）less变量

@变量名：值；

变量命名规范：以@开头，不能包含特殊字符，不能以数字开头，大小写敏感

（4）less编译

编译生成css文件，才能使用

（5）less嵌套

子元素的样式直接写到父元素里面：li{  a{}}

加上&前缀，表示这是父元素自身或者伪类、交集、伪元素选择器

（5）less运算

数字、颜色或者变量都可以进行运算；

运算符的左右两侧必须有一个空格隔开；

两个数参与运算，如果只有一个数有单位，最后的结果以这个单位为准，如果两个都有单位且不一样，以第一个单位为准。

4、rem适配方案

（1）按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小（媒体查询）

（2）换算成rem为单位的值

5、适配方案1

（1）首先选一套标准尺寸 750为准

（2）屏幕尺寸除以划分份数 得到html里面文字的大小

（3）页面元素rem值=页面元素在750像素下的px值除以html里面的文字大小

6、适配方案2 flexible.js+rem

js里面做了处理，不需要写不同屏幕的媒体查询

原理：把当前设备划分为10等份，我们只需设置html里面文字大小，计算元素的rem值