响应式布局
1.啥叫响应式:根据浏览器页面的设备不同 自动的改变布局 图片 文本 不会影响体验
2.编写响应式的网页:
(1)视口
<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 初始化不允许缩放
maximum-scale=1.0 允许缩放的最大倍率
user-scalable=0 不允许用户缩放
(2)媒体查询
设备条件 media(屏幕尺寸 解析率 横竖屏 ) 硬件条件 screen(pc.pad.phone)
超大屏xl screen>=1200px min-width:1200px
大屏 lg 992px<=screen<1200px
中屏 md 768px<=screen<992px
小屏 sm 576px<=screen<768px
超小屏 xs screen<576px
@media screen and (max-width:575.99px) {
}
@media screen and (min-width:576px) and (max-width:767.99px){
}
@media screen and (min-width:768px) and (max-width:991.99px){
}
@media screen and (min-width:992px) and (max-width:1199.99px){
}
@media screen and (min-width:1200px) {
}
没有screen也不会对编辑有任何影响
一.使用bootstrap
1.所有的boot代码都卸载<div class="container"></div>
container 定宽容器 四种屏幕 都定义了最大宽度 fluid 变宽容器 两种左右都有15px内边距 auto的外边距
2.按钮
btn 基本类,行内块,内边距,文本系列样式,伪类的一系列样式
按钮颜色
btn-danger/warning/success/info/parmary/secondark/dark/light
镂空按钮
btn-ouline-danger/warning...
按钮大小
btn-lo/sm 通过内边距,字号,行高来调整
块级按钮
btn-block