Web前端技术HTML5+CSS3+响应式设计 课件 9-响应式web设计原理

Web前端技术（HTML5+CSS3+响应式设计）第9章

响应式web设计原理问题的导入前面我们学习的网页设计主要是针对pc端，随着移动互联的发展，移动互联网成为了Internet的重要组成部分。如何让网页适应不同的终端设备，在不同的终端上显示相同的效果，这就是响应式设计要解决的问题。导入问题学习目标9.1理解视口的概念9.2掌握CSS3媒体查询9.3掌握弹性盒布局9.4掌握网格布局手机屏幕分辨率不同，宽度高度就不同，同一张图片在不同的手机上显示的位置和大小，在视觉存在差异，我们需要在不同设备上进行适配，使得相同的网页在不同屏幕上显示的效果一致，这就是视口要解决的问题。9.1.1视口的概念在PC端，视口指的是浏览器的可视区域，其宽度和浏览器窗口的宽度保持一致移动端则较为复杂，它涉及到三个视口：布局视口（LayoutViewport）、视觉视口（VisualViewport）和理想视口（IdealViewport）。。9.1.1视口的概念移动端浏览器厂商必须保证即使在窄屏幕下网页的页面也可以很好展示，他们将视口的宽度设计得比屏幕宽度宽出很多。这样在移动端，视口与移动端浏览器屏幕宽度就不再关联，而是完全独立的了。我们称它为布局视口，在这种情况下，一般通过手动缩放网页，来查看网页的内容。布局视口（layoutviewport）视觉视口（visualviewport）视觉视口是用户当前看到的区域，用户可以通过缩放操作视觉视口，同时不会影响布局视口，布局视口还是保持在原来的宽度。图中红色的箭头代表视觉视口。理想视口（idealviewport）布局视口的默认宽度并不是一个理想的宽度。对设备而言是最理想的布局视口尺寸就是设备宽度，用户无需进行缩放。定义理想视口是浏览器的工作：<metaname=“viewport”content=“width=device-width”>该语句通知浏览器布局视口的宽度应该和理想视口宽度一致<metaname="viewport"content="user-scalable=no,width=device-width,initial-scale=1.0,maximm-scale=1.0">9.1.2如何设置视口

属性名取值描述widthdevice-width定义视口的宽度为设备的宽度initial-scale[0.0-10.0]定义初始缩放值minimum-scale[0.0-10.0]定义缩小最小比例，可省略maximum-scale[0.0-10.0]定义放大最大比例，可省略user-scalableyes/no定义是否允许用户手动缩放页面，默认值yes9.1.3图像自适应在响应式设计中，图像要随着屏幕的缩放而自动缩放.img{display:inline-block;height:auto;max-width:100%;}9.1.3文字自适应在css3中引进了一个新的相对单位rem，它的相对只是HTML根元素。所有浏览器的默认字体都是16px，所有未经调整的浏览器都符合:16px=1em=1rem。那么10px=0.625em=0.625em。为了简化font-size的换算，在html选择器中声明font-size=62.5%，这就使rem值变为16px*62.5%=10px,即10px=1rem,也就是说只需要将原来的px数值除以10，就可以换算成rem。在CSS3规范中，媒体查询可以根据视口宽度、设备方向等差异来改变页面的显示方式。可以针对不用的媒体类型定义不同的样式，也可以针对不同的屏幕尺寸设置不同的样式，特别是针对响应式web设计。媒体查询语句由媒体类型和条件表达式组成。9.2媒体查询语法格式：@mediamediatypeand|not|only(mediafeature){Csscode}说明：1、媒体类型(media-type)：all——所有设备screen——用于电脑屏幕，平板电脑，智能手机等。print——用于打印机和打印预览。speech——应用于屏幕阅读器等发声设备网页设计一般只针对screen。9.2媒体查询2、媒体特征规则(media-feature-rule)max-width（最大宽度）、min-width（最小宽度）、max-height（最大高度）、min-height（最小高度）。3、not、only和and关键字的含义not：对整个媒体查询的含义取反。only：仅在整个查询匹配时才会生效。and：用于将多个媒体查询组合成一条媒体查询，它们都是可选的。但是，如果使用not或only，则还必须指定媒体类型。当浏览器尺寸小于960px时候的代码@mediascreenand(max-width:960px){body{background:red;}}当浏览器尺寸大于960px时候的代码：@mediascreenand(min-width:960px){body{background:orange;}}9.2媒体查询混合使用上面的用法：@mediascreenand(min-width:960px)and(max-width:1200px){body{background:yellow;}}上面的这段代码的意思是当页面宽度大于960px小于1200px的时候执行下面的CSS媒体查询9.2.3汉堡菜单的制作随着移动平台浏览量的增长越来越多，网站为了适应移动平台的浏览体验，大部分响应式网页都喜欢采用汉堡包菜单这种形式来展示网站的导航。详见代码demo9-4.html9.3弹性盒布局

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的项目进行排列、对齐和分配空白空间。即便容器中项目的尺寸未知或是动态变化的，弹性盒布局模型也能正常的工作。在该布局模型中，容器会根据布局的需要，调整其中包含的项目的尺寸和顺序来最好地填充所有可用的空间。当容器的尺寸由于屏幕大小或窗口尺寸发生变化时，其中包含的项目也会被动态地调整。9.3.1什么是弹性布局把display属性的值为flex或inline-flex则容器为弹性容器。弹性盒模型由弹性容器(Flexcontainer)、弹性子元素(Flexitem)和轴三部分组成.弹性容器内子元素为弹性子元素。弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。9.3.2弹性布局9.3.2弹性容器flex-directionflex-wrapflex-flowjustify-contentalign-items1.flex-direction：设置容器内元素的排列方向，语法格式：flex-direction:row|row-reverse|column|column-reverse说明：row：盒子内的元素按X轴方向顺序排列，默认值。row-reverse：盒子内的元素按X轴方向逆序排列。column：盒子内的元素按Y轴方向顺序排列。column-reverse：盒子内的元素按Y轴方向逆序排列。9.3.2弹性容器属性2.flex-wrap，用于设置弹性盒子的子元素换行方式。语法格式：flex-wrap:nowrap|wrap|wrap-reverse说明：nowrap(default):不换行，默认值。wrap:换行，第一行在上方wrap-reverse:换行，反转排列。Flex-wrapflex-flow属性是flex-direction和flex-wrap属性的复合属性。flex-flow:flex-directionflex-wrap|initial|inherit;默认值： rownowrapFlex-flow

