移动WEB开发三种布局

# 移动端基础

## 移动端调试方法

1. Chrome DevTools(谷歌浏览器)的模拟手机调试

2. 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器

3. 是用外网服务器，直接IP或域名访问

##  总结

1. 移动端浏览器我们主要对webit内核进行兼容

2. 我们现在开发的移动端主要针对手机端开发

3. 现在的移动端碎片化比较严重，分辨率和屏幕尺寸大小不一样

4. 学会用谷歌浏览器模拟手机界面以及调试

# 视口

视口就是浏览器显示页面的屏幕区域，视口可以分为布局视口、视觉视口、和理想视口。

## 布局视口

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

2. IOS、Android基本将这个视口分辨率设置为980px，所以PC上的网页大多数都能在上呈现，只不过元素看上去很小，一般默认可以通过手动缩放页面

## 视觉视口

## 理想视口

1. 为了是网站在移动端有最理想的浏览和阅读宽度而设定

2. 需要手动添写meta视口标签通知浏览器操作

3. meta视口标签的主要目的:布局视口的宽度应该与理想视口的宽度一致，简单理解为设备有多宽，我们布局的视口就有多宽

# 二倍图和多倍图

利用background-size对背景图和对插入图片直接设置宽高将其大小缩小，来实现在移动端图片失真问题

## 物理像素和物理像素比

在PC端(电脑端)，1px等于1物理像素，但在移动端就不尽相同了

1px能显示的物理像素点的个数，称为物理像素比或屏幕像素比

## 背景缩放  background-size

background-size属性规定背景图尺寸

### 语法

background-size: 背景图片的宽度  背景图片的高度;

只写一个参数时，此参数为宽度，高度等比例缩放

单位: 长度 | 百分比 | cover | contain

cover是指将图片等比例缩放后能将盒子完全覆盖，一般会显示不全

contain是指保证等比例缩放后至少能有一个值等于盒子的对应值

 

# 移动端开发选择

## 移动端主流方案

### 单独制作移动端页面(主流)

通常情况下，网址域名前面加m可以打开移动端，通过判断设备，如果是移动端打开，则就到移动端页面

类型:

1. 流式布局(百分比布局)

2. flex 弹性布局 (强烈推荐)

3. less + rem +媒体查询布局

4. 混合布局

 

### 响应式页面兼容移动端(其次)

通过判断屏幕宽度来改变样式，以适应不同终端

缺点: 制作麻烦，需要花大量精力去调兼容性问题

类型:

1. 媒体查询

2. bootstarp

# 移动端开发选择

## 移动端主流方案

### 单独制作移动端页面(主流)

通常情况下，网址域名前面加m可以打开移动端，通过判断设备，如果是移动端打开，则就到移动端页面

类型:

1. 流式布局(百分比布局)

2. flex 弹性布局 (强烈推荐)

3. less + rem +媒体查询布局

4. 混合布局

 

### 响应式页面兼容移动端(其次)

通过判断屏幕宽度来改变样式，以适应不同终端

缺点: 制作麻烦，需要花大量精力去调兼容性问题

类型:

1. 媒体查询

2. bootstarp

# 流式布局 (百分比布局)

通过盒子的宽度设置百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制

 

一般会设置最大、小宽度

max-width:设置最大宽度(max-height:设置最大高度)

min-width:设置最小宽度(min-height:设置最小高度)

# 移动端项目准备工作

设置视口标签以及引入初始化样式

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



<link rel="stylesheet" herf="css/normalize.css">

<link rel="stylesheet" herf="css/index.css">

# flex布局导读

## 建议

如果是PC端页面布局，我们还是传统布局

如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局

# flex布局原理

flex译为“弹性布局”，任何一个容器都可以指定为flex布局

重点:

1. 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效

2. 伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

采用flex布局的元素，称为flex容器，简称“容器”。他们所有的子元素自动成为容器成员，称为flex项目，简称“项目”

总结:

通过对父盒子添加flex属性，来控制子盒子的位置和排列方式

# flex布局父项常见属性

flex-direction:设置主轴方向

justify-content:设置主轴上的子元素对齐方式

flex-warp:设置子元素是否换行

align-content:设置侧轴上的子元素的对齐方式(多行)

align-items:设置侧轴上的子元素对齐方式(单行)

flex-flow:复合属性，相当于同时设置了 flex-direction 和 flex-wrap

## flex-direction:设置主轴方向

### 主轴与侧轴

在flex布局中分为主轴和侧轴两个方向

默认主轴方向为x轴方向，水平向右

