在設計前端頁面的過程中。經常會為width,height設定多少畫素而感到困惑。

今天就來捋一捋這裡的畫素。

我的筆記本的解析度是1920x1080畫素

測試了瀏覽器滿屏的畫素大概是 1920x960

在一個div下設定 width：1920px    height：960px 剛好填滿瀏覽器

                          width：960px    height：480px   則發現只有瀏覽器的四分之一大小 1/2  * 1/2 = 1/4

                          width:480px    height：240px  則為瀏覽器的十六分之一  1/4 * 1/4 = 1/16

那要把div放在正中間。則考慮如下

譬如。

1 width:640px;
2 height: 320px;
3     
4 position: absolute;
5 left:640px;
6 top:320px;

想想九宮格最中間的格子。因此是分成 9等分，I/3 * 1/3 = 1/9

1920* 1/3 = 640 , 960 *1/3 = 320

因此width 和 height的值如上設定

left,top 需要和 position 一起使用，否則  left 和 top 沒有效果。

當然，還是設定成

left 50%和top 50%比較好