语法格式：justify-contentjustify-content：定义项目在X轴方向上的对齐方式。语法格式：justify-content:flex-start|flex-end|center|space-between|

space-around;说明：flex-start(default):左对齐flex-end:右对齐center:居中space-between:两端对齐，项目之间的间隔都相等

space-around:每个项目两侧的间隔相等，但项目之间的间隔是项目与边框的间隔的两倍。align-items5.align-items：定义项目在Y轴方向上的对齐方式。语法格式：align-items:flex-start|flex-end|center|baseline|stretch;说明：stretch(default):如果项目未设置高度或高度为auto,则将占满整个容器的高度flex-start:上对齐flex-end:下对齐center:垂直居中对齐baseline:项目的第一行文字的baseline(基线)对齐9.3.3弹性元素orderflex-growflex-shrinkflex-basisflexalign-self1.order：定义项目的排列顺序。数值越小，排列越靠前，默认为0，可以为负。语法如下：item{order:<integer>;}order属性值相等的项目按照书写顺序排列。orderflex-grow

2.flex-grow定义项目的放大倍数，不能为负，语法如下：item{flex-grow:<number>;}number默认为0。即使容器存在剩余空间，项目也不放大。如果所有项目的flex-grow都为1，则它们将等分剩余空间。如果一个项目的flex-grow为2,其他项目的flex-grow都为1，则前者占据的剩余空间是后者的2倍flex-shrink定义项目的缩小比例，不能为负。语法如下：item{flex-shrink:<number>;}默认值为1。即如果空间不足，项目将缩小。如果所有项目的flex-shrink都为1，则当空间不足时它们都将等比例缩小。如果一个项目的flex-shrink为0，其他项目的flex-shrink都为1，则当空间不足时前者不缩小，后者缩小。flex-basis定义了项目在主轴方向的初始大小。语法如下：item{flex-basis:<length>|auto;}Length：它可以设为跟width或height属性一样的值（比如200px），则项目将占据固定空间.auto：默认值，项目的本来大小flex属性是flex-grow（扩展比率），flex-shrink（收缩比率）和flex-basis（宽度，像素值）的缩写，能够设置子元素的伸缩性。默认值为01auto。后两个属性可选.flexalign-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。.item{align-self:auto|flex-start|flex-end|center|baseline|stretch;}auto(默认值)：即与父元素的align-items一致。其他取值与align-items属性完全一致。align-self9.4网格布局网格布局是一种新型的二维布局模型，它将容器划分成了“行”和“列”，由行和列组成单元格，然后将元素放在单元格里，从而达到了布局的目的。当一个HTML元素将display属性设置为grid或inline-grid后，它就变成了一个网格容器，这个元素的所有直系子元素将成为网格元素，也称项目。容器内划分网格的线，称为"网格线"（gridline），水平网格线称为行（row），垂直网格线称为列（column）。正常情况下，正常情况下，n行有n+1根水平网格线，m列有m+1根垂直网格线9.4.1什么是网格布局9.4.2网格的容器1.grid-template-columns属性：定义网格容器的列数和每列的宽宽，值以空格分隔，可以是固定值，百分比、关键字或者函数固定列宽，百分比列宽关键字auto，渲染引擎会自动根据浏览器窗口计算每列的宽度关键字fr：网格布局引入的新长度单位，1fr单位代表网格容器中可用空间的一等份关键字auto-fill：自动填充，适用于列宽固定，而屏幕宽度不固定的情况函数repeat(n，值)：n表示要重复的次数，第2个参数表示要重复的值或某种模式函数minmax(值1，值2)：定义列宽不小于值1，不大于值2。3.设置网格线间隔的属性grid-row-gap：设置行与行的间隔，属性值一般为像素grid-column-gap：设置列与列的间隔，属性值一般为像素grid-gap：是grid-column-gap和grid-row-gap的合并简写形式，语法格式为：grid-gap:<grid-row-gap><grid-column-gap>;9.4.2网格的容器2.grid-template-rows属性：设置网格的每一行的行高，单位一般为像素9.4.3网格元素1.grid-column属性定义了网格元素列的开始和结束位置grid-column-start：属性定义网格元素列的开始位置grid-column-end：属性定义网格元素列的结束位置grid-column是以上2个属性的简写属性，可以用列号来设置，也可以使用关键字"span"来定义元素将跨越的列数9.4.3网格元素2.grid-row定义了网格元素行的开始和结束位置。grid-row-start网格元素开始的行线grid-row-end网格元素结束的行线注意：grid-row是以上2个属性的简写。可以用行号来设置网格元素，也可以使用关键字"span"来定义元素将跨越的行数。3.grid-area属性是

grid-row-start,grid-column-start,