Bootstrap 框架 , 响应式
1、什么是响应式
响应式:Responsive Web Page,又称为自适应网页,一个页面既可以在PC浏览器中正常访问,也可以在手机/平板中正常访问。而且会配合不同的设备有不同的显示结果。
响应式网页的特点:
1、页面上的图片和文字要随着屏幕的尺寸而发生改变
2、页面的布局也会随着屏幕的尺寸而发生变化
2、如何测试响应式的网页
1、使用真实的物理设备
优势:测试结果真实可靠
不足:设备太多,成本太大,测试任务量大
2、使用第三方的模拟设备
优势:无须添加更多设备
不足:效率偏低,会有结果偏差
3、使用浏览器自带的设备模拟器(Emulator)
优势:简单,功能丰富
不足:会有结果偏差
3、视口 - Viewport
IOS中的Safari中提出的概念
在移动设备中,浏览器里显示网页的一块区域(PC端会忽略此概念)
视口的尺寸:
1、在IE中 :宽度是 1024px
2、非IE中 :宽度是 980px
对于响应式的网页,要设置的视口信息如下:
1、视口的宽度:与设备的物理宽度保持一致
2、视口的初始化缩放倍率:原始大小(不缩放显示)
3、不允许用户手动缩放视口的大小 :不允许手动缩放网页
在HTML中指定视口信息:
<meta name="viewport" content="">
1、视口的宽度 : width
取值:
1、device-width
2、具体数值
2、视口的初始化缩放倍率:initial-scale
取值:
以数字来表示缩放倍率
取值为 1 的话,表示原始大小显示
3、手动缩放视口大小:user-scalable
取值:
1/0/yes/no
1 和 yes :表示允许手动缩放视口大小
0 和 no :表示不允许手动缩放视口大小
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
以上代码,移动端响应式必备!!!
4、如何编写响应式网页(重点)
1、必须声明视口(已解决)
2、文字尽量使用相对尺寸(em,rem),尽量不用绝对尺寸(px,pt)
em:使用当前元素父元素文字大小的倍数
rem:使用当前网页根元素(html)定义的文字大小的倍数
3、容器元素尽量使用相对尺寸(%,auto),尽量不用绝对尺寸(px)
4、图片元素尽量使用相对尺寸(%,auto),尽量不用绝对尺寸(px)
img{
width:50px;/*不推荐:绝对尺寸*/
width:50%;/*推荐:占父元素宽度的50%*/
max-width:50%;/*推荐:占父元素宽度的50%,但最大不能超过图像本身的大小*/
}
ex:
1.jpg 的图像 100px * 100px ,将其放在 80px*80px 元素内,将 1.jpg 的max-width:50%;的话,1.jpg 显示宽度 40px * 40px
如果将1.jpg 放在 800px * 800px 元素内,将1.jpg 的max-width:50%;的话,1.jpg显示宽度为 100px*100px
如果将1.jpg 放在 800px * 800px 元素内,将1.jpg 的width:50%;的话,1.jpg显示宽度为 400px*400px
5、页面元素尽量使用流式布局
流式布局的特点:
1、元素默认是靠向容器的左上方开始排列的
2、横向排列,排列不下时则换行
方法1:float
方法2:display:inline-block;
方法3:弹性布局 要 配合着 flex-wrap:wrap;
6、响应式网页都要使用CSS3 Media Query的技术来判断设备的尺寸 - 最重要
ex:
1、设备的宽度 w <= 767px 背景色 红色
2、设备的宽度768px<=w<=991px背景色 绿色
3、设备的宽度w>=992px 背景色为 粉色
5、CSS3 Media Query
CSS3 媒体查询技术
作用:可以根据不同的媒体类型以及特性去执行不同的CSS
语法:
通过 @media 的规则进行声明
@media MEDIA-TYPE and (MEDIA-FEATURE) and (MEDIA-FEATURE)
MEDIA-TYPE : 媒体类型
取值:
1、all,默认值,表示所有设备
2、screen :屏幕(PC , PAD , PHONE)
3、tv :电视设备
MEDIA-FEATURE : 媒体特性(属性)
取值:
1、width :指定浏览器宽度大小
2、min-width :判断指定浏览器窗口宽度最小值
3、max-width :判断指定浏览器窗口宽度最大值
ex:
1、在屏幕(PC,PAD,PHONE)下,宽度在767px以内,将body的背景色改为 红色
@media screen and (max-width:767px){
body{
background:red;
}
h1{
font-size:1.5em;
}
}
2、在屏幕(PC,PAD,PHONE)下,宽度在768~991之间,将body的背景改为 绿色
@media screen and (min-width:768px) and (max-width:991px){
body{
background:green;
}
h1{
font-size:1.8em;
}
}
3、在屏幕(PC,PAD,PHONE)下,宽度在992px以上,将body的背景色改为 粉色
@media screen and (min-width:992px){
body{
background:pink;
}
h1{
font-size:2em;
}
}
@media 具体使用:
1、有选择性的执行CSS片段中的内容
<style>
@media screen and (min-width:768px){
}
@media screen and (max-width:767px){
}
</style>
2、有选择性的执行某个外部CSS文件
<link rel="" href="1.css" media="screen and (min-width:768px)">
当屏幕的尺寸在768px以上时,执行1.css中的内容
不足:即使不满足当前设备条件的CSS也会被请求,但不会被执行
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。