移动端布局

移动端布局补充

长度单位：vw / vh

相对单位；
相对视口的尺寸计算结果；
vw：viewport width，1vw = 1/100视口宽度；
vh：viewport height，1vh = 1/100视口高度；

vw单位尺寸：
确定设计稿对应的vw尺寸 （1/100视口宽度）：
查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）。

vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )。

vh单位尺寸：
确定设计稿对应的vh尺寸 （1/100视口高度）：
查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）。

vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )。

在开发中，vw和vh不会混用！
vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

rem 和 vw / vh 的区别：

响应式布局

响应式布局：能够根据设备宽度的变化，设置差异化样式。

开发常用写法，媒体特性常用写法：

• max-width
• min-width

书写顺序：
min-width（从小到大）
max-width（从大到小）

完整写法：

关键词：and，only，not；

媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。

媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。

外链式CSS引入：

BootStrap

UI框架
UI框架概念： 将常见效果进行统一封装后形成的一套代码, 例如：BootStrap。
作用：基于框架开发，效率高，稳定性高。

Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。

中文官网: https://www.bootcss.com/。

使用 BootStrap框架快速布局响应式网页：
一：下载： https://www.bootcss.com/
首页 → BootStrap3中文文档 → 下载BootStrap。

二： 使用：

1. 引入： BootStrap提供的CSS代码。

<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">

2. 调用类：使用BootStrap提供的样式。

container：响应式布局版心类。

BootStrap栅格系统
栅格化是指将整个网页的宽度分成若干等份，BootStrap3默认将网页分成12等份。

.container是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。
.container-fluid也是 Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为 100%。
分别使用.row类名和 .col类名定义栅格布局的行和列。

注意： container类自带间距15px;row类自带间距-15px。

组件
BootStrap提供的常见功能，包含了HTML结构和CSS样式。
使用方法：
Ø 引入BootStrap样式
Ø 复制结构，修改内容

插件
只有HTML和CSS的下拉菜单，单击后不能弹出子菜单。使用BootStrap插件实现常见的交互效果。BootStrap提供的常见效果, 包含了HTML结构，CSS样式与JavaScript。

插件的使用步骤：
Ø 引入BootStrap样式
Ø 引入js文件：jQuery.js + BootStrap.min.js

复制HTML结构, 并适当调整结构或内容。