移动端布局补充
长度单位: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。
二: 使用:
- 引入: BootStrap提供的CSS代码。
<link rel="stylesheet" href="./bootstrap-3.3.7/css/bootstrap.css">
- 调用类:使用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结构, 并适当调整结构或内容。