《HYLI5教程课件》-《HYLI5教程课件》-第九章 跨平台响应式技术

2021跨平台响应式技术03Bootstrap框架01响应式媒体查询目录CONTENT02响应式网页设计响应式媒体查询019.1.1媒体类型查询媒介类型功能描述all用于所有的媒介设备。screen用于电脑显示器。print用于打印机。aural用于语音和音频合成器。braille用于盲人用点字法触觉回馈设备。embossed用于分页的盲人用点字法打印机。handheld用于小的手持的设备。projection用于方案展示，比如幻灯片。tty用于使用固定密度字母栅格的媒介，比如电传打字机和终端。tv用于电视机类型的设备。@media媒体类型and|not|only（媒体特性）{选择器{属性：值；}}其中，@media是媒体查询的关键字，启动识别媒体类型或者媒体特性的语法。媒体类型默认是“all”指所有媒体，标示我们的页面在所有媒体上应用统一的样式。媒介查询需要声明在普通样式后面，下面这样声明将不会起作用：@mediascreenand(min-width:1280px){/*willnottakeaffect*/a{text-decoration:underline;}}a{text-decoration:none;}<linkrel=“stylesheet”media=“媒体类型and|not|only（媒体特性）”href=“链入的样式表路径”>9.1.2媒体特性查询<metaname="viewport"content="width=480,initial-scale=1.0"/>为了响应式设计的需要，我们通常采用如下的视窗设置来让我们的页面在不同尺寸的屏幕上获得最佳的视觉效果：<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes">上面的语句设置了浏览器视窗宽度为设备的宽度，初始缩放比例为1，最小缩放比例为1，最大缩放比例为2，允许用户缩放页面。@media媒体类型逻辑关键字（媒体特性）{选择器{属性：值；}}回顾上面的媒体查询语法，其中逻辑关键字可以是“and”，“not”，“only”，分别表示逻辑“且”，“非”，“仅”；媒体特性则主要分为宽度，高度，高宽比，颜色，分辨率等特性。媒体特性意义例width当页面宽度等于属性值时，应用指定的CSS样式@media(width:480px){...}min-width当页面最小宽度等于480px时（页面宽度大于等于480px），应用大括号中的CSS样式@media(min-width:480px){...}max-width当页面最大宽度等于480px时（页面宽度小于等于480px），应用大括号中的CSS样式@media(max-width:480px){...}height当页面高度等于属性值时，应用指定的CSS样式@media(height:480px){...}device-width当设备宽度等于属性值时，应用指定的CSS样式@media(device-width:480px){...}device-height当设备高度等于属性值时，应用指定的CSS样式@media(device-height:480px){...}orientation页面为横向（横屏）时应用大括号中的样式@media(orientation:landscape){...}aspect-ratio页面宽高比为3:2时应用大括号中的样式@media(aspect-ratio:3/2){...}device-aspect-ratio设备宽高比为3:2时应用大括号中的样式@media(device-aspect-ratio:3/2){...}color输出设备为彩色设备时应用大括号中的样式@media(color){...}color-index输出设备为256真彩色设备时应用大括号中的样式@media(color-index：256){...}resolution设备分辨率为96dpi时应用样式@media(resolution:96dpi){...}【案例引入】响应式网页设计021.条件表达式下面这几个查询就是width（宽度特性）和媒体类型为屏幕的综合应用：@mediascreenand(width:320px){ /*stylesadaptedtodeviceswhich(width==320px)*/} @mediascreenand(min-width:320px){ /*stylesadaptedtodeviceswhich(width>=320px)*/} @mediascreenand(max-width:960px){ /*stylesadaptedtodeviceswhich(width<=960px)*/}在上面的代码中，我们使用了一个and逻辑关键字将前后的表达式连接起来，这是很常见的用法，另外还有not和only。其中not用于对整个表达式的结果取反，如果我们希望匹配320px及以下宽度的设备，下面两个表达式是等效的： @mediascreenand(max-width:320px){/*styles*/} @medianotscreenand(min-width:320px){/*styles*/}而only用于兼容老版本的浏览器。对于老版本的浏览器，是不支持媒介查询的，但也会尝试下载这些样式，这时候我们可以使用only关键字，对老版本的浏览器隐藏媒介查询，使之忽略这些样式，而对于那些高版本的浏览器，则会继续处理带有only关键字的查询语句，使用时就像下面这样声明：@mediaonlyscreenand(min-width:320px){/*styles*/}另外还存在一个类似or的逻辑，如果希望在多个查询中只要存在有匹配的语句就去应用指定的样式，我们可以使用逗号来表示，这跟普通CSS代码中的使用方式是一样的： @mediascreenand(min-width:320px),@mediaprint{/*styles*/}2.布局流程在建立响应式页面时，有两种不同的思想，第一种是从桌面端开始向移动端扩展设计，第二种是从移动端开始向桌面端扩展设计。前者默认是以桌面端为主，添加一些媒介查询来兼容移动端设备；而后者正好相反，从移动端开始逐步向桌面端适配。9.2.2响应式导航我们希望页面在大屏幕时，导航栏显示在上方，当页面缩小到手机大小时，导航栏能够隐藏起来，只有我们点击相应的图标时才显示9.2.3响应式图像1、

