網(wǎng)站制作時(shí)如何處理好固定寬度與響應(yīng)式布局

2022-05-23 分類：網(wǎng)站制作

網(wǎng)頁(yè)布局可以通過兩種不同的方式完成：

固定寬度布局：這些布局使用特定的數(shù)值設(shè)置整個(gè)頁(yè)面的寬度。

響應(yīng)式布局：這些布局的整個(gè)頁(yè)面的寬度是靈活的，這取決于瀏覽器的寬度。

使用這兩種布局方法都有很好的理由，但是如果不了解每種方法的相對(duì)優(yōu)點(diǎn)和缺點(diǎn)，就不能很好地決定將哪種方法用于Web頁(yè)面。兩種方式都可以實(shí)現(xiàn)網(wǎng)頁(yè)排版布局，那么在網(wǎng)站設(shè)計(jì)和網(wǎng)站制作時(shí)該如何選擇呢？或者說，網(wǎng)站制作時(shí)如何處理好固定寬度與響應(yīng)式布局呢？

固定寬度布局

固定布局是由Web設(shè)計(jì)器確定的以特定大小開始的布局。無(wú)論查看頁(yè)面的瀏覽器窗口的大小如何，它們都保持該寬度。固定寬度布局允許設(shè)計(jì)者更直接地控制頁(yè)面在大多數(shù)情況下的外觀。它們通常是具有打印背景的設(shè)計(jì)人員的選，因?yàn)樗鼈冊(cè)试S設(shè)計(jì)人員對(duì)布局進(jìn)行微小的調(diào)整，并使它們?cè)跒g覽器和計(jì)算機(jī)之間保持一致。

響應(yīng)式布局

是基于當(dāng)前瀏覽器窗口大小的百分比的布局。它們根據(jù)窗口的大小進(jìn)行調(diào)整，即使當(dāng)前的瀏覽器在查看站點(diǎn)時(shí)改變了瀏覽器的大小。響應(yīng)式寬度布局允許非常有效地利用任何給定的Web瀏覽器窗口或屏幕分辨率所提供的空間。它們通常是那些在盡可能小的空間內(nèi)獲得大量信息的設(shè)計(jì)者的選，因?yàn)闊o(wú)論誰(shuí)在查看頁(yè)面，它們?cè)诖笮『拖鄬?duì)頁(yè)面權(quán)重上都保持一致。

固定寬度布局的優(yōu)點(diǎn)

固定寬度的布局允許設(shè)計(jì)人員構(gòu)建外觀相同的頁(yè)面，無(wú)論是誰(shuí)在查看它們。固定寬度的元素(如圖像)不會(huì)在較小的顯示器上壓倒文本，因?yàn)檎麄€(gè)頁(yè)面的寬度將包括這些元素。無(wú)論Web瀏覽器有多寬，掃描長(zhǎng)度都不會(huì)受到較大文本段的影響。

響應(yīng)式布局的好處

響應(yīng)式寬度布局將展開并收縮以填充可用空間。所有可用的房地產(chǎn)都被使用，允許設(shè)計(jì)師在較大的顯示器上顯示更多的內(nèi)容，但在較小的顯示器上仍然可行。響應(yīng)式布局提供了相對(duì)寬度的一致性，使頁(yè)面能夠更動(dòng)態(tài)地響應(yīng)客戶施加的限制，如較大的字體大小。

固定寬度布局的缺點(diǎn)

固定寬度布局可能導(dǎo)致在較小的瀏覽器窗口中進(jìn)行水平滾動(dòng)。大多數(shù)人不喜歡水平滾動(dòng)。它們還會(huì)在較大的監(jiān)視器中產(chǎn)生大量空白，從而導(dǎo)致大量未使用的空間和超出所需的垂直滾動(dòng)。固定寬度布局不能很好地處理客戶對(duì)字體大小的更改。對(duì)于字體大小的少量增加，它們可能是可以的，但對(duì)于較大的增加，布局可能會(huì)受到影響。

響應(yīng)式布局的缺點(diǎn)

響應(yīng)式布局幾乎不能精確控制頁(yè)面的各個(gè)元素的寬度。它們可能導(dǎo)致文本列太寬而無(wú)法輕松掃描，或者在較小的瀏覽器上太小，無(wú)法清晰顯示單詞。當(dāng)固定寬度的元素(如圖像)放置在液柱內(nèi)時(shí)，響應(yīng)式布局可能會(huì)出現(xiàn)問題。如果顯示的列沒有足夠的圖像空間，則某些瀏覽器將增加列寬度，而不考慮設(shè)計(jì)器的說明，而其他瀏覽器將導(dǎo)致文本和圖像重疊，以達(dá)到正確的百分比。

總結(jié)：

許多網(wǎng)站有大量的信息，他們需要在盡可能小的空間內(nèi)傳達(dá)，將與響應(yīng)式布局很好地工作。這使他們能夠利用更大的顯示器提供的所有房地產(chǎn)，而不是短路較小的顯示器。需要精確控制頁(yè)面在每種情況下的外觀的站點(diǎn)最好使用固定寬度的布局。這提供了更多的保證，無(wú)論您的網(wǎng)站在什么大小的顯示器上查看，它的品牌都是一致和清晰的。

許多人喜歡混合的方法。他們不喜歡對(duì)大文本塊使用液態(tài)布局，因?yàn)檫@會(huì)使文本在小屏幕上不可讀或在大屏幕上不可掃描。因此，它們傾向于使頁(yè)面的主列具有固定的寬度，但使頁(yè)眉、頁(yè)腳和側(cè)欄更靈活，以占用剩余的空間，并且不會(huì)失去較大瀏覽器的容量。有些站點(diǎn)使用腳本來確定瀏覽器窗口大小，然后相應(yīng)地更改顯示元素。例如，如果您在一個(gè)非常寬的窗口中打開這樣的站點(diǎn)，您可能會(huì)在左側(cè)看到一列額外的鏈接，而使用較小監(jiān)視器的客戶可能看不到這些鏈接。此外，圍繞廣告的文本環(huán)繞取決于您的瀏覽器窗口有多寬。如果它足夠?qū)?，站點(diǎn)將在其周圍環(huán)繞文本，否則，它將在廣告下面顯示文章文本。雖然大多數(shù)網(wǎng)站不需要這樣的復(fù)雜程度，但它展示了一種利用大屏幕而不影響小屏幕上的顯示的方法。

本文名稱：網(wǎng)站制作時(shí)如何處理好固定寬度與響應(yīng)式布局
鏈接地址：http://redsoil1982.com.cn/news9/156759.html

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

聲明：本網(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)容