默认侧轴方向为y轴方向，垂直向下

注意:主轴和侧轴是可以变化的，就看flex-direction 设置谁为主轴，剩下的就是侧轴，而我们的子元素是跟着主轴排列的  (主轴和侧轴只能为x轴和y轴之中的一个)

flex-direction:row; (默认值，即从左到右)

flex-direction:row-reserve; (从右到左)

flex-direction:column; (从上到下)

flex-direction:column; (从下到上)

## justify-content:设置“主轴”上的子元素对齐方式

注意:使用这个属性前一定要确定好主轴是哪个

justify-content:flex-start; (默认值，从头开始，如果主轴为x轴，则从左到右)

justify-content:flex-end; (从尾部开始排列)

justify-content:center; (在主轴上居中对齐，如果主轴是x轴则水平居中)

justify-content:space-around; (平分剩余空间)

justify-content:space-between;(先两边贴边，后平分剩余空间)

## flex-wrap:设置子元素是否换行

flex布局默认不换行，当子元素排不开时，会自动缩小子元素宽度，放到父元素里面

flex-wrap:nowrap; (默认值，不换行)

flex-warp:wrap; (换行)

## align-items:设置侧轴上的子元素对齐方式(单行)

align-items:flex-start;  (从上到下)

align-items:flex-end;  (从下到上)

align-items:center;  (挤在一起居中，垂直居中)

align-items:stretch; (拉伸，但此时不要给子盒子设置高度)  (默认值)

 

## align-content:设置侧轴上的子元素的对齐方式(多行)

设置子项在侧轴上的排列方式并且只能用于子项出现“换行”的情况 (多行)，在单行下是没有效果的

align-content:flex-start; (默认值，在侧轴的头部开始排列)

align-content:flex-end;  (在侧轴的尾部开始排列)

align-content:center;  (在侧轴中间显示)

align-content:stretch;   (设置子元素高度平分父元素高度)

align-content:space-around;   ( 子项在侧轴平分剩余空间)

align-content:space-between;  (子项在侧轴先分布在两头，再平分剩余空间)

 

## flex-flow 属性时 flex-direction 和 flex-wrap 属性的复合属性

flex-flow: column wrap;

#  flex布局子项常见属性

## flex属性

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

flex:1; (表示该元素在剩余总空间里占总份数分之一，总份数则由同一个剩余空间里的元素的所有flex值相加)

flex:20%; (可以写百分比，相对于父级而言)

## align-self 控制子项自己在侧轴上的排列方式

align-self 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性

默认值为auto，表示继承父元素的align-items属性,如果没有父元素，则等同于stretch

## order属性定义项目的排列顺序

数值越小排列越靠前。默认为0.  (order为同一平面排列顺序)

注意:和z-index不一样 (z-index为不同平面重叠排列顺序)

# 背景渐变linear-gradient

## 语法

background: linear-gradient(起始方向、颜色1、颜色2、···)

background: -webkit-linear-gradient(left、red、blue、···)

background: -webkit-linear-gradient(left top、red、blue、···)

注意: 其实方向可以是:方位名词 或者 度数，如果省略默认就是top

创建背景渐变同样可以通过CSS来实现，使用linear-gradient或者radial-gradient属性。这两者分别用于线性渐变和径向渐变。

线性渐变（linear-gradient）：

css

