【济南校区】前端与移动开发就业班笔记移动web:day05

响应式

在开发当中，一套页面能响应多种终端并且在各种终端下显示的布局和内容不一样而且展示的比较合理，或者说一个网站能适配多种屏幕尺寸类型的网站。这样的一个开发模式就是响应式。

我们一般用bootstrap来帮助我们完成响应式建站。

媒体查询

在响应式开发当中我们使用的是媒体查询中的screen查询浏览器的宽度来定义不同宽度区间的样式和布局。

代码：

[CSS] 纯文本查看 复制代码

@media screen and (min-width: 768px){}
@media screenand (min-width:992px){}
@media screenand (min-width:1200px){}

也可以

[CSS] 纯文本查看 复制代码

@media (max-width: 767px){}
@media (min-width: 768px) and (max-width: 991px){}
@media (min-width: 992px) and (max-width: 1199px){}
@media (min-width: 1200px){}

媒体查询可以指定查询的属性screen也可以不指定默认回去查询屏幕。

可以使用css覆盖的原理，也可以定义区间范围，可以多条件查询。

结构选择器

相邻选择符 (E+F)

语法：E+F{ }

说明：选择紧贴在E元素之后F元素。

兄弟选择符 (E~F)

语法：E~F{ }

说明：选择E元素后面的所有兄弟元素F。

Bootstrap常用样式

container类

用于定义一个固定宽度且居中的版心

row类

因为每一个列默认有一个15px的左右外边距，row类的一个作用就是通过左右-15px屏蔽掉这个边距

col-**-*类

col-xs-[列数]：在超小屏幕下展示几份

col-sm-[列数]：在小屏幕下展示几份

col-md-[列数]：在中等屏幕下展示几份

col-lg-[列数]：在大屏幕下展示几份

xs : 超小屏幕 手机 (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面显示器 (≥992px)

lg : 大屏幕 大桌面显示器 (≥1200px)

hidden 类

hidden-xs,hidden-sm,hidden-md,hidden-lg在不同的屏幕下隐藏。

text-* 类

       text-center 文本居中

       text-left 文本左对齐

       text-right 文本右对齐

       pull-* 类

       pull-left 左浮动类

       pull-right 右浮动类

center-block 类

让一个固定宽度的元素居中。

标签属性

这些属性都是提供给屏幕阅读器的，我们可以忽略。

role

aria-*

class="sr-only"

指定插件类型，和被控制的目标元素

[CSS] 纯文本查看 复制代码

data-toggle
data-target
/*a标签也可以通过href来指定被控制的目标元素*/

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830

【济南校区】前端与移动开发就业班笔记移动web:day05

响应式

在开发当中，一套页面能响应多种终端并且在各种终端下显示的布局和内容不一样而且展示的比较合理，或者说一个网站能适配多种屏幕尺寸类型的网站。这样的一个开发模式就是响应式。

我们一般用bootstrap来帮助我们完成响应式建站。

媒体查询

在响应式开发当中我们使用的是媒体查询中的screen查询浏览器的宽度来定义不同宽度区间的样式和布局。

代码：

[CSS] 纯文本查看 复制代码

@media screen and (min-width: 768px){}
@media screenand (min-width:992px){}
@media screenand (min-width:1200px){}

也可以

[CSS] 纯文本查看 复制代码

@media (max-width: 767px){}
@media (min-width: 768px) and (max-width: 991px){}
@media (min-width: 992px) and (max-width: 1199px){}
@media (min-width: 1200px){}

媒体查询可以指定查询的属性screen也可以不指定默认回去查询屏幕。

可以使用css覆盖的原理，也可以定义区间范围，可以多条件查询。

结构选择器

相邻选择符 (E+F)

语法：E+F{ }

说明：选择紧贴在E元素之后F元素。

兄弟选择符 (E~F)

语法：E~F{ }

说明：选择E元素后面的所有兄弟元素F。

Bootstrap常用样式

container类

用于定义一个固定宽度且居中的版心

row类

因为每一个列默认有一个15px的左右外边距，row类的一个作用就是通过左右-15px屏蔽掉这个边距

col-**-*类

col-xs-[列数]：在超小屏幕下展示几份

col-sm-[列数]：在小屏幕下展示几份

col-md-[列数]：在中等屏幕下展示几份

col-lg-[列数]：在大屏幕下展示几份

xs : 超小屏幕 手机 (<768px)

sm : 小屏幕 平板 (≥768px)

md : 中等屏幕 桌面显示器 (≥992px)

lg : 大屏幕 大桌面显示器 (≥1200px)

hidden 类

hidden-xs,hidden-sm,hidden-md,hidden-lg在不同的屏幕下隐藏。

text-* 类

       text-center 文本居中

       text-left 文本左对齐

       text-right 文本右对齐

       pull-* 类

       pull-left 左浮动类

       pull-right 右浮动类

center-block 类

让一个固定宽度的元素居中。

标签属性

这些属性都是提供给屏幕阅读器的，我们可以忽略。

role

aria-*

class="sr-only"

指定插件类型，和被控制的目标元素

[CSS] 纯文本查看 复制代码

data-toggle
data-target
/*a标签也可以通过href来指定被控制的目标元素*/

如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！

黑马程序员济南中心联系电话：0531-55696830