在布局視口，css畫素不會發生個數上的變化，
那麼說，乙個大頁面上，所有css畫素都是固定住的，是不變的
當使用者縮放操作時，在視覺視口上操作，
但是，視覺視口永遠螢幕那麼大，而且我看東西都是通過螢幕看，
換句話說，我們看東西，看到的東西有限
縮放操作，改變的是css畫素的面積，
放大操作，css畫素的面積變大，乙個css畫素裡對應的物理畫素變多（物理畫素在螢幕上，固定不變的）
所以，通過視覺視口看css畫素面積增大，相應的個數變少
因為我視覺視口呈現的大小固定不變，
縮放不會影響布局視口的尺寸大小，只不過面積發生變化
布局視口，視覺視口，理想視口其實最終代表的都是螢幕的尺寸
在螢幕這一塊尺寸中，不同的視口它包含了多少個css畫素的個數
（布局視口裡面包含的css畫素個數不變,視覺視口，理想視口會隨縮放而改變）
布局視口：
預設情況下 980個css畫素
加meta標籤後 裝置獨立畫素所代表的值 width = device-width
視覺視口：
預設情況下 裝置獨立畫素所代表的值
使用者放大或者系統放大時 視覺視口所包含的css畫素的個數變少
使用者縮小或者系統縮小時 視覺視口所包含的css畫素的個數變多
理想視口
由於理想視口只在加meta後才會出現，理想視口的尺寸等於裝置獨立畫素所代表的值
布局視口 = 視覺視口 = 理想視口
pc端適配移動端
1.允許網頁寬度自動調整在網頁 的頭部，加入一行viewport元標籤所有主流瀏覽器都支援這個設定，包括ie9。對於那些老式瀏覽器 主要是ie6 7 8 需要使用css3 mediaqueries.js2.不使用絕對寬度由於網頁會根據螢幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬...
移動端背景縮放
background size 500px 200px 2 只寫乙個引數時為寬度，高度省略會等比例縮放 background size 500px 3 單位可以跟百分百 相對于父盒子來說的 background size 50 4 cover屬性 要完全覆蓋div盒子，等比例拉伸，可能有部分顯示不全...
元素可拖拽（移動端與pc端）
專案中經常遇到這種需求，特此記錄下 css部分 html部分 js部分 這裡分了兩種情況，因為pc端與移動端的處理情況有點不太一樣 1 pc端 const winw window.innerwidth const winh window.innerheight const target docume...