1 首先要了解BT分四个核心部分
Layout ——布局 ~包含栅格系统~属于BT
栅格系统是实现响应式的关键
Content——内容~文字 列表 标题 表单等等
Components——组件~不同的功能组件~警告框 按钮 轮播图 下拉组件 模态框
Utilities —— 工具部分~修饰性 颜色 浮动 定位 边框 阴影 间距
另外注意
Extend——扩展~字体 图标 按钮 日历~属于第三方库跟插件
2 响应式的特点
a 网页随着设备屏幕宽度调整,自动适应,且布局改变
b 不用绝对宽度设置,而使用百分比
c 使用浮动、弹性布局
d 字体使用相对设置,如rem、em
rem —— root em 以根节点字体设置大小为基本单位进行设置
<html>
<head>
<meta charset="UTF-8"><title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>html{
font-size:60px;
}
p{
font-size:2rem;
}
.p2{
font-size:0.5rem;
}
</style>
</head>
<body>
头号灵感
铁象建站<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
</body>
</html>
以上代码中根节点的字体大小设置不是固定的,而是根据屏幕大小自动配置。设备屏幕大小是依靠媒体查询来,如此在不同屏幕上才能匹配合理的字体大小。由此我们看——媒体查询。
3媒体查询 @media
根据一个或者多个基于设备类型、具体特点和环境来应用样式。
1 媒体类型
all 所有设备
print 打印机设备
screen 彩色电脑屏幕
speech 听觉设备(针对有视力障碍得人,可以把页面内容以语音形式传达)
媒体查询语法 @media 条件 {生效内容}
@media all{
div {
font-size:3rem;
}
}
稍微复杂:
@media all and(min-width:400px){
div{
font-size:100px;
}
}
@import中使用@media
@import url('css/bootstrap.css') (min-width:200px);
link标签中使用
<link rel="stylesheet" href="css/bootstrap.css" media="条件">
@规则总结
@media 媒体查询
@chartset 定义编码
@import 引入css文件(css模块化)
@font-face 自定义字体
@keyframes animation里的关键帧
代码练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>Document</title>
<style>div{
width:300px;
height: 300px;
background: red;
font-size: 100px;
}
@media print{
div{
font-size: 300px;
border: 10px solid #000;
}
}
@media screen{
div{
width:100%;
height:50%;
font-size: 500px;
}
}
</style>
</head>
<body>
头号灵感</body>
</html>
2 媒体特性
width 宽度
min-width max-width
height 高度
min-height max-height
orientation 方向
landscape 横屏——宽度大于高度
portait 竖屏——高度大于宽度
aspect-ratio 宽度比
-webkit-device-pixel-radio 像素比(webkit内核的素有属性)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>Document</title>
<style>div{
width:300px;
height: 300px;
background: red;
}
/* 屏幕尺寸大于1000时候满足 */
@media (min-width:1000px){
div{
font-size: 100px;
border: 10px solid #000;
}
}
@media (orientation:landscape) {
div{
width:400px;
height: 800px;
}
}
@media (orientation:portrait) {
div{
width:800px;
height: 800px;
}
div:after{
content: '头号灵感';
font-size: 200px;
color: rgb(246, 246, 246);
}
}
</style>
</head>
<body>
铁象建站</body>
</html>
3 逻辑运算符——用来进行逻辑判断
and 合并多个媒体类型-并且的意思
, 匹配某个某媒体查询
not 对媒体查询结果取反
only 仅在媒体查询匹配成功后应用样式——用来防范老旧浏览器的直接执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><title>Document</title>
<style>div{
width:300px;
height: 300px;
background: red;
}
/宽度大于700像素且屏幕为横屏的时候/
@media all and (min-width:700px) and (orientation:landscape) {
div{
background-color: blue;
}
}
/宽度小于700像素或者是横屏的时候/
@media (max-width:700px) , (orientation:landscape) {
div{
background-color: rgb(0, 158, 13);
}
}
/宽度大于500像素的时候才满足/
@media not all and (max-width:500px) {
div{
background-color: rgb(198, 226, 39);
}
}
</style>
</head>
<body>
测试逻辑运算符</body>
</html>
发布评论