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切换分辨率
提供不同分辨率的图片，由浏览器来决定选择哪一个
- srcset与sizes切换宽度
sizes对浏览器给出提示，根据需要宽度的不同决定选择不同图片
- picture元素
<picture>
<source media="(min-width: 30em)" srcset="md.jpg">
<source media="(min-width: 60em)" srcset="bg.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>
<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新输入类型
- 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;
}
