响应式web设计读书笔记

1.响应式web设计基础

• 弹性图片
  max-width: 100% 为图片设置最大宽度为其父容器宽度，可以保证图片正常时显示其自身宽度，当视口较小时，可以保证宽度为其父容器宽度。

• 媒体查询
  最小宽度媒体查询，以最小屏幕为起点，在根据需求渐进扩充视觉和功能。bootstrap中栅格结构的媒体查询定义如下：

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

2.媒体查询

css中的媒体查询

@media (min-width: 768px){
        background-color: red;
    }

link标签中的媒体查询

<link rel="stylesheet" media="screen and (min-width: 800px)" href="style.css">

注意：大多数情况下，不需要指定screen这种媒体类型，使用简写语法即省略关键词all，换句话说，如果不指定关键字，则关键字就是all

• 应用
  根据下方的CSS样式会覆盖上方目标相同的CSS样式，就能一开始设置一套基准样式，以小屏幕为起点，根据需求渐进扩充视觉和功能，如很小视口只显示文本，较大视口中为文本添加图标。
• 设置视口
  为了利用媒体查询，应该让浏览器按设备宽度来显示网页，而不是按980px的固定宽度显示网页，因此需要添加针对视口的meta标签
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  其中，width=device-width为设置视口宽度为设备宽度
  initial-scale=1.0为将网页内容为实际大小
  还可以添加user-scalable=no禁止用户缩放

3.弹性布局

弹性布局，即网站的宽度都以百分比形式定义。

• 将固定像素大小转换为弹性比例大小
  结果=目标/上下文
• 应用
  对于小屏幕可以将左边栏作为画外元素，只有用户点击了菜单图标才会滑入屏幕。

.left{
    position: absolute;
    width: 300px;
    left: -300px;

    @media (min-width: 800px){
        position: relative;
        left: 0;
        width: 30%;
    }
}

4.常用布局分析

• 行内块
  行内块会在元素之间渲染空白，需要通过设置其父元素font-size为0来消除
  行内块中垂直居中也不容易，也不能一个块宽度固定，另一个块填充剩余空间
• 浮动
  给浮动元素的宽度设置百分比，最终计算值在不同平台上结果不同，有些浏览器向上取整，有些浏览器向下取整
  需要清除浮动，才能避免父盒子折叠
• 表格和表元
  使用display: table和display: table-cell，可以让一个元素在另一个元素内垂直居中
• flexbox
  方便地垂直居中内容
  改变元素的视觉次序
  在盒子间插入空白，自动对齐
• 应用：
  使用弹性盒布局实现左右两部分的导航栏，设置最后一个元素的margin-left: auto，其左外边距会用上该侧所有可用外边距。

<nav class="nav">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>

.nav{
    display: flex;
    height: 3rem;
    padding: 0 1rem;
    align-items: center;
    background-color: #000;

    a{
        color: #fff;
        margin-right: 1rem;
    }

    a:last-child{
        margin-left: auto;
    }
}

另外，可以结合媒体查询，来实现较小视口垂直显示，较大视口水平显示：

.nav{
    display: flex;
    min-height: 3rem;
    padding: 0 1rem;
    flex-direction: column;
    align-items: center;
    background-color: #000;

    @media (min-width: 800px){
        flex-direction: row;
    }

    a{
        color: #fff;

        @media (min-width: 800px){
            margin-right: 1rem;

            &:last-child{
                margin-left: auto;
            }
        }
    }   
} 

• 粘附页脚
  在页面内容不够长时，仍然想让页脚停留在视口底部：

html{
    height: 100%;
}

body{
    display: flex;
    height: 100%;
    flex-direction: column;
}

main{
    flex: 1;
}

footer{
    padding: 2rem;
    background-color: #000;
}

关键点就是，设置body整体height: 100%，让main部分flex-grow: 1自动伸展占据空余空间

5.响应式图片

