《響應式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>