視口標籤
"width=device-width 宣告實際寬度為裝置的寬度viewport
" content="
width=device-width, initial-scale=1.0, user-scalable=no
">
initial-scale=1.0 初始化的縮放大小，1.0不進行任何的縮放
minimum-scale=1.0 允許使用者縮放的倍數，1.0不允許縮小
maximum-scale=1.0 允許使用者放大的倍數，1.0 不允許放大
user-scalable=no 是否允許使用者縮放，no不允許使用者縮放
手機廠商在出廠的時候，設定的預設寬度為980，廠商定的視口被稱為布局視口；
這寬度不能作為網頁設計中的實際寬度，需要根據裝置的設計寬度來進行相應的操作；
視口寬度，這個寬度才是我們所需要的實際寬度；通過這個視口寬度引申出了乙個標籤 ，叫做視口標籤，
它所得出結果才是裝置的實際寬度；當前一切手機端的效果都需要用到視口標籤；
解析度與畫素比
在pc端頁面 1css畫素 = 1物理畫素，是1：1對應的。
但移動裝置解析度甚至比pc端更高，可以顯示的物理畫素更多，如果和pc端一樣，1個css的px和物理畫素對應，可以想象顯示的內容有多小。
為解決這個問題，宣告視口標籤，那在移動裝置上就別1:1對應了，1個css的px對應多個物理畫素吧，這樣就不至於顯示的內容過小。
在開發時寫的px和最終渲染顯示的物理畫素不是1:1的，可能1個px對應2個物理畫素、或3個物理畫素。
多倍圖
在移動端開發裡宣告了視口標籤，由於解析度與畫素比的影響，會自動放大會造成模糊
我們需要準備比圖大2倍甚至3倍進行縮小，才不會模糊。這也就是2x圖，3x圖的由來。
**查詢
/* 設定小於750畫素的樣式 手機端*/@media screen and (max-width: 749px) {}
/* 設定大於1200畫素的樣式 pc端*/
@media screen and(min-width:1200px) {}
/* 設定大於750且小於1200的樣式 平板*/
@media screen and(min-width:750px) and (max-width: 1200px) {}
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式程式設計 什麼是響應式程式設計
那麼什麼是響應式程式設計，來看個簡單的例子 var i 1,j 2,k i j print k k k 3 i 3 j 4 print k k k 3在這裡把i,j,k當成某個狀態，k是j,i兩個狀態的組合，正常的程式設計中，在計算了k的狀態之後，再去改變j,i的狀態是不會影響到c的狀態的。所以在正...
vue響應式布局 Vue 響應式原理
vue2 的資料偵測 在 src observer 目錄裡面，元件例項在初始化時，會呼叫 observe 函式處理 data function initdata vm observe 改寫了所有物件屬性的 getter setter 和陣列原型上的 7 個會改寫陣列方法，從而讓 data 變成可響應...