2014年12月9日 星期二

HTML, CSS, 相對視窗或螢幕的高度與寬度

w3school.com網站,CSS Units有各種與寬度的表示法

以我使用的頻率來排序:

  • px: 使用螢幕幾個像素(但是還要考慮Retina螢幕像素是一般螢幕像素的兩倍)
  • %: 相對父層的大小比例
  • vh, vw: 相對於瀏覽器展示網頁區域的大小(不是整個瀏覽器的大小,沒包含瀏覽器的工具列,只有展示網頁的區域)
  • vmin: vh, vw取最小值(另外還有vmax則是取最大值,但是目前IE跟safari不支援)

px%很常用,vhvwvmin是CSS3的新產物,表示相對瀏覽器展示頁面的大小


相對視窗大小

這邊先說明,vhvwvmin只包含網頁顯示區域的長寬,不包含瀏覽器的工具列

先從dom的最根本講起好了,一份HTML文件,根是<html></html>(雖然沒有嚴格規定,不寫也能顯示),然後這個根的父元件就是瀏覽器的網頁頁面顯示區

因此,如果對<html></html>宣告大小是100%就跟宣告100vh一樣,因為都是指瀏覽器的網頁頁面顯示區大小

這個範例是將html設定為100vh

<html style="height: 100vh">
    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

        <script type="text/javascript">
            console.log($('html').height());
        </script>
    </head>
</html>

這個範例是將html設定為100%

<html style="height: 100%">
    <head>
        <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

        <script type="text/javascript">
            console.log($('html').height());
        </script>
    </head>
</html>

這兩者在瀏覽器的console應該輸出一樣的大小

如果從html, body到div , 這些tag都填入100%,則從頭到尾都填滿整個視窗(當然還注意body預設有padding, margin佔有一些寬度,要把他們都設為0,才會真的佔滿全畫面)

不過現在有vh, vw,就不用這麼麻煩了,可以只設定長度為100vh, 寬度為100vw,就可以填滿整個畫面(依然得注意body預設佔有padding跟margin)

像下面這樣就能把兩個div排在一起,並且以瀏覽器寬度3:7的比例,分割成兩個區塊

<html>
    <head></head>
    <body style="margin: 0;padding: 0;">
        <div style="width: 30vw;float:left;">Left...</div>
        <div style="width: 70vw;float:left;">Right...</div>
    </body>
</html>

還有一個問題,以往使用桌上型電腦的螢幕,我們可以預期大部分人的電腦,都是寬度大於長度,大部份的人也都是用全螢幕瀏覽網頁。所以我們很信任的將長寬都設定成vh就可以變成正方形,並且不超過瀏覽器大小。

但是現在手機螢幕,可以拿直的,也可以拿橫的,那要怎麼辦呢?就使用vmin

譬如我們要顯示一張正方形的圖片,希望以最大張的方式呈現

<html>
    <head></head>
    <body style="margin: 0;padding: 0;">
        <img src="圖片路徑" style="width: 100vmin;height: 100vmin;">
    </body>
</html>

這樣就不怕桌機或手機,螢幕擺直得或橫的,都以最大張,且不會超出瀏覽器範圍欄顯示圖片


相對螢幕大小

那可不可以相對於使用者整個螢幕的大小?

可以,但是要使用Javascript去設定,在Javascript裡面直接使用screen.heightscreen.width,就可以取得螢幕大小(關於screen是什麼?請參考w3school的相關頁面)

之後再用dom語法,去改你要改的地方,假設你要將所有的div tag寬度都隨使用者螢幕寬度改變,這邊使用jQuery:

$('div').width(screen.width);

這時候不管使用者怎麼拉動瀏覽器的寬度,所有的div tag寬度都等是螢幕寬度

如果想單純使用javascipt的話,語法比較冗長一點,可以參考w3chool的頁面,注意他傳入的參數後面還要接單位,所以在screen.width之後記得再加上"px",之後才當引數傳進去

回到原本的jQuery版本,如果想要75%的螢幕大小

$('div').width(screen.width * 0.75);

想要30%的螢幕大小

$('div').width(screen.width * 0.3);

以此類推,我一開始會害怕對screen.width做數學運算,因為不確定內容是字串還是數字。但是多慮了,javascript可以對數字做數學運算,也可以對內容是數字的字串做數學運算

'10' * '10' // 輸出100
'10' * 10 // 也輸出100

如果是在Ruby,則是輸出"10101010101010101010",所以在javascript裡面,不用怕,他內容是數字,就直接對他做數學運算,不用先檢查型別。(若字串內容不是數字,會輸出NaN,Not a Number的意思)

沒有留言:

張貼留言