在
網站建設時,大多數
網站設計師首先考慮的是要設計什么樣的分辨率。這實際上就是決定你的設計應該有多寬。隨著手機、平板等各種終端設備廣泛應用,以及各種分辨率的顯示器普及,網站已經不再有標準寬度這樣的東西了。既然瀏覽環境變化讓
網站設計已經不再有絕對的標準寬度了,那么在
網站設計制作時如何確定網頁寬度呢?這是一個問題,而且每家
網站建設公司都會面對,對需要認真對待并找到解決方案。
為什么要考慮解決方案
1995年,標準640x480分辨率監視器是現有的大和最好的監視器。這意味著Web設計人員專注于在12英寸到14英寸的顯示器上制作在Web瀏覽器中看起來很好的頁面,其分辨率達到大值。如今,640x480的分辨率還不到大多數網站流量的1%。人們使用的計算機分辨率更高,包括1366x768、1600x900和5120x2880。在許多情況下,1366x768分辨率屏幕的設計是可行的。
在網頁設計的歷史上,我們不需要太擔心分辨率的問題。大多數人都有大屏幕的顯示器,他們沒有大化他們的瀏覽器窗口。因此,如果您決定設計一個不超過1366像素寬的頁面,您的頁面可能會在大多數瀏覽器窗口中看起來很好,即使在分辨率較高的大型顯示器上也是如此。
瀏覽器寬度
在你開始思考“好的,我會讓我的頁面1366像素寬”之前,這個故事還有更多的內容。在決定網頁的寬度時,一個經常被忽略的問題是您的客戶保留其瀏覽器的大小。具體地說,它們是將瀏覽器的大小大化為全屏大小,還是將其保持在小于全屏大小的范圍內?
在對所有使用公司標準1024x768分辨率筆記本電腦的同事進行的一次非正式調查中,有兩個人讓他們的所有應用程序都大化了。其余的由于各種原因打開了不同大小的窗口。這說明,如果您要將該公司的Intranet設計為1024像素寬,85%的用戶必須水平滾動才能看到整個頁面。
為大化或不大化的客戶進行說明后,請考慮瀏覽器邊界。每個Web瀏覽器都有一個滾動條和邊框,在800x600分辨率下,可用空間從800像素縮小到740像素或更少,而在分辨率為1024x768的大化窗口上,則縮小到980像素左右。這就是所謂的瀏覽器“鉻”,它可以從可用的空間,為您的網頁設計。
固定或響應式寬度
實際的數字寬度并不是你在設計網站寬度時需要考慮的唯一因素。您還需要決定是固定寬度還是液體寬度。換句話說,您是要將寬度設置為特定的數字還是設置為一定的百分比?
- 固定寬度
固定寬度的頁面和它們聽起來完全一樣。寬度固定在一個特定的數字上,無論瀏覽器有多大或多小,它都不會改變。無論你的讀者的瀏覽器有多寬或多窄,如果你需要你的設計看起來完全一樣,這是很好的,但是這個方法沒有考慮你的讀者。使用比您的設計更窄的瀏覽器的用戶將不得不水平滾動,而使用寬瀏覽器的用戶將在屏幕上有大量的空白空間。要創建固定寬度的頁面,只需對頁面分區的寬度使用特定的像素編號。
- 響應式寬度
“液體寬度”頁面(有時稱為“靈活寬度頁面”)的寬度因瀏覽器窗口的寬度而異。這使您可以設計更多關注客戶的頁面。液體寬度頁的問題是它們可能很難閱讀。如果一行文本的掃描長度大于10到12個單詞或小于4到5個單詞,則可能很難閱讀。這意味著擁有大小瀏覽器窗口的讀者都有問題。要創建靈活的寬度頁面,只需使用百分比或EMS作為頁面分區的寬度。您還應該熟悉CSS大寬度屬性。此屬性允許您以百分比形式設置寬度,但隨后會對其進行限制,使其不會變得太大以致于人們無法讀取它。
CSS媒體查詢
目前最好的解決方案是使用CSS媒體查詢和響應性設計來創建一個頁面,以適應查看它的瀏覽器的寬度。響應性網頁設計使用相同的內容來創建一個網頁,無論您是以5120像素寬還是320像素寬查看該網頁。不同大小的頁面看起來不同,但它們包含相同的內容。對于CSS3中的媒體查詢,每個接收設備都使用其大小來響應該查詢,并且樣式表將根據該特定大小進行調整。
名稱欄目:瀏覽環境變化讓網站設計已經不再有絕對的標準寬度
分享路徑:http://m.newbst.com/news12/157712.html
網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有網站設計等
廣告
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源:
創新互聯