一. CSS3响应式布局
1. 什么是响应式网页?
可以根据浏览器设备不同而自动改变图片,文字布局,不会造成横向溢出,进而改善用户体验。
2. 响应式布局必需满足:
(1)不能固定元素宽度,必需使用流式布局(默认文档流+浮动)+弹性布局+栅格布局(就是媒体查询)
(2)文字和图片大小随容器大小变化,也就是使用相对尺寸
(3)使用媒体查询技术
3. 媒体查询
获取设备类型及相关参数,例如判断设备是否为显示屏,以及查询显示屏大小。
会根据浏览器网页的设备不同,有选择的执行一部分css样式,忽略其他css样式。
(1)设备:screen(显示屏),print(打印机),TV...
(2)屏幕大小:
xl(超大屏) 屏幕宽度 >= 1200px
lg(大屏) 992px <= 屏幕宽度 < 1200px
md(中屏) 768px <= 屏幕宽度 < 992px
sm(小屏) 576px <= 屏幕宽度 < 768px
xs(超小屏) 屏幕宽度 < 576px
@media screen and (min-width:992px) {
div {
background:#000;
color: red;
font: 36px chiller;
}
}
@media screen and (min-width:768px) and (max-width:991px) {
div {
background:#f00;
color: #ff0;
font: 24px chiller;
}
}
@media screen and (max-width:767px) {
div {
background:#f0f;
color: #fff;
font: 16px chiller;
}
}
4. 编写响应式布局
4.1 视口
移动设备(手机,pad...)编写响应式布局必需写视口(viewport),pc可以不写视口。
视口时设置网页高度和宽度的,在移动端,因为横向滑动交互性特别差,因此,移动端的视口段都一般设置为手机段都。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
width=device-width 设置视口宽度等于设备宽度
initial-scale=1.0 设置视口宽度初始能不能缩放 1.0代表不能
maximum-scale=1.0 设置视口最大缩放比例 1.0最大1倍
user-scalable=0 设置是否允许用户缩放视口 0不允许
视口最简洁的写法
<meta name="viewport" content="width=device-width, initial-scale=1">
二. BootStrap
https://www.bootcss.com
boot3和boot4区别:
boot3使用less语法写的css,boot4使用的是sass语法
由于Bootstrap 是用于开发响应式布局的,因此对于复杂的pc端页面并不适合,而适合于开发移动设备优先的 WEB 项目。
1. 如何使用bootstrap
1)head中引入文件,顺序不能乱
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap.css">
<script src="jquery.min.js"></script>
<script src="popper.min.js"></script>
<script src="bootstrap.min.js"></script>
2)编写container div
所有的boot文件都必需卸载container div内
<div class="container">
</div>
2. 全局css样式
container 定宽容器,每种不同的分辨率下,
定义了写死的max-width
同时,有左右15px内边距,水平居中
container-fluid 变宽容器,根据不同分辨率的屏幕,
宽度永远是屏幕的100%
boot支持4种屏幕 xl/lg/md/sm 不支持xs
boot中1个rem是16px。
boot的css reset使用的是normalize.css方案
2.1 按钮相关
.btn 基本类
按钮颜色:
btn-danger 危险
btn-success 成功
btn-warning 告警
btn-info 信息
btn-primary 主要
btn-second 次要
btn-dark 深色
btn-light 浅色
边框颜色:
btn-outline-xxx
按钮大小:
btn-sm
btn-lg
btn-block
btn-link
2.2 图片相关
rounded 圆角
rounded-circle 圆形图
img-thumbnail 缩略图,有图片边框
img-fluid 响应式图片,高度自适应,宽度不能超过图片原始宽度的100%
2.3 文本相关
text-danger...
.h2 - .h6
text-capitalize/uppercase/lowercase 首字母大写,全部大写,全部小写
text-center/right/left 左中右对齐
text-sm/lg/md-left/right/cent 媒体查询控制文本对齐
text-justify 两端对齐,没有媒体查询
2.4 列表相关
ul
list-unstyled 去点,左内边距清0
list-group 列表组
li
list-group-item 列表项,边框,首元素和尾元素的圆角
list-group-danger 颜色
active 激活
disabled 禁用项
2.5 表格 table
table
table
table-bordered
table-warning
table-hover
table-striped 隔行变色
table的父级元素
table-responsive
3. 辅助类
通用类
3.1 边框
border 基本类
border-danger
border-0 去掉边框
3.2 浮动
float-left
float-none
float-sm-left
clearfix 放在父元素上,防止高度坍塌
3.3 显示
visible visibility: visible
invisible visibility: hidden
3.4 背景颜色
bg-warning
3.5 圆角
rounded
rounded-0
rounded-circle
rounded-top/right/...
3.6 尺寸
w-25
h-25
mw-100
mh-100
3.7 内外边距
m/mt/mb/mr/ml/mx/my-auto 外边距
p.... 内边距
响应式
4. 栅格布局
把一行分成12份,元素的占地宽度靠份数定义