HTML5与CSS3基础教程-第12章 构建响应式网站

《HTML5与CSS3基础教程（第8版）》 第12章读书笔记

• 2020/03/21

• 创建可伸缩图像： 如果不指定图像显示的height和width属性，图像就会自动按照其原始尺寸显示。在不设置宽高的情况下，设置max-width:100%即可以创建可伸缩图像，其可用空间是其父元素建立的内容区域，并保持原始的宽高比（video, embed, object也可以使用该方法创建可伸缩样式）。（p239 - 241）

• 创建弹性布局网格： （p241 - 245）

  使用百分比和相对单位（em、rem）来规定元素的宽度，最外层的宽度可以使用max-width定义。元素的padding和margin也可以基于百分数或em设置。

  • 当em值用于内边距和外边距时，则em的值是相对于当前元素的字体大小，不再是相对于父元素。（p224）
  • 使用百分数规定内边距和外边距时。不管是设置上下边距还是左右边距，百分数的值都是基于其包含块 元素的***宽度***的。

-媒体查询-可以包含在媒体查询里的媒体特性： （p245 - 246）

• width： 宽度
• height： 高度
• device-width： 设备宽度
• device-height： 设备高度
• orientation： 方向
• aspect-ratio： 高宽比
• device-aspect-ratio： 设备高宽比
• color： 颜色
• color-index： 颜色数
• monochrome： 单色
• resolution： 分辨率
• scan： 扫描
• grid： 栅格

分标准的媒体特性，如：

• -webkit-device-pixel-ratio： Webkit设备像素比

• -moz-device-pixel-ratio： Mozilla设备像素比

• 媒体查询-语法和示例： （p246 - 250）

  指向外部样式表的链接：

  <link rel="stylesheet" media="logic type and (feature: value)" href="xxx.css" />
  

  位于样式表中的媒体查询：

  @media logic type and (feature: value){
      /* 具体样式 */
  }
  

  logic type and (feature: value):

  • logic ： 可选，可以是only或not

  • type： 媒体类型，可以是screen、print等。

  • feature: value： 可选，但是一旦包括，就必须用括号包围且前面有and。feature是媒体特性。

  如：

  <!-- 仅当媒体类型是screen且视觉区域最小宽度为480px时，加载并使用style-480.css中的样式 -->
  <link rel="stylesheet" media="only screen and (min-width: 480px)" href="style-480.css" />
  

  /*
  	仅当媒体类型是screen且视觉区域最小宽度为480px时，使用下面的规则样式
  */
  @media only screen and (min-width: 480px){
      p {
        color: red;  
      }
  }
  

• 兼容旧版IE： （p257 - 258）

  IE8及以下版本不支持媒体查询。 3种解决方法：

  1. 什么都不做，让网站显示基本版本。
  2. 为他们单独创建一个样式表，让他们显示网站的最宽版本。一种做法是复制一份常规的样式表，去掉查询语句的样式，在HTML中添加条件注释适配IE。
  3. 如果希望页面有响应式效果，在页面中引入respond.min.js