瀏覽環(huán)境變化讓網(wǎng)站設(shè)計(jì)已經(jīng)不再有絕對(duì)的標(biāo)準(zhǔn)寬度

2022-05-24 分類：網(wǎng)站設(shè)計(jì)

在網(wǎng)站建設(shè)時(shí)，大多數(shù)網(wǎng)站設(shè)計(jì)師首先考慮的是要設(shè)計(jì)什么樣的分辨率。這實(shí)際上就是決定你的設(shè)計(jì)應(yīng)該有多寬。隨著手機(jī)、平板等各種終端設(shè)備廣泛應(yīng)用，以及各種分辨率的顯示器普及，網(wǎng)站已經(jīng)不再有標(biāo)準(zhǔn)寬度這樣的東西了。既然瀏覽環(huán)境變化讓網(wǎng)站設(shè)計(jì)已經(jīng)不再有絕對(duì)的標(biāo)準(zhǔn)寬度了，那么在網(wǎng)站設(shè)計(jì)制作時(shí)如何確定網(wǎng)頁寬度呢？這是一個(gè)問題，而且每家網(wǎng)站建設(shè)公司都會(huì)面對(duì)，對(duì)需要認(rèn)真對(duì)待并找到解決方案。

為什么要考慮解決方案

1995年，標(biāo)準(zhǔn)640x480分辨率監(jiān)視器是現(xiàn)有的大和最好的監(jiān)視器。這意味著Web設(shè)計(jì)人員專注于在12英寸到14英寸的顯示器上制作在Web瀏覽器中看起來很好的頁面，其分辨率達(dá)到大值。如今，640x480的分辨率還不到大多數(shù)網(wǎng)站流量的1%。人們使用的計(jì)算機(jī)分辨率更高，包括1366x768、1600x900和5120x2880。在許多情況下，1366x768分辨率屏幕的設(shè)計(jì)是可行的。

在網(wǎng)頁設(shè)計(jì)的歷史上，我們不需要太擔(dān)心分辨率的問題。大多數(shù)人都有大屏幕的顯示器，他們沒有大化他們的瀏覽器窗口。因此，如果您決定設(shè)計(jì)一個(gè)不超過1366像素寬的頁面，您的頁面可能會(huì)在大多數(shù)瀏覽器窗口中看起來很好，即使在分辨率較高的大型顯示器上也是如此。

瀏覽器寬度

在你開始思考“好的，我會(huì)讓我的頁面1366像素寬”之前，這個(gè)故事還有更多的內(nèi)容。在決定網(wǎng)頁的寬度時(shí)，一個(gè)經(jīng)常被忽略的問題是您的客戶保留其瀏覽器的大小。具體地說，它們是將瀏覽器的大小大化為全屏大小，還是將其保持在小于全屏大小的范圍內(nèi)？

在對(duì)所有使用公司標(biāo)準(zhǔn)1024x768分辨率筆記本電腦的同事進(jìn)行的一次非正式調(diào)查中，有兩個(gè)人讓他們的所有應(yīng)用程序都大化了。其余的由于各種原因打開了不同大小的窗口。這說明，如果您要將該公司的Intranet設(shè)計(jì)為1024像素寬，85%的用戶必須水平滾動(dòng)才能看到整個(gè)頁面。

為大化或不大化的客戶進(jìn)行說明后，請(qǐng)考慮瀏覽器邊界。每個(gè)Web瀏覽器都有一個(gè)滾動(dòng)條和邊框，在800x600分辨率下，可用空間從800像素縮小到740像素或更少，而在分辨率為1024x768的大化窗口上，則縮小到980像素左右。這就是所謂的瀏覽器“鉻”，它可以從可用的空間，為您的網(wǎng)頁設(shè)計(jì)。

固定或響應(yīng)式寬度

實(shí)際的數(shù)字寬度并不是你在設(shè)計(jì)網(wǎng)站寬度時(shí)需要考慮的唯一因素。您還需要決定是固定寬度還是液體寬度。換句話說，您是要將寬度設(shè)置為特定的數(shù)字還是設(shè)置為一定的百分比？

固定寬度
固定寬度的頁面和它們聽起來完全一樣。寬度固定在一個(gè)特定的數(shù)字上，無論瀏覽器有多大或多小，它都不會(huì)改變。無論你的讀者的瀏覽器有多寬或多窄，如果你需要你的設(shè)計(jì)看起來完全一樣，這是很好的，但是這個(gè)方法沒有考慮你的讀者。使用比您的設(shè)計(jì)更窄的瀏覽器的用戶將不得不水平滾動(dòng)，而使用寬瀏覽器的用戶將在屏幕上有大量的空白空間。要?jiǎng)?chuàng)建固定寬度的頁面，只需對(duì)頁面分區(qū)的寬度使用特定的像素編號(hào)。
響應(yīng)式寬度
“液體寬度”頁面(有時(shí)稱為“靈活寬度頁面”)的寬度因?yàn)g覽器窗口的寬度而異。這使您可以設(shè)計(jì)更多關(guān)注客戶的頁面。液體寬度頁的問題是它們可能很難閱讀。如果一行文本的掃描長度大于10到12個(gè)單詞或小于4到5個(gè)單詞，則可能很難閱讀。這意味著擁有大小瀏覽器窗口的讀者都有問題。要?jiǎng)?chuàng)建靈活的寬度頁面，只需使用百分比或EMS作為頁面分區(qū)的寬度。您還應(yīng)該熟悉CSS大寬度屬性。此屬性允許您以百分比形式設(shè)置寬度，但隨后會(huì)對(duì)其進(jìn)行限制，使其不會(huì)變得太大以致于人們無法讀取它。

CSS媒體查詢

目前最好的解決方案是使用CSS媒體查詢和響應(yīng)性設(shè)計(jì)來創(chuàng)建一個(gè)頁面，以適應(yīng)查看它的瀏覽器的寬度。響應(yīng)性網(wǎng)頁設(shè)計(jì)使用相同的內(nèi)容來創(chuàng)建一個(gè)網(wǎng)頁，無論您是以5120像素寬還是320像素寬查看該網(wǎng)頁。不同大小的頁面看起來不同，但它們包含相同的內(nèi)容。對(duì)于CSS3中的媒體查詢，每個(gè)接收設(shè)備都使用其大小來響應(yīng)該查詢，并且樣式表將根據(jù)該特定大小進(jìn)行調(diào)整。

分享標(biāo)題：瀏覽環(huán)境變化讓網(wǎng)站設(shè)計(jì)已經(jīng)不再有絕對(duì)的標(biāo)準(zhǔn)寬度
瀏覽地址：http://www.bm7419.com/news/157712.html

網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián)，是專注品牌與效果的網(wǎng)站制作，網(wǎng)絡(luò)營銷seo公司；服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容