.gradient-bg {

  background: linear-gradient(to right, #ff0000, #00ff00);

}

这个例子中，to right表示渐变方向是从左到右，#ff0000是起始颜色（红色），#00ff00是结束颜色（绿色）。你可以根据需要调整渐变的方向和颜色。

径向渐变（radial-gradient）：

css

.gradient-bg {

  background: radial-gradient(circle, #ff0000, #00ff00);

}

在这个例子中，circle表示渐变形状是一个圆形，#ff0000是起始颜色，#00ff00是结束颜色。你可以调整形状、起始和结束颜色。

多色渐变：

你还可以使用多个颜色实现更复杂的渐变效果：

css

.gradient-bg {

  background: linear-gradient(to right, #ff0000, #00ff00, #0000ff);

}

这会创建一个从红色到绿色再到蓝色的线性渐变。

角度渐变：

css

.gradient-bg {

  background: linear-gradient(45deg, #ff0000, #00ff00);

}

这个例子中，45deg表示渐变的方向是从45度的角度开始。

# rem单位

rem (root em)是一个相对单位，类似于em, em是父元素字体大小

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

比如，根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px.

rem的优点:可以通过修改html里面的文字大小来改变页面中元素的大小，可以整体控制

# 媒体查询

使用@media 查询，可以针对不同的媒体类型定义不同的样式

媒体查询可以根据不同的屏幕尺寸设置不同的样式

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

目前针对很多苹果手机、Android手机、平板等设备都用得到多媒体查询

## 语法规范

@media mediatype and|not|only (media feature) {

    CSS-Code;  该样式在屏幕宽度设置范围内有效

}

注意: 用@media开头 注意@符号

      mediatype 媒体类型

      关键字 and not only

      media feature 媒体特性 必须有小括号包含  

### mediatype查询类型

将不同的终端设备划分为不同类型，称为媒体类型

mediatype:all;  用于所有设备

mediatype:print;  用于打印机和打印预览

mediatype:screen;  用于电脑屏幕，平板电脑，智能手机等

 

### 关键字

关键字将媒体类型或多个媒体特性连接到一起作为媒体查询的条件

and: 可以将多个媒体特性连接到一起，相当于"且"的意思

not: 排除某个媒体特性，相当于“非”的意思，可以省略

only: 指定某个特定的媒体类型，可以省略

## 媒体特性

每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解三个。

注意他们要加小括号包含

width  定义输出设备中页面可见区域的宽度

min-waidth  定义输出设备中页面最小可见区域宽度  (包含等号)

max-width  定义输出设备中页面最大可见区域宽度  (包含等号)

eg:

@media screen and (min-width:540px) and (max-width:970px){

    body{

        background-color:green;

    }

}

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

@media screen and (min-width:320px){

    html{

        font-size:14px;

    }

}

@media screen and (min-width:640px){

    html{

        font-size:18px;

    }

}

## 引入资源(了解)

当样式比较繁多时，我们针对不同的媒体使用不同的stylesheets(样式表)

原理: 就是直接在；link中判断设备尺寸，然后引入不同的css文件

eg:

```

<link rel="stylesheet" herf="style320.css" media="screen and (min-width=320px)">

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

```

 

# less基础

## less使用

首先先新建一个后缀名为less的文件，在这个less文件里面书写less语句

 

## less变量

变量是指没有固定的值，可以改变。因为CSS中的一些颜色和数值等经常会使用

语法

@变量名:值;

变量名规范:

1. 必须以@开头

2. 不能包含特殊字符

3. 不能以数字开头

4. 大小写不一样

## less编译

使用easy less插件

当写好less 文件后保存即可自动生成css文件

## less嵌套

如果在html中是嵌套的关系 在less文件中可以将属性书写为嵌套关系

eg:

header{

    color:pink;

    font-size:14px;

    a{

        font-size:16px;

    }

}

如果遇见(交集、伪类或伪元素选择器)

1. 内层选择器的前面没有 & 符号，则它被解析为父选择器的后代

2. 如果有 & 符号，他就被解析为父元素自身或父元素的伪类

 

header{

    color:pink;

    font-size:14px;

    &:hover{

        font-size:16px;

    }

}

## less运算

任何数字、颜色或者变量都是可以参与运算的。就是less提供了加(+)、减(—)、乘(*)、除(/)算术运算

注意: 在书写时需要在运算符号两边加上空格

      乘号(*)和除号(/)的写法

      对于两个不同的单位的值之间的运算，运算的结果的值取第一个值的单位

      如果两个值之间只有一个值有单位，则运算结果就取该单位78

      带运算的算式要加小括号括起来

 

header{

    color:pink;

    font-size:(14px + 10);

    font-size:(14px / 10);

    &:hover{

        font-size:16px;

    }

}

# rem适配方案原理

使用媒体查询根据不同的设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当HTML字体大小变化，元素尺寸也会发生变化从而达到等比例缩放的适配

 

## rem适配方案技术使用

技术一:  less + 媒体查询 + rem

技术二:  flexible.js + rem  (推荐)

###  技术一:  less + 媒体查询 + rem

### 元素大小取值方法

1. 最后的公式: 页面元素的rem值= 页面元素值 (px) / (屏幕宽度 / 划分的份数)

2. 屏幕宽度 / 划分的份数 就是html的font-size 的大小

3. 或者: 页面元素的em值 = 页面元素的值 (px) / html font-size 字体大小

 

对于不同尺寸我们要设置不同的媒体查询，但PC端也可以打开，所以我们默认html字体大小为50px,注意这句话写在最上面  (html{font-size:50px;})

可以使用@import "";导入别的less文件

### @import 和 link元素的区别

@import 导入的意思 可以把林格爱一个样式文件导入到另外一个样式文件里

link元素 是把一个样式文件引入到 html页面里面