利用bootstrap框架 实现响应式布局阿里百秀案例以及遇到的问题！
利用bootstrap框架 实现响应式布局阿里百秀案例以及遇到的问题！
发布时间：2020-08-11 13:48:32 来源：ITPUB博客 阅读：342 作者：小威锅XWG907 栏目：移动开发
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不起作用的问题–>
< script src = "//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js" > < / script >
<!–解决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>
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[