定義您的網頁的寬度

大多數設計人員在構建網頁時首先考慮的是設計的分辨率 。 這實際上相當於決定你的設計應該有多寬。 作為一個標準的網站寬度,再也沒有這樣的東西了。

為什麼要考慮決議

在1995年,標準的640x480分辨率顯示器是最大和最好的顯示器。 這意味著網頁設計師專注於製作在網頁瀏覽器中顯示效果最佳的網頁,並以該分辨率在12英寸到14英寸的顯示器上最大化。

現在,640x480的分辨率佔大多數網站流量的不到1%。 人們使用分辨率更高的計算機,包括1366x768,1600x900和5120x2880。 在許多情況下,為1366x768分辨率屏幕設計工作。

我們正處在網頁設計史上,我們不必擔心解決方案。 大多數人都有大屏幕寬屏幕顯示器,他們不會最大化他們的瀏覽器窗口。 因此,如果您決定設計一個不超過1366像素寬度的頁面,那麼即使在具有更高分辨率的大型顯示器上,您的網頁在大多數瀏覽器窗口中也可能看起來不錯。

瀏覽器寬度

在你離開之前思考“好吧,我會讓我的頁面寬度為1366像素”,這個故事還有更多。 在決定網頁寬度時,一個經常被忽視的問題是客戶的瀏覽器有多大。 具體來說,他們是最大化他們的瀏覽器在全屏幕尺寸還是他們保持他們比全屏更小?

在一次對所有使用公司標準1024x768分辨率筆記本電腦的同事進行的非正式調查中,兩位保持所有應用程序的最大化。 其餘的有不同尺寸的窗戶因各種原因打開。 這說明,如果您設計的公司內聯網的像素寬度為1024像素,則85%的用戶將不得不水平滾動以查看整個頁面。

在為最大化或不最大化的客戶考慮後,請考慮瀏覽器邊界。 每個網頁瀏覽器都有一個滾動條和兩側邊框,可在800x600分辨率下將可用空間從800縮小至約740像素或更少,在最大化窗口上以1024x768分辨率縮小980像素。 這被稱為瀏覽器“鉻”,它可以從您的頁面設計的可用空間帶走。

固定或液體寬度頁面

實際的數字寬度並不是您在設計網站寬度時需要考慮的唯一事情。 您還需要決定是否有固定寬度或液體寬度 。 換句話說,你打算將寬度設置為特定數字(固定)還是百分比(液體)?

固定寬度

固定寬度的頁面完全像他們的聲音。 寬度固定在特定的數字,不管瀏覽器有多大或多小都不會改變。 如果您的設計看起來完全一樣,無論讀者的瀏覽器有多寬或很窄,但這種方法可能很好,但這種方法不考慮您的讀者。 瀏覽器比您的設計窄的用戶將不得不水平滾動,而具有寬​​瀏覽器的用戶將在屏幕上留出大量空白空間。

要創建固定寬度的頁面,只需使用特定的像素數字作為頁面分部的寬度。

液體寬度

液體寬度頁面(有時稱為靈活寬度頁面)的寬度取決於瀏覽器窗口的寬度。 這使您可以設計更專注於客戶的頁面。 液體寬度頁面的問題是它們可能難以閱讀。 如果一行文本的掃描長度大於10至12個字或短於4至5個字,則可能難以閱讀。 這意味著具有大或小瀏覽器窗口的讀者有困難。

要創建靈活的寬度頁面,只需使用百分比或ems來表示頁面分部的寬度。 您還應該熟悉CSS max-width屬性。 這個屬性允許你設置一個百分比的寬度,但是然後限制它,使它不會太大以至於人們無法讀取它。

贏家是:CSS媒體查詢

現在最好的解決方案是使用CSS媒體查詢和響應式設計來創建一個頁面,以調整瀏覽器查看它的寬度。 響應式網頁設計使用相同的內容創建一個網頁,無論您查看的網頁是5120像素寬還是320像素寬,都可以使用。 不同大小的頁面看起來不同,但它們包含相同的內容。 通過CSS3中的媒體查詢,每個接收設備都會根據其大小回答查詢,樣式表會調整為特定的大小。