img元素的处理通过设置img元素的宽度为相对父元素百分比的宽度，然后把img元素放到一个响应式的布局容器中，img元素随父元素的缩放同步缩放，就可以实现图片的响应式排版。Css语法如下：img{width:100%;height:auto;}为了防止图片由于过度放大导致的失真，我们可以使用max-width属性很好的解决这个问题。这样图片最大不超过原始大小。img{max-width:100%;height:auto;}2、背景图片的处理背景图片可以响应式的调整大小或缩放。具体做法为通过background-size属性指定背景的大小，常用的写法如下：background-size：contain;/*背景覆盖容器的内容区*/background-size：100%100%;/*背景覆盖整个容器*/background-size：cover;/*背景覆盖整个容器*/contain属性值指定背景图片按比例缩放以覆盖内容区域。注意该属性图片保持其原始高宽比例不变，可能会导致图片无法完全覆盖内容区。cover属性则会把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。注意该属性保持了图片的比例，因此背景图像的某些部分无法显示在背景定位区域中。3.不同设备显示不同图片

小尺寸图片可以显示在小屏幕上，但在大屏幕上会存在因为缩放导致的失真等问题，不能很好显示。而我们没有又必要在小屏幕上去加载大图片，这样很影响加载速度。所以我们可以使用媒体查询，根据不同的设备显示不同的图片。Bootstrap框架039.3.1Bootstrap框架简介Bootstrap是基于HTML、CSS、JAVASCRIPT的用于快速开发Web应用程序和网站的前端框架，它提供了一套完整的可用于web前端开发的组件和样式。Bootstrap框架里的组件常常放在主容器中，且最好一个界面只有一个主容器，主容器有两类：container和container-fluid，它们的区别在于：container：固定宽度并支持响应式布局的容器。虽然padding为15px，但随着浏览器宽度的不同，容器距浏览器边框的margin不同，即margin会响应式的变化。container-fluid：用于100%宽度，占据全部视口（viewport）的容器。仅padding为15px，容器没有margin值。9.3.2Bootstrap栅格系统Bootstrap提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin用于生成更具语义的布局。栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下Bootstrap栅格系统的工作原理：.row元素必须包含在.container（固定宽度）或.container-fluid（100%宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。通过“行（row）”在水平方向创建一组“列（column）”。内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。类似

.row和.col-xs-4这种预定义的类，可以用来快速创建栅格布局。Bootstrap源码中定义的mixin也可以用来创建语义化的布局。通过为“列（column）”设置padding属性，从而创建列与列之间的间隔（gutter）。通过为.row元素设置负值margin从而抵消掉为.container元素设置的padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。负值的

margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个.col-xs-4来创建。如果一“行（row）”中包含了的“列（column）”大于12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。栅格类适用于与屏幕宽度大于或等于分界点大小的设备

，

并且针对小屏幕设备覆盖栅格类。

因此，在元素上应用任何

