《响应式Web设计—HTML5和CSS3实战》 学习记录

作者：Ben Frain

学习时间   2016/5/12

第一章   设计入门

 

*视口调试工具

IE：Microsoft Internet Explorer Develop Toolbar

Safari:Resize

Firefox:Firesizer

Chrome:Windows Resizer

 

*在线创意源泉

响应式设计创意收集网站   http：//mediaqueri.es

 

第二章：媒体查询，支持不同的视口

 

 

还有一种方式是@import

 

*媒体查询能查询哪些特征

#width: 视口宽度

# height： 视口高度

# device-width: 设备屏幕的宽度

# device-height： 设备屏幕的高度

# orientation: 检查设备处于横向还是纵向

# aspect-ratio:基于视口宽度高度的宽高比

# device-aspect-ratio： 屏幕的宽高比

# color: 颜色的位数

# color-index： 设备的颜色索引表中的颜色数

# monochrome

#resolution

#scan

#grid

 

*加载媒体查询的最佳方法

Respond.js是为IE8及更低版本增加媒体查询支持的最快的js工具，但是无法解析@import 命令

 

*重置样式

Eric Meyer  的重置样式表（http://meyerweb.com/eric/tools/css/reset）

针对HTML5 有更好的选择，normalize.css(http://necolas.github.com/normalize.css/)

 

第三章：拥抱流式布局

 

*将 px 换成 %  em，这样的相对单位，公式 

 

目标元素宽度/上下文元素宽度=百分比宽度

 

目标元素尺寸/上下文元素尺寸=百分比尺寸 

 

*设置自适应图片

为不同的屏幕尺寸提供不同大小的图片，方案  Adaptive Images   ,   http://adaptive-images.com

 

*CSS网格系统    快速布局

columnal(http://www.columnal.com)

 

第四章：响应式设计中的HTML5

*样板文件  （http://html5boilerplate.com）

*响应式视频   FitVids  插件

 

第五章：CSS

*@fant-face  的使用

网页字体：https://www.fontsquirrel.com/

 

*自动添加私有前缀的脚本  prefixfree 

 

*渐变生成器 http://www.colorzilla.com/gradient-editor/

 

*CSS3 背景渐图案  http://lea.verou.me/css3patterns/

 

*可缩放图标  @font-face 图标，将常用字符做成特定字体   http://fico.lensco.be/    http://www.iconfont.cn/

 

*CSS3动画   transform  transition  animation 的用法

 

 

第八章:HTML5 CSS3征服表单

1：required   是否必填 ，required aria-required=“true”

 

2：autofocus , 让表单在加载完成后有一个表单被自动聚焦

 

3：autocomplete , 自动完成

 

4：list 出现备选值

 

5：email 

 

6：number

 

7：url

 

8：tel

 

9：search

 

10：pattern

 

11：color

 

12：date  month  week time  datetime  datetime-local

 

13:range

 

* webshim 解决 部分浏览器不支持H5 CSS3 的问题

 

 

 

转载于:https://www.cnblogs.com/yinzf/p/5507836.html