筆記壓縮力學day

1、階段課程安排： (1)Bootstrap（4+2） 背單詞 (2)AngularJS（3+2） 思路轉(zhuǎn)變(3)WebApp（3+2） jQueryMobile 玩兒(4)（2） 玩兒(5)其他框架（2 個 0.5） ExtJS 玩兒1.面試題2G：響應(yīng)式網(wǎng)頁2.5G：GPRS 塞班、黑莓WirelessML3G： iOS、AndroidLinux/瀏覽器 HTML響應(yīng)式/自適應(yīng)網(wǎng)頁：一個頁面，可以在各種不同的設(shè)備下瀏覽，都有不錯的瀏覽體驗。響應(yīng)式網(wǎng)頁的三個特征：(1)流式布局(2)可伸縮的和字體(3)CSS3 Media Query2.如何編寫響應(yīng)式網(wǎng)頁面試題 (1)設(shè)置viewport 元

2、(2)避免使用絕對(px)，用相對代替(%、auto、em 等)歷史上(2009 年左右)，HTML 網(wǎng)頁基本都是為 PC 設(shè)計的，寬度比較大。iOS/Safari 可以顯示這些為 PC 而編寫的網(wǎng)頁把 PC 網(wǎng)頁縮小后放到 屏幕上文字/ 都會強制縮小，影響瀏覽體驗。iOS 引入了 viewport（視口）的概念：用于顯示網(wǎng)頁的內(nèi)容的一個邏輯概念，其寬度/高度都可以任意指定，可以大到 2000px 都可以，網(wǎng)頁不是僅僅顯示在物理窗口，而是顯示視口中就可以實現(xiàn)大網(wǎng)頁不經(jīng)縮放，直接顯示在 中只是需要用戶左右滑動窗口即可。后來 Android 也引入了該概念。(3)使用流式定位：float(4)大小

3、實現(xiàn)自適應(yīng)：img max-width: 100%; 會隨著容器的改變而改變，且不會超過自身原始大小，防止失真。(5)根據(jù)瀏覽器屏幕的特征，有選擇性的執(zhí)行某些CSS 樣式CSS3查詢技術(shù)(Media Query)如何測試響應(yīng)式網(wǎng)頁使用真實物理設(shè)備效果可靠但任務(wù)量太大只要/平板/PC 在同一個局域網(wǎng)/互聯(lián)網(wǎng)即可測試。(2)使用第測試/模擬效果有待進一步的驗證(3)使用Chrome 自帶的瀏覽器模擬器測試優(yōu)勢：可以模擬常見的設(shè)備、網(wǎng)速、：效果有待進一步的驗證、加速度.4.WS 的常用操作：常用快捷鍵(Keym當前行：clipse)：Ctrl+Alt+向上/下移動當前行：刪除當前行：注釋/取消當前行

4、：重新格式化當前文檔：ZenCoding（代碼補全）： div+TABdiv.box+TAB div#mybox+TAB div*3+TAB ulli*3a+TAB假文生成：lorem+TAB多行編輯：Alt+/ Ctrl+D Ctrl+/ Ctrl+Alt+LAlt+左鍵點擊 ESC開始多行同時編輯退出多行編輯模式5.CSS3 提供的Media Query 技術(shù)作用：根據(jù)客戶端瀏覽設(shè)備的特性，有選擇性的執(zhí)行部分CSSMedia：指瀏覽網(wǎng)頁的設(shè)備，如 scree/phone)、pr、tv、projection、屏幕閱讀器.Query ： 查詢出當前瀏覽設(shè)備的特性， 如類型、 寬度、 高度、 分

5、辨率、 色彩位深、 方向Orienion(Landsc/Portrait)，根據(jù)這些特性，執(zhí)行特定的CSS 樣式。CSS3MediaQuery 有兩種用法：(1)根據(jù)的特性，執(zhí)行不同的外部CSS：客戶端會不管特性，請求所有的CSS 文件。(2)根據(jù)的特性，執(zhí)行某段CSS 中的部分內(nèi)容：media screen and (min-width:768px) and (max-width:990px) h1 . .box . 6.Bootstrap Bootstrap(Bootstrap 分為五部分：(1)起步(Startup)是一個框架HTML/CSS/JS 框架，適用于移動設(shè)備優(yōu)先的響應(yīng)式網(wǎng)頁。

6、(2)全局CSS 樣式(Global CSS) (3)組件(Component)插件(Plugin)定制(Customize)Bootstrap 第一部分：起步Bootstrap(2)安ootstrap(3)網(wǎng)頁基本模板html5shiv.js由afarkas jdalton jon_neal rem 編寫的一個 JS 自調(diào)用，用于讓老 IE 支持 H5 新。respond.js由 Scott 編寫的一個 JS 自調(diào)用，用于讓老 IE 瀏覽器支持CSS3MediaQuery 技術(shù)，從而實現(xiàn)響應(yīng)式網(wǎng)頁的編寫IE 瀏覽器的兼容性問題：pitable: Cpatible，該元 只有 IE 瀏覽器支持。設(shè)置 IE 的兼容模式為edge 版，盡可能向行業(yè)標準看齊。 IE 6IE 7IE 8IE 9IE 10IE 11Windows10IE 徹底被拋棄，新瀏覽器命名為 Edgelang 屬性的兩個作用：(1)告訴瀏覽器翻譯時如何確定當前網(wǎng)頁的基礎(chǔ)語言 (2)告訴讀屏當前頁面的基礎(chǔ)發(fā)音作業(yè)：(1)找一些免費/空間，上傳自己的網(wǎng)頁作品，使用PC/瀏覽(2)完成完整版的響應(yīng)式網(wǎng)頁示例(