2.4移动Web网页开发——响应式布局（含媒体查询和bootstrap）

响应式布局

适合用于企业网站和非常非常小的布局，不适合电商网站（PC、移动分开做）

媒体查询

视口宽度变化@media(max-width: 768px){}

@media(max-width: 768px){
background-color: blue;} 要蓝色生效视口最大宽度不超过768
@media(min-width: 768px){background-color: blue;}
css样式有层叠性

• 其实完整写法是（简单了解，不会用到下面的三点：关键词、媒体特性、and）

• 关键词
  
• 媒体类型
  

外链式CSS引入

根据所需要的要求引入相关css文件

要是没有meida就是最后一个css样式生效
并且对于引入的媒体查询是没有@符号的，@只写在css文件里面

例如模仿京东网站的，视口低于某值就隐藏某个块

完整代码如下，左右两边两个块

bootstrap

引入

官网：https://www.bootcss.com/

前端代码引入<link ewl=“stylesheet” href=“./bootstrap-3.4.1-dist/css/bootstrap.min.css”

如果不嫌麻烦可以依次去调媒体查询，否则可以直接调用bootstrap，例如下面的代码随着视口变化的实现效果是：四个排一行、两行两列、四个排一列。

注意col-xs-12这种是自带padding的

源码是用less写的，底层是用sass写的

bootstrap栅格系统

网页等分成12小份

上面的类前缀中星号*就是份数：col-xs-*、col-sm-*、col-md-*、col-lg-*
并且还要把屏幕的像素记下来768（小于）、992、1200（大于等于）
所以前面的四个6就会有两行，一行排俩

还有这种

.container布局

本身的.container容器会有内边距padding，里面的内容没有挨着边缘。如果我们想要他挨着边框，一种方法是重新设置css进行覆盖，

或者给内容加上一个.row类名（有外边距margin:-15px）

.container-fluid宽度100%：自带左右各15px的padding

全局CSS样式

点进css样式，进去先看右边导航栏，进行选择

表格为例

初始写好的表格是这样的

然后加自己想要效果的类名,可以看出先加一个基本类名，再是基本类名的延伸
注意col-xs-12这种是自带padding的

对排版样式不满意

辅助类pull-left也类似于float-:eft

响应式工具调节屏幕显示的工具
某个盒子对于某个视口区间是显示还是隐藏（就像之前写左侧栏手动写媒体隐藏比较麻烦）

组件用法

图标库

准备行内标签，粘贴类名

Javascript插件用法

头部引入bootstrap的css（包含了项目所必须的base.css）
body引入两个js，先引入jquery的在前面，因为bootstrap的有引入

现在下拉菜单就有效果了

定制

以视口为例，默认bootstrap的是sm才会把四个菜单栏变选项列表，找到菜单栏的bootstrap的类名哪个是改变选项视口列表的，然后得到类名去定制相应的找到(ctrl+F），修改变量名。例如之前是@screen-sm-min改成md这样就可以在小于992（因为992这个数字是md）就生效了，而不需要在小于768折叠

补充

bootstrap模板里面本身类关系有权重层次太过复杂，且height:auto;
让他划掉不生效，只有在自己写的less语句更改后面添加!important