响应式布局

目录

1.1媒体查询补充（视口宽度处于某个区间，差异化样式）

1.2 媒体查询 link写法

2.2 bootstrap框架（Twitter公司开发维护）

---

1.1媒体查询补充（视口宽度处于某个区间，差异化样式）

样式具有层叠性，越靠近body区域，则往上重叠

视口区间用min-width（像素值从小到大书写） max-width(从大到小) 用的最多

 

完整写法

@media 关键词 媒体类型 and （媒体特性) {}

关键词:and/only/not（了解）

媒体类型:screen/print/speech/all (screen:带屏幕的设备，print:打印预览模式,speech:屏幕阅读模式，all:包括以上3种情况，了解)

媒体特性：width/height/max-width/max-height/min-width/min-height/orientation

屏幕方向:orientation:portrait(竖屏)/landscape(横屏)

1.2 媒体查询 link写法

在引入css时及在link标签里写媒体查询

屏幕小于等于700px时为link媒体1.css里的样式，700px-920px之间为link媒体.css里的样式

2.2 bootstrap框架（Twitter公司开发维护）

提供了大量编写好的css样式,部分html,js

中文官网:Bootstrap中文网https://www.bootcss.com/

起步 · Bootstrap v3 中文文档 | Bootstrap 中文网https://v3.bootcss.com/getting-started/（bootstrap3）

Bootstrap v4 中文文档 · Bootstrap 是全球最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网https://v4.bootcss.com/ (bootstrap4)

网站首页->bootstrap中文文档->全局css样式->按分类导航查找目标类

网站首页->bootstrap中文文档->组件->复制结构->粘贴

交互效果，在bootstrap页面找到javascript插件

引入js

jquery.js在bootstrap.min.js之前引用，boostrap.min.js里用到了jquery

下载jquery.js

Download jQuery | jQueryhttps://jquery.com/download/

bootstrap3为例：

 

在网页上选择下载用于生产环境的Bootstrap,压缩下载快体积小，直接用

解压后引用css文件

以栅格系统为例，选择全局css样式栅格系统，参考文档使用

超小屏幕手机->小屏幕平板->中等屏幕桌面显示器->大屏幕大桌面显示器的类前缀，将屏幕分为12列

左侧4列，右侧8列 container版心居中 row类的作用是抵消container类的15px的内边距