.col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格类。因此，在元素上应用任何.col-lg-*不存在，也影响大屏幕设备。【案例引入】9.3.3使用栅格系统进行响应式布局采用容器内行(row)列(column)布局方式，.column必须包含在.row中，.row必须包含在.container中；.container可以包含多个.row，.row可以包含多个.column;展示的内容应当放置于.column类中，并且只有.column可以作为.row的子元素;使用类似于.row.col-xs-4等预定义类，快速创建栅格化布局；栅格类适用于屏幕宽度大于或等于分界点大小的设备，并且针对小屏幕设备覆盖栅格化类，比如.col-md-*在.container-fludid宽度≥992px时生效；常用布局方式类似于下图媒介分类Bootstrap将屏幕大小分为4类/*屏幕大小小于768px*/@media(max-width:767px){...}/*屏幕最小宽度为768px*/@media(min-width:768px){...}/*屏幕最小宽度为992px*/@media(min-width:992px){...}/*屏幕最小宽度为1200px*/@media(min-width:1200px){...}代表屏幕大小的几个缩写形式：xs：extrasmall特别窄屏幕，默认指浏览器像素宽度小于768px；sm：small窄屏幕，默认指浏览器像素宽度大于等于768px，通常是平板宽度；md：middle中等宽度屏幕，默认值指浏览器像素宽度大于等于992px，通常是桌面显示器，略缩小的情况；lg：large大屏幕，默认值指浏览器像素宽度大于等于1200px。预期结果：（1）container≥1200px(lg):4列布局1：2：8：1；（2）container≥992px&&container＜1200px(md)：3:3:3:3（3）container≥768px&&container＜991px(sm)：2:4:4:2（3）container＜768px(xs)：div默认display:block实际运行结果：9.3.4Bootstrap字体图标字体图标是在Web项目中使用的图标字体。虽然，GlyphiconsHalflings需要商业许可，但是您可以通过基于项目的Bootstrap来免费使用这些图标。字体图标是Bootstrap框架中非常好用的一个功能，只要添加简单的样式，无需导入图标即可实现图标的显示。通常使用<span>渲染字体图标，并将该元素放置在<button>或<a>内。徽章（Badges）主要用于突出显示新的或未读的项。如需使用徽章，只需要把<spanclass="badge">添加到链接、Bootstrap导航条等这些元素上即可。效果如下图9.3.5

Bootstrap响应式表格Bootstrap为<table>标签设计了.table类，可以为其赋予基本的样式—少量的内边距（padding）和水平方向的分隔线。将任何.table元素包裹在.table-responsive元素内，即可创建响应式表格，其会在小屏幕设备上（小于768px）水平滚动。当屏幕大于768px宽度时，水平滚动条消失。通过.table-striped类可以给<tbody>之内的每一行增加斑马条纹样式。添加.table-bordered类为表格和其中的每个单元格增加边框。添加.table-hover类可以让<tbody>中的每一行对鼠标悬停状态作出响应。Class描述.active鼠标悬停在行或单元格上时所设置的颜色.success标识成功或积极的动作.info标识普通的提示信息或动作.warning标识警告或需要用户注意.danger标识危险或潜在的带来负面影响的动作9.3.6

Bootstrap响应式导航条Bootstrap导航条是在您的应用或网站中作为导航页头的响应式基础组件。它们在移动设备上可以折叠（并且可开可关），且在视口（viewport）宽度增加时逐渐变为水平展开模式。bootstrap导航条元素.navbar给导航设置了一些基本的样式，你可以联合.navbar-default启用一个默认的导航条样式。navbar-header类常常用来给导航条的第一个栏目做美化，navbar-nav类适合应用到导航列表<ul>元素上。当你要设计一个下拉式的导航菜单时，bootstrap为你提供了dropdown-menu类来处理你的导航列表。务必使用

<nav>元素包含你的导航条，或者，如果使用的是通用的

<div>元素的话，务必为导航条设置role="navigation"属性，这样能够让使用辅助设备的用户明确知道这是一个导航区域。响应式盒子弹性布局049.4.1盒子模型CSS盒子模型(BoxModel)CSS把所有HTML元素可以看作盒子，它包括：外边距（margin），边框（border），内边距（padding），和元素内容（content）。盒模型允许在其它元素和周围元素边框之间的空间放置元素。不同部分的说明：Margin(外边距)-边框外的区域，外边距是透明的。Border(边框)-围绕在内边距和内容外的边框。Padding(内边距)-内容与边框之间的区域，内边距是透明的。Content(内容)-盒子的内容，显示文本和图像等。元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距9.4.2

使用弹性布局页面布局一直都是web应用样式设计的重点，传统的布局方式都是基于盒模型的，利用display、position、float来布局有一定局限性，比如说实现自适应垂直居中，随着响应式布局的流行，CSS3引入了更加灵活的弹性布局模型，flex弹性布局，使用弹性布局可以有效的分配一个容器的空间即使的容器元素尺寸改变，它内部的元素也可以调整它的尺寸来适应空间。若想让一个元素变成弹性盒，很简单：.demo{/*块级元素*/display:flex;}.demo{/*行级元素*/display:inline-flex;}设置了flex布局后，子元素的float、clear和vertical-align属性就会失效.flex-box{display:flex;/*弹性布局*/width:500px;height:100px;border:1pxsolidblack;}9.4.3

