移動端：移動端基礎

移動端基礎

---

1、前端基礎

1. 網頁主要由三部分組成:結構(Structure)、表現(Presentation)和行爲(Behavior)。 結構化標準語言：HTML，表現標準語言：CSS，行爲標準：JS

2. 瀏覽器css兼容前綴
•  -o-transform:rotate(7deg); // Opera
• -ms-transform:rotate(7deg); // IE
• -moz-transform:rotate(7deg); // Firefox
• -webkit-transform:rotate(7deg); // Chrome
• transform:rotate(7deg); // 統一標識語句
3. PPI 表明屏幕每英寸的像素數量，即像素密度
4. 像素分類
• 設備像素 任何設備的物理像素都是固定的
• CSS像素（邏輯像素）
5. DPR=設備像素/CSS像素（某一方向）【Retina屏幕：又叫視網膜屏幕 一樣大小的屏幕上，像素多了一倍 DPR=2】

2、 sublime text3使用

1. sublime 官網http://www.sublimetext.com/  下載http://www.sublimetext.com/3 
2. 安裝package control組件
• 安裝地址
• https://packagecontrol.io/installation
• 安裝package control步驟
• 按 Ctrl+` 調出console控制檯
• 對應版本代碼複製進控制檯回車
• 在線安裝完畢以後從新啓動軟件便可
• 是否安裝成功
• 在preferences有package control 這一項，說明安裝成功
3. 安裝插件
• 經過ctrl+shift+p打開命令面板
• 輸入package control :install package (支持模糊匹配) 
• 輸入要安裝的插件名稱，選擇安裝便可
4. 經常使用插件
• Emmet                        快速編寫html、css
• jQuery                         提示jQuery語法
• SublimeLinter             高亮
• html-css-js prettify     格式化代碼
• Less                             語法高亮
• AutoFileName             找文件
• DocBlockr                （模塊註釋）
• 查看安裝插件列表
• 經過ctrl+shift+p打開命令面板，輸入package control :list package
• 刪除插件
• 經過ctrl+shift+p打開命令面板，輸入remove，調出Remove Package選項並回車
• 更新插件
• 經過ctrl+shift+p打開命令面板，輸入upgrade packages，軟件會自動檢測更新插件
5. 快捷鍵
• Ctrl+`   調出console控制檯
• ctrl+shift+p打開命令面板
• meta:vp + Tab 視圖標籤
• http://emmet.evget.com

3、 移動端屏幕

CSS像素、物理像素、邏輯像素、設備像素比、PPI、Viewport的詳解 http://www.cnblogs.com/zaoa/p/8630393.html

4、Chrome瀏覽器移動測試環境

1. 經常使用面板
• Device：能夠選擇要測試的設備及型號
• Resolution：設備像素
• 屏幕顯示比例，能夠自行選擇
• Device pixel ratio：設備像素比
• 模擬網速狀況
• 手持設備的橫屏豎屏
• 能夠點開這裏進行查看隱藏的選項
2. NetWork conditions
• Disk cache：磁盤緩存，默認是不緩存的
• network throttling：網絡節流，點擊後面的下拉菜單，能夠選擇不一樣的網絡供開發者測試模擬
• user agent spoofing：用戶代理商，能夠選擇是默認代理商，或是自定義代理商
3. Sensors
• geolocation：是否須要模擬地理定位。下拉菜單中進行選擇。通常這個功能會出如今須要地理定位，或是引用地圖的時候
• lat （經度）
• Lon（緯度）
• Orientation：模擬陀螺儀。能夠手動的改變3個軸上的值，看到右邊小框就會發生旋轉。這個功能通常是用於搖一搖等有重力感應的場景
• α  設備繞Z軸旋轉的數值
• β  設備繞X軸旋轉的數值
• γ  設備繞Y軸旋轉的數值

5、雙向刷新工具

6、視口

1. 佈局視口 
• 在移動端上，視口與移動瀏覽器屏幕寬度再也不相關聯，而是徹底獨立的，咱們稱它爲佈局視口
• 手機上，爲容納桌面瀏覽器設計的網站，默認的佈局視口寬度遠大於手機屏幕的寬
2. 視圖視口 
• 是用戶正在看的網站區域。用戶能夠經過縮放來操做視覺視口，同時不會影響佈局視口，佈局視口仍然保持原來的寬度
• 須要注意的是視覺視口與設備屏幕同樣寬，而且它的CSS像素的數量會隨着用戶的縮放而改變
3. 理想視口

5. meta:vp + Tab快捷鍵

7、相對長度單位

1. 相對單位em 
• em是描述相對於當前對象內文本的字體尺寸，它是相對長度單位。
• 通常瀏覽器字體大小默認爲16px
• em的值並非固定的
• em會繼承父級元素的字體大小（相對父級的字體大小而發生變化）
2. PX和em在線轉換的網站：http://pxtoem.com
3. 相對單位rem
• rem的值並非固定的
• rem是相對根節點html發生變化的（和父節點無關）
• 實際開發中通常默認的把html根節點設置爲10px（62.5%）或者是100px，方便後續計算
• 相對單位rem是集相對大小和絕對大小的優勢於一身經過它既能夠作到只修改根元素字體大小就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應
4. em、rem使用場景
• em
• 一般不使用 em 單位控制字體大小     首行縮進: text-indent:2em;
• rem
• 一切可擴展都應該使用 rem 單位     響應式網站可使用rem去作適配
• 不要使用 em 或 rem
• 多列布局        當元素應該是嚴格不可縮放的時候

8、總結