Bootstrap
五.Bootstrap
官网:https://getbootstrap.com/
中文官网:https://bootcss.com/
1.响应式布局
1.什么是响应式网页
Responsive web page:响应式网页,可以根据浏览 器设备的不同(pc/pad/phone)而自动的更改布局,图片文字效果,不会影响用户的浏览体验。
2.响应式网页必须做到
1.布局:不能固定宽度,必须是流式布局
2.文字和图片大小随着容大小而改变
3.使用媒体查询
响应式网页存在的问题:代码的复杂大大提升,适用于内容不太多的页面。
3.如何测试响应式网页
1.方式1:使用真实设备测试
好处:测试效果真实可靠
不足:测试任务量较大
2.使用第三方模拟测试软件
好处:无需添置太多真实设备,方便测试
不足:测试效果有限,有待进一步测试
3.使用Chrome等浏览器自带模拟设备
好处:简单方便
不足:测试效果有限,需要进一步测试
4.如何编写响应式网页
1.声明元标签(viewport-手机适配)
<meta name="viewport" content="width=device-width, initial-scale=1.0">
viewport元标签:
早期3G手机为了浏览大尺寸的网页,只能强行把网页缩小,导致文字,图片等变小。
ios提出了"视口",视口用于盛放网页内容,超过部分,滑动显示。android也借用了此概念。
width=device-width 表示视口的宽度就是设备的宽度
initial-scale=1.0 表示视口是否缩放,1.0不缩放
maximum-scale=1.0 允许用户缩放的最大倍率
minimum-scale=1.0 允许用户缩放的最小倍率
user-scalable=0 是否允许用户手动缩放,取值yes/no/1/0
2.所有的容器/文本/图片 使用相对尺寸不使用绝对尺寸
ex:
div{
/* width:1000px;*/绝对值
width:100%;//相对值
/*font-size:24px;*/ 绝对值
font-size:1rem; 相对值
}
3.流式布局+弹性布局
实现方法:float+flex
4.使用CSS3媒体查询技术---这是响应式布局必须条件
Media:媒体,指的是浏览网页的设备,如screen(pc/pad/phone),tv(电视),print(打印机)
Medai Query:媒体查询,可以自动根据当前设备类型的不同,或者特性(方向,尺寸,解析度)不同,有选择器的执行部分的css样式,忽略其他部分。
媒体查询的两种使用方法:
(1)根据媒体查询结果使用不同的外部css文件
<meta name="viewport" content="width=device-width,initial-scale=1.0" >
<link media="screen and (min-width:992px)" rel="stylesheet" href="pc.css">
<link media="screen and (max-width:991px) and (min-width:768px)" rel="stylesheet" href="pad.css">
<link media="screen and (max-width:767px)" rel="stylesheet" href="phone.css">