响应式布局
响应式网页:在不同的屏幕尺寸下,页面的布局出现不同的效果(一套代码兼容多个样式的网页)
核心:媒体查询
媒体特性常用写法:max-width(<=)、min-width(>=)
// 视口宽度 小于等于768px @media(max-width:768px) { body { background-color:pink; } }
// 视口宽度 大于等于px @media(min-width:1200px) { body { background-color:pink; } }
书写顺序:
受层叠性的影响:min-width:从小到大
max-width:从大到小
关键词:and、only、not (了解)
单独设置某个区间
@media(min-width:768px) and (max-width:1200px){ body { background-color:pink; } }
媒体查询:link引入方式
<!-- 视口宽度 >= 992px,网页背景色为粉色 --> <!-- 视口宽度 >= 1200px,网页背景色为绿色 --> <link rel="stylesheet" href="路径" media="(min-width992px)"> <link rel="stylesheet" href="路径" media="(min-width1200px)">
媒体查询-隐藏
//如果检测到视口宽度小于768px, 认为是手机端, left隐藏 @media (max-width:768px) { .left { display: none; } }
BootStrap 框架
使用BootStrap框架快速开发响应式网页
简介:前端UI框架,大量编写好的CSS样式
中文官网:https://www.bootsheet.com/
使用步骤:
1、引入:
<link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"> <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.css">
2、调用
container :响应式布局版心类
使用BootStrap栅格系统布局响应式网页
默认网页等分成12等份
超小屏幕 小屏幕 中等屏幕 大屏幕
<768px >=768px <=992px >=1200px
xs sm md lg
版心宽度 100% 750px 970px 1170px
类前缀 col-xs-* col-sm-* col-md-* col-lg-*
列数 12 12 12 12
列间隙 30px 30px 30px 30px
栅格系统的版心:
注意:1、container类自带间距15px
2、row类自带间距 - 15px (抵消父级container15px的内边距)
container - fluid 通栏效果,自带左右15px 的内边距
BootStarp其他组件作用:
全局CSS样式:设置单独标签样式
组件:区域样式
JS插件:交互效果
定制
字体图标:用法类似iconfont图标的使用,引入JS文件后,直接复制类名使用
JS插件实现常见的交互效果:
1、引入BootStrap样式
2、引入JS文件:(顺序) jQuery.js + BootStrap.min.js
3、复制框架提供的代码,修改内容