響應式的基礎是“相對”寬度，“相對”高度，“相對”大小，是percentage, em, rem. 而不是px，pt。如果你希望一個頁面佔滿半個viewport，那麼你應該用50%的width，bootstrap和所有主流的框架都是以此為基礎的，row是100%寬度，column約為row的1/12，col-xs-4約為大螢幕寬度下的1/3 — ”相對“值才有自適應和響應的能力。你需要了解裝置絕對值的時候很可能是寫media query的時候，但你真正需要的並不是裝置的尺寸值，而是viewport的值，viewport尺寸不總是等於裝置尺寸，而取決於meta tag的設定，在mobile裝置上，一個裝置屏寬為480的瀏覽器仍然可以顯示遠大於此寬度的網頁，當然網頁的內容這個時候被按比例縮小了

所以media query更需要的是反應viewport尺寸的width，min-width，max-width，而不是反應裝置本身的尺寸device-width等等，除非你的應用確實需要針對裝置本身的尺寸佈局。即時如此，寫media query的時候，仍然不推薦px，pt這樣的”絕對‘值，而會用適應性更好的的rem，em，比如假設你的基礎font-size是16px，那麼上面的規則就會作用於介於160至320之間的寬度。假如你的基礎字型大小調整為14px，那麼這條規則就會作用與140至280之間，通常這樣的視覺效果給人更一致的感覺。所以“響應式”佈局實踐的出發點是“相對”尺寸，目的是讓一個實現能夠不依賴於某個具體裝置。