响应式web设计

响应式web设计

定义响应式web设计
viewport
max-width 设置图片宽度
@media 媒体查询 and min-width
浏览器默认像素为16px

媒体查询

@import url screen and max-width

弹性布局与响应式图片

结果= 目标/上下文
flexbox
inline-flex
响应式图片 picture source srcset sizes属性

HTML5与响应式Web设计

css3新特性

CSS响应式多列布局
column-width column-count
word-wrap text-overflow
white-space

特性查询

@support (display:flex) and {
.Item{
display:inline-flex;
}
}

Modernizr

css 属性选择符 img[alt="sausages"] { / 样式 /
}
可以使用正则

css3伪类

:last-child nth-child(odd/even) not empty
first-line

css自定义属性

:root {
}
root伪类把自定义属性保存在文档根元素上 var(--MainFont)

calc

:has

相对视口的长度

vm 视口宽度 vh 视口宽度 vmin视口最小值 vmax视口最大值

web排版

@font-face

css3新颜色格式及透明度

RGB HSL RGBA HSLA

CSS3 高级技术

css3文字阴影

text-shadow box-shadow
渐变 linear-gradient(red,blue)
重复渐变 repeating-radial-gradient
多张背景图片 背景大小 高分辨率背景图片

css滤镜

filter

SVG与响应式web设计

svg 用文档表示的图片
svg根元素 viewbox
命名空间
标题和描述标签 title desc
defs 可复用元素
元素g 可以将其他元素捆绑在一起
形状元素 polygon 多边形

在 web页面插入svg

使用img标签
使用Object标签
把svg作为背景图片插入
data URI 引入外部资源

内联svg

svg元素

利用符号复用图形对象

use
根据上下文改变内联svg颜色
SMIL 动画
使用外部样式表为svg添加样式
当svg是内联或Object插入式 使用js控制vgd动画
svg滤镜

CSS3过渡 变形和动画

不能从none开始过渡 transition
在不同时间段过渡不同属性
理解过渡调速函数 贝塞尔取消

2D变形

transform:scale
translate 上下移动
rotate 旋转
skew 斜切变形
matrix 矩阵
transform-origin 属性 变形点

3D

transform3d

css3 动画效果

animation-fill-mode

表单

fieldset legend 表单label
placeholder 占位符

required 必填项

autofocus 在表单加载完成时有一个表单被默认选中

autocomplete
list及datalist 备选项

HTML5新输入类型

email number url tel search pattern
color date month week time range
css美化样式 input:required + label:after{}

创建一个背景填充效果

input:not([type="range"]),
    textarea {
min-height: 30px;
padding: 2px;
font-size: 17px;
border: 1px solid #ebebeb; outline: none;
transition: transform .4s, box-shadow .4s, background-position .2s;
background: radial-gradient(400px circle, #fff 99%, transparent 99%), #f1f1f1;
background-position: -400px 90px, 0 0; background-repeat: no-repeat, no-repeat; border-radius: 0;
position: relative;
}
    input:not([type="range"]):focus,
    textarea:focus {
background-position: 0 0, 0 0; }

实现响应式web设计