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

作者：Ben Frain

学习时间   2016/5/12

---

第一章   设计入门

*视口调试工具

IE：Microsoft Internet Explorer Develop Toolbar

Safari:Resize

Firefox:Firesizer

Chrome:Windows Resizer

*在线创意源泉

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

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

<!--该检测中，只要满足screen projection 两个条件中的任意一个条件，就执行文件-->
<link rel="stylesheet" media="screen and(orientation:portrait) and (min-width:800px),projection "
      href="800width-portration.css">

还有一种方式是@import

<style>
    @import url("phone.css") screen and (max-width: 360px);
</style>

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

#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”

<form>
    <label for="a"></label>
    <input id="a" name="a" type="text" required aria-required="true"></input>
</form>

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

<form>
    <label for="b"></label>
    <input id="b" name="b" type="text" required aria-required="true" autofocus></input>
</form>

3：autocomplete , 自动完成

<form>
    <label for="b"></label>
    <input id="b" name="b" type="text" required aria-required="true" autocomplete="off"></input>
</form>

4：list 出现备选值

<form>
    <label for="b"></label>
    <input id="b" name="b" type="text" list="alist"></input>
    <datalist id="alist">
        <section>
            <option value="1"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
        </section>
    </datalist>
</form>

5：email

<form>
    <label for="e"></label>
    <input id="e" name="e" type="email" ></input>
</form>

6：number

<form>
    <label for="f"></label>
    <input id="f" name="f" type="number" ></input>
</form>

7：url

<form>
    <label for="g"></label>
    <input id="g" name="g" type="url" ></input>
</form>

8：tel

<form>
    <label for="h"></label>
    <input id="h" name="h" type="tel" ></input>
</form>

9：search

<form>
    <label for="i"></label>
    <input id="i" name="i" type="search" ></input>
</form>

10：pattern

<form>
    <label for="j"></label>
    <input id="j" name="j" pattern="([a-zA-Z]{3,30}\s*)+[a-zA-Z]{3,30}"></input>
</form>

11：color

<form>
    <label for="j"></label>
    <input id="j" name="j" type="color"></input>
</form>

12：date  month  week time  datetime  datetime-local

<form>
    <label for="h"></label>
    <input id="h" name="h" type="date"></input>
</form>

13:range

<form>
    <label for="k"></label>
    <input id="k" name="k" type="range" min="1" max="100" onchange="showValue(this.value)" value="5"><span id="range">5</span></input>
</form>
<script type="text/javascript">
    function showValue(newvalue){
        document.getElementById('range').innerHTML=newvalue;
    }
</script>

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

<script src="js/jquery.js"></script>

<script src="js-webshim/minified/polyfiller.js"></script> 

<script>
    // load and implement all unsupported features
    webshims.polyfill();

    // or only load a specific feature
    //webshims.polyfill('forms es5');
</script>