响应式布局

适合用于企业网站和非常非常小的布局，不适合电商网站（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

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

html响应式布局_媒体查询
html响应式布局_媒体查询 1 在html页面中根据不同的屏幕尺寸引入不同的css样式文件 <link href="styl1.css" type="text/c ...
响应式布局之媒体查询
媒体查询主要是对各种移动端设备的一个响应式兼容,可以在 @media only screen and (min-width: 屏幕宽度最小值) and (max-width: 屏幕宽度最大值){你所要 ...
移动端WEB开发——响应式布局
移动端WEB开发之响应式布局 1.0 响应式开发原理 1.1 响应式开发原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的. 设备的划分情况: 设备划分尺寸区间超 ...
计算机常用屏幕分辨率,pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）...
PC端************ 按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.1 ...
pc显示器分辨率前端_@media 响应式PC端媒体查询屏幕分辨率尺寸总结
最近在写一个PC端的活动页面,想让页面适配不同的分辨率,既然提出了这样的需求,那么我们就要去尽量满足.因为之前一直写的是固定版心,然后在将容器居中,这样写的话,就导致页面在低分辨屏幕下会出现横向的滚动 ...
移动端网页开发)------响应式网页
移动端网页开发移动端网页开发的两种方案: 响应式网页开发一个新的网站.使用移动端的布局方式. 响应式网页概念同一个网页会根据视口的不同,显示不同的样式. 优缺点优点面对不同分辨率的设备比较 ...
移动web现状、viewport视口、二倍图、移动web开发主流方案、布局技术选型(流式布局、flex弹性布局、less+rem+媒体查询布局、混合布局、媒体查询、bootstrap)
移动端web现状: 移动端常见浏览器:UC浏览器,QQ浏览器,Opera浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器及杂牌浏览器.移动端常见的浏览器都是基于webk ...
前端开发响应式布局和移动端布局有哪些特点和区别？
同学们在进行前端开发的时候经常会运用到响应式布局,在进行移动端页面开发的时候还会使用到移动端布局的知识,那么你知道他们都有哪些优缺点和相同之处吗?下面小千就来给大家列举一下. 响应式布局响应式布局是 ...
web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...

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