弹性盒子布局相关属性详解在讲那些属性之前，先来看一些基本概念，设置了flex布局的元素，称为“flex容器”，简称“容器”，它的子元素，称为“flex项目”，简称“项目”。具体模型如下图：“容器”中有两条垂直的坐标轴，横向的叫做主轴，纵向的叫做交叉轴，主轴左边与右边分别叫做主轴起点与主轴终点，交叉轴上边与下边分别叫做交叉轴起点与交叉轴终点。“项目”也有两个名词，每个项目的宽与高叫做主轴尺寸与交叉轴尺寸。这回就能理解了为什么使用弹性布局后子元素呈现行排列，项目在容器中就是沿着主轴排列的。属性名意义属性值flex-direction指定“项目”排列方向row横排（默认）row-reverse反向横排column竖排column-reverse反向竖排justify-content内容对齐属性，指定内容相对于主轴对齐方式flex-start项目向行头紧挨着填充。flex-end项目向行尾紧挨着填充。center项目居中紧挨着填充。space-between项目平均分布在该行上space-around项目平均分布在该行上，两边留有一半的空间。align-items设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。flex-start：侧轴（纵轴）起始端对齐。flex-end：侧轴（纵轴）末端对齐。center：侧轴（纵轴）居中对齐。baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照'min/max-width/height'属性的限制。flex-wrap指定弹性盒子的子元素换行方式。nowrap：默认，弹性容器为单行。该情况下弹性子项可能会溢出容器。wrap：弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行wrap-reverse：反转wrap排列。align-content用于修改flex-wrap属性的行为。类似于align-items,但它不是设置弹性子元素的对齐，而是设置各个行的对齐。Stretch：默认。各行将会伸展以占用剩余的空间。flex-start：各行向弹性盒容器的起始位置堆叠。flex-end：各行向弹性盒容器的结束位置堆叠。Center：各行向弹性盒容器的中间位置堆叠。space-between：各行在弹性盒容器中平均分布。space-around：各行在弹性盒容器中平均分布，两端保留子元素与子元素之间间距大小的一半。【案例引入】这张图片分别对应了flex-direction属性的值为column-reverse、column、row、row-reverse时的排列样式。并没有改变项目的宽，但是由于处于弹性盒中项目过多，项目在主轴上被压缩。如果需要调整为项目过多时，自动新启一行，如下图的排列效果：弹性盒的项目默认都是排列在一个轴上的，这样如果项目多的话，会“弹性”压缩在一行，比如说多加一些项目，如下图：前两个都理解了，第三个属性值wrap-reverse，如果需要换行的项目会排在上面，像下图这样，则需要把flex-wrap的属性值调整为：wrap-reverse。justify-content属性验证，通过为justify-content属性设置不同的值，观察弹性项目的排版效果。具体效果如下：flex-start：

flex-end：

center：

space-between：

space-around：

align-items属性验证，通过为align-items属性设置不同的值，观察弹性项目的排版效果。具体效果如下：flex-start：

flex-end：

center：

baseline：

align-contentalign-content属性定义多根轴线的对齐方式，这个属性只有在容器有多条主轴是才有效，一条主轴无效，类似于justify-content属性，下面通过分别指定不同的值，来观察具体的效果。

flex-start：

flex-end：

center：

space-between：

space-around：

项目属性弹性盒布局“项目”有如下属性：orderflex：flex-grow、flex-shrink、flex-basisalign-selforderorder允许自定义项目的排列顺序，默认为0，属性值是数字，数值越小越靠前，有点类似优先队列中的优先级。如下部分代码：.flex-item:nth-child(1){......order:99;}.flex-item:nth-child(2){......order:-1;}.flex-item:nth-child(3){......}flex-growflex-grow定义项目的放大比例，默认是0，就是如果没有占满容器整行，也不放大项目，就像上面的图片。如果像下图这样，自动填充满弹性容器。.flex-item:nth-child(1){......flex-grow:1;}.flex-item:nth-child(2){......flex-grow:2;}.flex-item:nth-child(3){......flex-grow:3;}flex-shrinkflex-shrink定