图片进行分辨率切换，可以根据视口空间的大小显示分辨率不同的图片，让高分辨率的用户看到高分辨率的图片

• 通过srcset切换分辨率

![](pic_sm.jpg)

提供不同分辨率的图片，由浏览器来决定选择哪一个

• srcset与sizes切换宽度

![](pic_sm.jpg)

sizes对浏览器给出提示，根据需要宽度的不同决定选择不同图片

• picture元素

<picture>
        <source media="(min-width: 30em)" srcset="md.jpg">
        <source media="(min-width: 60em)" srcset="bg.jpg">
        ![](sm.jpg)
    </picture>

根据视口宽度的不同，提供不同的图片，其中img标签作为不支持picture标签的后备

6.html5

• 推荐模板
  HTML5 Boilerplate，包含有重置样式，modernizr可以检测浏览器支持哪些特性，并为html标签添加上相应的样式
• 向<a>标签致敬
  可以把多个元素放入一个a标签中，但是不能把a或者button，form这种交互性元素放入同一个a标签里
• main
  主内容区，文档中特有的内容，多个文档中重复出现的导航，版权，搜索表单等不算主内容
• section
  通用区块，可以包装联系信息，新闻源，可以用来包装可用组件
• nav
  主导航链接，可以用nav嵌套a来替代之前ul和li的导航
• aside
  与旁边主内容不相关的内容，侧边栏等
• figure和figcaption
  包装小区块，包含图片和小标题

<figure>
            ![](pic.jpg)
            <figcaption>pic</figcaption>
        </figure>

• detail和summary
  展开和收起部件

<details open>
        <summary>title</summary>
        <p>content</p>
    </details>

• h1到h6
  不推荐使用h1到h6标记副标题，副标题应该表示为

<h1>title</h1>
<p>subtitle</p>

• article
  博客正文和新闻报道，包含一个独立的内容块，有自己的标题和内容

7.CSS3小技巧

• 内容超过长度就会截断，并显示出...记号

overflow: hidden;
text-overflow: ellipsis;

• 基于nth的选择
  图片每行放四个，将最后一行的图片的底部边框去掉
  先取出底部第一个元素，再取出其后面的兄弟元素

.item:nth-child(4n+1):nth-last-child(-n+4),
.item:nth-child(4n+1):nth-last-child(-n+4) ~ .item{
        border-bottom: 0;
}

• css自定义变量
  可以通过:root将自定义变量定义在文档根元素上，使用var引用自定义变量

:root{
    --MyColor: #ccc;
}
.var{
    color: var(--MyColor);
}

8.HTML5表单

• fieldset和legend标签
  可以用来给表单进行分组

    <fieldset>
        <legend>color</legend>
        <div>
            <label for="name">name:</label>
            <input type="text" id="name">
        </div>
    </fieldset>

• autocomplete 自动补全，可以通过autocomplete=“off”禁用自动补全
• autofocus 自动聚焦，谨慎使用
• HTML5新输入类型
  • email
  • number
  • url
  • tel
  • search
  • pattern
  • color
  • date，month，week，time
  • range
• 表单美化
  可以在视觉上显示输入框已聚焦，并且加入渐变效果，写在前面的背景会覆盖写在后面的背景

        input{
            padding: 4px 6px;
            background-color: #f1f1f1;
            font-size: 16px;
            border: 1px solid #f1f1f1;
            outline: none;
            box-shadow: inset 0 -3px 0 #739327;

            background: radial-gradient(400px circle,  #fff 99%, transparent 99%), #f1f1f1;
            background-position: -400px 90px, 0 0;
            background-repeat: no-repeat, no-repeat;
            transition: transform .4s, box-shadow .4s, background-position .2s;

        }

        input:focus{
            border: 1px solid #739327;
            box-shadow: inset 0 -3px 0 #739327,
                0 0 15px 5px #ebebeb;
            transform: scale(1.06);
            background-position: 0 0, 0 0;
        }