一.响应式布局
1.什么是响应式网页
2.响应式网页必须做到的几件事
1.布局,使用流式布局(默认文档流+浮动)+弹性布局+栅格布局 2.文字和图片大小随着容器大小改变 3.媒体查询技术(css3) 代码复杂程度几何性的增加 复杂网页,不适合使用响应式布局 |
3.如何测试响应式网页
①使用真实设备
好处:真实可靠 缺点:成本高,测试任务量巨大 |
②使用第三方模拟软件测试
好处:方便,快捷 缺点:测试效果有限,有待进一步验证 |
③使用chrome自带的模拟器测试
好处:简单方便 坏处:测试效果十分有限 |
4.编写响应式布局(重点*****************)
①手机适配
视口的设置,如果项目需要在移动端运行,需要设置视口 <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"> |
②所有的内容/文字/图片都使用相对尺寸(尽量),少使用绝对值
③流式布局+弹性布局+媒体查询(栅格布局) 完成响应式布局
④媒体查询
CSS3 Media Query 做响应式的必备技术 Media:媒体,浏览网页的设备 设备:screen(pc/pad/phone) TV/print 根据浏览网页的设备不同(尺寸,方向,硬件,解析度等),有选择的,执行一部分css样式,忽略其他css样式 |
二.BootStrap
1.如何使用boot 2.全局css 3.组件+js插件 4.定制sass 5.boot项目 |
1.如何使用boot
<link rel="stylesheet" href="bootstrap.css"/> |
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方案 |
①按钮相关的class
.btn 基本类 定义了行内块,字号,文本对齐,边框,过渡等 按钮颜色 .btn-danger 红色 .btn-success 绿色 .btn-warning 黄色 .btn-info 藏青 .btn-primary 蓝色 .btn-secondary 灰色 .btn-dark 深色 .btn-light 浅色 不同边框的按钮 . btn-outline-danger/warning/info...... 不同按钮大小 .btn-sm .btn-lg .btn-block . btn-link |
②图片相关
.rounded 添加圆角 0.25rem .rounded-circle 圆形 .img-thumbnail 添加内边距和边框 .img-fluid 响应式图片,图片可以缩放, 但是最大不能超过原始大小 |
③文字相关的class
.text-danger/warning/info.....文本颜色 .h1~.h6 文本字号和加粗 .text-uppercase/lowercase/capitalize 文本大小写,首字母大写 .text-left/right/center 文本对齐 .text-*-left/right/center *:sm/md/lg 媒体查询 .text-justify 两端对齐,注意,没有媒体查询 |
④列表相关
ul .list-unstyled 去点,左内边距清0 .list-group 列表组 li .list-group-item 列表项 ,边框,首元素和尾元素的圆角 颜色 .list-group-item-danger/warning..... 激活项 .active 禁用项 .disabled |
⑤table相关的class
.table 对table本身和table的后代布局 .table-bordered 为table本身和后代添加边框 .table-danger/warning/success...表格颜色 .table-hover 带悬停效果的表格 .table-striped 隔行变色 .table-responsive-* *:sm/md/lg/xl 响应式布局的表格,写在table的父元素上 |
3.辅助类
①边框
.border-0 去掉边框 .border-top/right/bottom/left-0 去掉某一个方向的边框 基本类 .border 灰色实线边框 .border-top/right/bottom/left 单边的灰色实线边框 边框颜色 .border-danger/warning/success..... |
②浮动
.float-left/right/none 响应式浮动 .float-*-left/right/none *:sm/md/lg/xl .clearfix 解决高度坍塌,写在父元素上 |
③显示
.visible visibility:visible .invisible visibility:hidden; |
④背景颜色
.bg-danger/warning/success.... |
⑤圆角
.rounded/.rounded-0 .rounded-top/right/bottom/left 设置某个方向的两个圆角 |
⑥尺寸
w-25/50/75/100 width:25%/50%/75/100% 其它宽度需要自己定义 h-25/50/75/100 同上 mw-100/mh-100 max-width:100%;max-height:100%; |
⑦内外边距
m/mt/mr/mb/ml/mx/my-*-auto/0/1/2/3/4/5 外边距 0:0 1:0.25rem 2:0.5rem 3:1rem 4:1.5rem 5:3rem p/pt/pr/pb/pl/px/py-*-0/1/2/3/4/5 内边距 *:sm/md/lg/xl 响应式的内外边距 |