移动开发的四种布局模式

1.流式布局

布局视口 layout viewport

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

视觉视口 visual viewport

它是用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

理想视口 ideal viewport

理想视口，对设备来讲，是最理想的视口尺寸

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

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

总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口

meta标签

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

属性	解释
width	宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes或no（1或0）

最标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

二倍图

物理像素&物理像素比

物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。

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

背景缩放background-size

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

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

单位： 长度|百分比|cover|contain;

cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

CSS3盒子模型

传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding

CSS3盒子模型： 盒子的宽度= CSS中设置的宽度width 里面包含了 border 和 padding

/*CSS3盒子模型（用这个）*/
box-sizing: border-box;
/*传统盒子模型*/
box-sizing: content-box;

移动端特殊样式

    /*CSS3盒子模型*/
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    /*点击高亮我们需要清除清除  设置为transparent 完成透明*/
    -webkit-tap-highlight-color: transparent;
    /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
    -webkit-appearance: none;
    /*禁用长按页面时的弹出菜单*/
    img,a { -webkit-touch-callout: none; }

流式布局方式

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

2.flex布局

• flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
• flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
• 采用 Flex 布局的元素，称为 Flex 容器（flex

container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex
item），简称"项目"。

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

父项常见属性

• flex-direction：设置主轴的方向

子属性	属性值
row	默认值从左到右
row-reverse	从右到左
column	从上到下
column-reverse	从下到上

• justify-content：设置主轴上的子元素排列方式

子属性	属性值
flex-start	默认值，从头部开始，如果主轴是X，则从左往右
flex-end	从尾部开始排列
center	在主轴居中对齐，如果主轴是X轴，水平居中
space-around	平分剩余空间
space-bet	先两边贴边再平分剩余空间

• flex-wrap：设置子元素是否换行

默认项目都排在一条线（又称”轴线”）上。

flex-wrap属性定义，flex布局中默认是不换行的

nowrap 不换行

wrap 换行

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

flex-start 从头部开始

flex-end 从尾部开始

center 居中显示

stretch 拉伸

• align-content：设置侧轴上的子元素的排列方式（多行）

只能用于子项出现 换行 的情况（多行），在单行下是没有效果的。

子属性	属性值
flex-start	默认值在侧轴的头部开始排列
flex-end	从侧轴尾部开始排列
center	在侧轴中间显示
space-around	子项在侧轴平分剩余空间
space-bet	子项在侧轴先两边贴边再平分剩余空间
stretch	设置子项元素高度平分父元素高度

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

flex-flow:row wrap;

子项常见属性

• flex子项目占的份数

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

.item {
    flex: <number>; /* 默认值 0 */
}

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

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

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

span:nth-child(2) {
      /* 设置自己在侧轴上的排列方式 */
      align-self: flex-end;
}

• order属性定义子项的排列顺序（前后顺序）

数值越小，排列越靠前，默认为0。

注意：和 z-index 不一样。

3.rem布局

rem单位

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

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

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

媒体查询

• 用 @media开头 注意@符号
• mediatype 媒体类型
• 关键字 and not only
• media feature 媒体特性必须有小括号包含

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

mediatype 查询类型

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

all 用于所有设备

print 用于打印机和打印预览

scree 用于电脑屏幕，平板电脑，只能手机等

关键字

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

• and：可以将多个媒体特性连接到一起，相当于“且”的意思。
• not：排除某个媒体类型，相当于“非”的意思，可以省略。
• only：指定某个特定的媒体类型，可以省略。

媒体特性

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

min-width 定义输出设备中页面最小可见区域宽度

max-width 定义输出设备中页面最大可见区域宽度

less 基础

Less安装

①安装nodejs，可选择版本(8.0)，网址：http://nodejs.cn/download/

②检查是否安装成功，使用cmd命令（win10是window+r 打开运行输入cmd） —输入“node –v”查看版本即可

③基于nodejs在线安装Less，使用cmd命令“npm install -g less”即可

④检查是否安装成功，使用cmd命令“ lessc -v ”查看版本即可

Less 使用之变量

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

@变量名:值;

• 必须有@为前缀
• 不能包含特殊字符
• 不能以数字开头
• 大小写敏感

@color: pink;

Less 编译 vocode Less 插件

Easy LESS 插件用来把less文件编译为css文件

安装完毕插件，重新加载下 vscode。

只要保存一下Less文件，会自动生成CSS文件。

Less 嵌套 ：如果遇见 （交集|伪类|伪元素选择器） ，利用&进行连接

Less 运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了加（+）、减（-）、乘（*）、除（/）算术运算。

• 乘号（*）和除号（/）的写法
• 运算符中间左右有个空格隔开 1px + 5
• 对于两个不同的单位的值之间的运算，运算结果的值取第一个值的单位
• 如果两个值之间只有一个值有单位，则运算结果就取该单位

4.响应式布局

使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。

设备的划分情况：

• 小于768的为超小屏幕（手机）
• 768~992之间的为小屏设备（平板）
• 992~1200的中等屏幕（桌面显示器）
• 大于1200的宽屏设备（大桌面显示器）

父容器版心的尺寸划分

• 超小屏幕（手机，小于 768px）：设置宽度为 100%
• 小屏幕（平板，大于等于 768px）：设置宽度为 750px
• 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
• 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

Bootstrap

Bootstrap 来自 Twitter（推特），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

bootstrap基本使用

1. 创建文件夹结构

2. 创建 html 骨架结构

3. 引入相关样式文件

   <!-- Bootstrap 核心样式-->
   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
   

4. 书写内容

bootstrap布局容器

.container

• 响应式布局的容器 固定宽度
• 大屏 ( >=1200px) 宽度定为 1170px
• 中屏 ( >=992px) 宽度定为 970px
• 小屏 ( >=768px) 宽度定为 750px
• 超小屏 (100%)

.container-fluid

• 流式布局容器 百分百宽度
• 占据全部视口（viewport）的容器。

bootstrap栅格系统

• 按照不同屏幕划分为1~12 等份
• 行（row） 可以去除父容器作用15px的边距
• xs-extra small：超小； sm-small：小； md-medium：中等； lg-large：大；
• 列（column）大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列
• 每一列默认有左右15像素的 padding
• 可以同时为一列指定多个设备的类名，以便划分不同份数 例如 class=“col-md-4 col-sm-6”

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

 <!-- 列偏移 -->
  <div class="row">
      <div class="col-lg-4">1</div>
      <div class="col-lg-4 col-lg-offset-4">2</div>
  </div>

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

 <!-- 列排序 -->
  <div class="row">
      <div class="col-lg-4 col-lg-push-8">往左侧推</div>
      <div class="col-lg-8 col-lg-pull-4">往右侧推</div>
  </div>

响应式（隐藏）工具

类名	超小屏	小屏	中屏	大屏
.hidden-xs	隐藏	可见	可见	可见
.hidden-sm	可见	隐藏	可见	可见
.hidden-md	可见	可见	隐藏	可见
.hidden-lg	可见	可见	可见	隐藏

语法： class="hidden-xs“

与之相反的是 visible-xs/sm/md/lg