利用bootstrap框架 实现响应式布局阿里百秀案例以及遇到的问题!
1、案例分析
/* 分析:
从宽度为992之后页面的布局 分为 2/7/3.
先写 最先发生改变的 md:992 -1200;后面都不发生改变
实现md页面;
之后调试md前面的页面,用媒体查询并且加权重来实现样式改变!
*/
2、Bootstrap的文件的引入
<!-- Bootstrap 的文件引入 -->
<
link
href
=
"./css/bootstrap/css/bootstrap.min.css"
rel
=
"stylesheet"
>
<
link
rel
=
"stylesheet"
href
=
"css/index.css"
>
<!-- 条件注释:小于IE9的版本 -->
<!--[if lt IE 9]>
<!--解决ie9以下浏览器对html5新增标签的不识别,并导致CSS不起作用的问题-->
<!--解决ie9以下浏览器对 css3 Media Query 的不识别 -->
<
script
src
=
"//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"
>
<
/
script
>
3、页面的实现
PC端使用流式布局,移动端小页面的时候分情况,怎么方便就怎么使用,注意:浏览器的兼容问题
4、实现的时候出现的问题:
1>想要让 图片显示自身的大小时,
设置 max- width : 100%; 表示的是父元素比自己宽时,取自身元素,比自己小时取父元素的宽度!
2>样式不一样的时候 媒体查询的使用
3>特定的屏幕下,元素的显示与隐藏的设置
格式 :
特定区域下显示 : 例如 :
表示的是在超小屏下是显示的 , info一般是额外控制样式。
特定区域下隐藏:如:<span class = "hidden-xs"> 标签:健康 / 感染 / 指甲 / 疾病 / 皮肤 / 营养 / 趣味生活 span>