响应式web设计（ 一 ）

作者 johansen 日期 2017-02-15
技术小记
响应式web设计（ 一 ）

今天开始,博客会奉献出关于《响应式web设计：HTML5和CSS3实战》的读书笔记。

第一章 响应式web设计基础

  • 指定呈现的网页区域,解决可缩放浏览器中网页缩放的问题。(按照设备的宽度(device-width)来渲染网页内容)

    1
    <meta name="viewport" content="width=device-width">

  • 图片显示不虚化，最大显示为其自身的100%。

1
2
3
img{
    max-width:100%;
}
  • 媒体查询
    1.不针对流行设备宽度设置断点
    2.首先建立基本状态，然后再为不同视口，不同样式进行相关的媒体查询操作。
    1
    2
    3
    4
    @media screen and (min-width:5rem)
    {
    }

第二章 媒体查询

  • 媒体查询的语法

  1. css文件中使用

    1
    2
    3
    4
    5
    6
    @media screen and (min-width:320px)
    {
         body{
             background-color:grey;
         }
    }

  2. link标签中使用媒体查询

    1
    2
    <link rel="style sheet" type="text/css" media="screen" href="screenstyles.
    css">

  3. 组合媒体查询

    1
    2
    <link rel="stylesheet" media="screen and (orientation: portrait) and
        (min-width: 800px)" href="800wide-portrait-screen.css" />

  4. @import与媒体查询

    1
    @import url("phone.css") screen and (max-width:360px);

  5. 针对高分辨率设备的媒体查询

    1
    2
    3
    4
    /* 每像素单位为两点的屏幕*/
    @media (min-resolution: 2dppx) { 
        /* 样式 */
    }

  6. 媒体查询链接不同的CSS文件，所有的css文件都会下载，只是在渲染之前，只应用该视口对应的样式表。该样式表我们可以定义为阻塞的资源。

  7. 需要组合媒体查询？不一定，对于一些编译工具来说，也是不建议的。对于代码优化来说，提高性能微乎其微。

弹性布局与响应式图片

  1. 将固定像素大小转换为弹性比例大小（百分比）
  2. 使用Flexbox,与行内块的布局相比，行内块布局存在间隙。
  3. 使用Flexbox的好处

    方便地垂直居中内容,改变元素的视觉次序,在盒子里自动插入空白以及对齐元素，自动对齐元素间的空白,让你年轻10岁(也许没那么夸张，但以我有限的经验来看，它能减少你不少压力)

  4. align-item:交叉轴对齐。
    • flex-start:把元素的对齐设置为flex-start，可以让元素从Flexbox父元素的起始边 开始。
    • flex-end:把元素的对齐设置为flex-end，会沿Flexbox父元素的末尾对齐该元素。
    • center:把元素放在Flexbox元素的中间。
    • baseline:让Flexbox元素中的所有项沿基线对齐。
    • stretch:让Flexbox中的所有项(没交叉轴)拉伸至与父元素一样大。
  5. justify-content:主轴对齐。
    • flex-start
    • flex-end
    • center
    • space-between(中间有间隙)
    • space-around（相邻元素间隙相同）
  6. flex-grow,flex-basic,flex-shrink
  • flex-grow(传给flex的第一个值)是相对于其他伸缩项，当前伸缩项在空间允许的情 况下可以伸展的量。
  • flex-shrink是在空间不够的情况下，当前伸缩项相对于其他伸缩项可以收缩的量。
  • flex-basis(传给flex的最后一个值)是伸缩项伸缩的基准值。

  1. 通过order改变弹性盒的原始顺序

  2. 响应式图片的实现

    1
    2
    3
    4
    5
    6
    <picture>
        <source media="(min-width: 30em)" srcset="cake-table.jpg"> 
        <source media="(min-width: 60em)" srcset="cake-shop.jpg">
        <img src="scones.jpg" alt="One way or another, you WILL get
        cake.">
    </picture>

第三章 HTML5

HTML5标签

  1. <a>标签可以包含非交互性的元素。也就是只要在最外层写一个就行。
  2. <section>用于定义文档或应用中一个通用的区块。
  3. <nav>用于包装指向其他页面或同一页面中不同部分的主导航链接。
  4. <aside>元素用于包含与其旁边内容不相关的内容。实践当中，我经常用它包装侧边栏(在 内容适当的情况下)。这个元素也适合包装突出引用、广告和导航元素。
  5. <b>元素表示只为引人注意而标记的文本，不传达更多的重要性信息，也不用于 表达其他的愿望或情绪。比如，不用于文章摘要中的关键词、评测当中的产品名、交互 式文本程序中的可执行命令，等等
  6. <em>元素表示内容中需要强调的部分。
  7. <i>用于一段文本，用于表示另一种愿望或情绪，或者以突出不同文本形式的方式表达偏离正文的意思。

HTML5视频与音频

示例：

1
2
<!-- 目前的video方法 -->
<video src="myVideo.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="myVideoPoster.png">What, do you mean you don't understand HTML5?</video>



1
2
3
4
5
6
7
8
9
10
11
12
13
<!-- 兼容性video方法 -->
    <video width="640" height="480" controls preload="auto" loop
poster="myVideoPoster.png">
    <source src="video/myVideo.mp4" type="video/mp4">
    <object width="640" height="480" type="application/x-shockwaveflash" data="myFlashVideo.SWF">
        <param name="movie" value="myFlashVideo.swf" />
        <param name="flashvars" value="controlbar=over&amp;image=myVideo.jpg&amp;file=myVideo.mp4" />
        <img src="myVideoPoster.png" width="640" height="480" title="No video playback capabilities, please download the video below">
    </object>
<p><b>Download Video:</b>
 MP4 Format: <a href="myVideo.mp4">"MP4"</a>
</p>
</video>
FEATURED TAGS
技术小记