响应式
什么是响应式网页？就是一套代码适配不同的屏幕宽度，不同的适配
媒体查询：能够根据设备宽度的变化，设置差异化样式
开发常用写法： 媒体特性常用写法 max-width min-width
@media (媒体特性) {
选择器 {
样式
}
}
完整写法：@media 关键词 媒体类型 and (媒体特性) { CSS 代码 }
关键词：and only not
媒体是用来区分设备类型的，如屏幕设备、打印设备等，其中手机、电脑、平板都属于屏幕设备。 类型名称 值 描述 屏幕 screen 带屏幕的设备 打印预览 print 打印预览模式 阅读器 speech 屏幕阅读模式 不区分类型 all 默认值，包括以上3种情形 媒体特性主要用来描述媒体类型的具体特征，如当前屏幕的宽高、分辨率、横屏或竖屏等。 特性名称 属性 值 视口的宽和高 width、height 数值 视口最大宽或高 max-width、max-height 数值 视口最小宽或高 min-width、min-height 数值 屏幕方向 orientation portrait: 竖屏 landscape: 横屏 因为/* CSS属性都有层叠性 */ 所以：min-width（从小到大） max-width（从大到小） 外链式CSS引入 <link rel="stylesheet" media="(min-width: 1200px)" href="./two.css" > <link rel="stylesheet" media="逻辑符 媒体类型 and (媒体特性)" href="xx.css" > BootStrap简介：（使用BootStrap框架快速开发响应式网页） Bootstrap是由 Twitter 公司开发维护的前端UI框架，它提供了大量编好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果 中文官网：https://www.bootcss.com/ 使用步骤：1.引入：Bootstrap提供的CSS代码 <link rel="stylesheet" href="./bootstrap-3.4.1-dist/css/bootstrap.min.css"> 2.调用类：使用Bootstrap提供的样式 container：响应式布局版心 Bootstrap栅格系统：（使用Bootstrap栅格系统布局响应式网页） 栅格化是指将整个网页的宽度分成若干等份 Bootstrap3默认将网页分成12等份 超小屏幕 小屏幕 中等屏幕 大屏幕 响应断点 <768px >=768px >=992px >=1200px 别名 xs sm md lg 容器宽度 100% 750px 970px 1170px 类前缀 col-xs-* col-sm-* col-md-* col-lg-* 列数 12 12 12 12 列间隙 30px 30px 30px 30px .container是Bootstrap 中专门提供的类名，所有应用该类名的盒子，默认已被指定宽度且居中。 .container-fluid也是Bootstrap 中专门提供的类名，所有应用该类名的盒子，宽度均为100%。 分别使用.row类名和.col类名定义栅格布局的行和列。注意：1. container类自带间距15px; 2. row类自带间距-15px 全局样式：目标：掌握BootStrap手册用法，使用全局CSS样式美化标签 分类：布局样式 内容美化样式 手册用法： BootStrap预定义了大量类用来美化页面，掌握手册的查找方法是学习全局样式的重点。 网站首页→BootStrap3中文文档→全局CSS样式→按分类导航查找目标类 组件:目标：使用BootStrap组件快速布局网页 BootStrap提供的常见功能，包含了HTML结构和CSS样式。 使用方法：引入BootStrap样式 复制结构，修改内容 Glyphicons字体图标：目标：使用Glyphicons字体图标实现网页中的图标效果 Glyphicons字体图标的使用步骤：HTML页面引入BootStrap样式文件 准备字体文件(注意路径) 空标签调用对应类名（glyphicon 图标类）
内容少，企业站，适合改成响应式 内容多，类似淘宝，京东，做不了（电商站因为内容太多做不到全部响应式）应该做成PC端、移动端两个网站 标签：Bootstrap,样式,BootStrap,width,No.2,屏幕,CSS From： https://www.cnblogs.com/renzlllj/p/17172279.html