No.2.7

响应式

什么是响应式网页？就是一套代码适配不同的屏幕宽度，不同的适配

媒体查询：能够根据设备宽度的变化，设置差异化样式

开发常用写法：　媒体特性常用写法　　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引入

BootStrap简介：（使用BootStrap框架快速开发响应式网页）

Bootstrap是由 Twitter 公司开发维护的前端UI框架，它提供了大量编好的CSS样式，允许开发者结合一定HTML结构及JavaScript，快速编写功能完善的网页及常见交互效果

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

使用步骤：1.引入：Bootstrap提供的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端、移动端两个网站

巴特西

No.2.7

最新文章

热门文章