1.為什麼去學習移動web？已經從趨勢變成了乙個主流了，網際網路的流量入口已經大於pc端的流量入口2.相容性在國內的移動web瀏覽器，絕大部分都是基於webkit核心的，所以一些css3效果，h5的新特性絕大部分都被支援，需要新增字首。 （不同機型之間可能會略有不同，這個需要踩坑） 在移動端，做動畫一律用過渡配合2d轉換去實現3.移動web對比pc布局的差異性移動web的主要核心就是做自適應的布局，在手持裝置上基本都是通欄的，並且布局的細節比pc端少，文字內容和模組也相對偏少4.流式布局其實 流式布局 就是百分比布局。是移動web開發使用的常用布局方式之一 流式布局下的幾個頁面特徵： （1）寬度自適應，高度寫死，不能百分百去還原設計圖 （2）一些小icon 圖示等都是寫死的 不是所有的東西都是自適應的，一般都是模組會呈現自適應 （3）一些產品插入圖 也就是img等都預設設定寬度百分百，讓其自動保持等比例縮放，一般不予寫死 （4）字型大小等都是寫死的（後期可以使用**查詢來改變字型大小） 後期會學到rem結合流式布局的寫法：使用rem去計算高度，百分比去計算寬度，實現寬高完全自適應。 移動端的幾個經典的頁面模組布局： ` （1）左側固定 右側自適應
左側盒子固定，右側自適應
（1）左側盒子直接寫死寬高，並且浮動
（2）右側盒子直接不寫寬，直接用margin-left去擠出距離，這個盒子缺省會自動內減
複製**
"box">
"left">
"right">
複製**
複製**右側盒子固定，左側自適應
（1）右側盒子直接寫死寬高，並且浮動
（2）左側盒子直接不寫寬，直接用margin-right去擠出距離，這個盒子缺省會自動內減
（3）右側盒子在結構上在左側盒子的前面，先浮動，後標準
複製**
複製**兩側固定 中間自適應
（1）左右的盒子都寫固定的寬高，然後分別左浮動 右浮動
（2）中間的盒子直接用margin去擠出距離，不寫寬自動內減
（3）右邊浮動在結構（html裡面）一定要放到標準流盒子的前面
複製**
"box">
"left">
"right">
"center">
複製**
複製**中間固定 兩側自適應
（1）中間盒子直接寫死寬高，並且定位居中
（2）左右側盒子直接width百分50%，並且浮動，並配合padding和內減去實現自適應
複製**
"box">
"left">
"content">
"right">
"content">
"center">
我是中間的內容
複製**
複製**##viewport（視口） 視口標籤
"en">"box">我是內容！！！
複製**
放不下出現橫向滾動條？還是自動縮放？2.我們測試下pc頁面在移動裝置上顯示。預設是縮放顯示的3.認識viewport 以前我們的頁面是直接丟到瀏覽器裡面就直接執行了，但是現在在移動端，缺省會給我們的頁面新增了乙個中間層，就是頁面和瀏覽器中間會介入乙個第三者，就是視口，也就是說視口會把頁面包裹起來然後在放到瀏覽器裡面進行渲染，而視口預設的大小一般是980，會比手機的物理裝置的尺寸要大，同時視口會自動縮小到手機的螢幕大小，這就是為什麼乙個pc端的頁面扔到移動端的話 理解的簡單一點就是在頁面外面包裹了乙個預設大小為980（絕大多數）的盒子，這個盒子具備scale功能，並且同時在預設情況下會整體縮放（裡面承載的網頁也縮小了）到當前使用者手機的螢幕大小 這是視口標籤最開始出來的意義，持續了一段時間，但是發現這種體驗不太好，因為一旦縮小就會頁面就會很小看不清，一旦放大就會又看不完全。所以就有人開始做另一種手機網頁模式就是不讓視口標籤去縮放，也不讓使用者去縮放，並且讓視口的寬度就等於當前裝置的寬度，就基於當前的螢幕解析度去設計專門的設計圖，針對差異不大的手機螢幕是採用自適應技術 視口標籤的引數： width：寬度設定的是viewport寬度，可以設定device-width特殊值 initial-scale：初始縮放比，大於0的數字（縮放是基於螢幕來的） maximum-scale：最大縮放比，大於0的數字 minimum-scale：最小縮放比，大於0的數字 user-scalable：使用者是否可以縮放，yes或no（1或0）；
用meta標籤把viewport的寬度設為device-width，同時initial-scale=1，user-scalable = 0就構建了乙個標準的移動web頁面
##配置標準化的視口
"en">"box">111
複製**
關於精靈圖的縮放： （1）得到縮放的比例 （原始設計圖/320）根據比例將精靈圖縮放 （**裡面通過background-size去縮放） （2）在獲取縮放後的精靈圖對應的position 因為精靈圖都是根據原始設計圖的大小切出來的，所以，在流式布局裡面使用精靈圖的都需要用background-size縮放，至於縮放的比例(用原始設計圖的解析度/320)，縮放之後取得對應的background-position （千萬別真把精靈圖給縮放給儲存了，我們縮放精靈圖僅僅是用來獲取縮放後的精靈圖的position） 沒有寬度的盒子寫padding不會撐大盒子 怎麼設定：
如果1：1的顯示在移動裝置當中 圖示會失真 在行業中通用的設計稿 640px或者750 目的 熟練的時候百分比布局 首頁的布局：是以百分比布局為主的 定最小寬度和最大寬度的布局。 適用：比較多的首頁，門戶，電商 等。 #移動端事件touch事件
event originalevent （原生事件） 是jquery 封裝的事件。 targettouches 目標元素的所有當前觸控 changedtouches 頁面上最新更改的所有觸控，在touchend裡面觸發，只有touchend的才可以獲取event手指座標 touches 頁面上的所有觸控 注意：在touchend事件的時候event只會記錄changedtouches `
移動web開發1
學習了viewport視口及相應的屬性 viewport 視口屬性 該屬性只在移動端瀏覽器上才有用。name viewport 告訴瀏覽器 我這個meta標籤設定的是viewport屬性 content設定的是屬性的值 屬性名不能亂寫 有固定的取值 width 寬度 device width 裝置的...
移動端web開發
viewport content width device width,user scalable no,initial scale 1.0,maximum scale 1.0,minimum scale 1.0 width 設定視口寬度 initial scale 初始化縮放比，大於0的數字 ma...
移動端Web開發
移動端web開發與pc端的web開發有尺寸上的不同，手機螢幕大小有很多種，因此尺寸方面有些要注意的。1.字型 採用js動態設定字型大小的方法 思路如下 螢幕寬度 640px,則font size 100px 螢幕寬度 640px,則font size 100 寬度 640px 字型單位為rem 在b...