banner

資訊

傳播釋放影響,品牌成就價(jià)值。

【翊百企服】響應(yīng)式網(wǎng)站設(shè)計(jì)的9個(gè)基本原則一

作者:yibai

時(shí)間:2021.09.07

返回

響應(yīng)式網(wǎng)頁設(shè)計(jì)是我們多屏幕問題的一個(gè)很好的解決方案,但是從打印的角度來看,它是困難的。沒有固定的頁面大小,毫米或毫米,沒有物理限制來對(duì)抗。隨著越來越多的小工具可以打開網(wǎng)站,Google桌面和手機(jī)的設(shè)計(jì)也是過去的。因此,讓我們澄清一下響應(yīng)式網(wǎng)頁設(shè)計(jì)的一些基本原則,以便擁抱流暢的網(wǎng)絡(luò),而不是與之相沖突。為了保持簡(jiǎn)單,我們將專注于布局響應(yīng)對(duì)比自適應(yīng)網(wǎng)頁設(shè)計(jì),它可能看起來一樣,但不是。這兩種方法相互補(bǔ)充,所以沒有對(duì)錯(cuò)的方法,一切內(nèi)容決定。


 1.流量


  隨著屏幕尺寸變小,內(nèi)容開始占據(jù)更多的垂直空間,下面的任何東西都會(huì)被推下來,這被稱為流程。如果您習(xí)慣于使用像素和點(diǎn)進(jìn)行設(shè)計(jì),那么抓握可能會(huì)很棘手,但是當(dāng)您習(xí)慣使用它時(shí),可能會(huì)很有意義。


 2.相對(duì)單位


 畫布可以是桌面,移動(dòng)屏幕或其間的任何東西。像素密度也可以有所不同,所以我們需要靈活的單位,無處不在。那就是百分比相對(duì)單位派上用場(chǎng)。所以做一些50%的寬度意味著它總是占用一半的屏幕(或視口,這是打開的瀏覽器窗口的大小)。

1300997695.jpg


 3.斷點(diǎn)


    斷點(diǎn)允許布局在預(yù)定義點(diǎn)更改,即在桌面上具有3列,但在移動(dòng)設(shè)備上只有1列。大多數(shù)CSS屬性可以從一個(gè)斷點(diǎn)更改為另一個(gè)斷點(diǎn)。通常你放在哪里取決于內(nèi)容。如果一個(gè)句子中斷,您可能需要添加一個(gè)斷點(diǎn)。但是請(qǐng)謹(jǐn)慎使用它們-當(dāng)很難理解什么是影響什么時(shí),它可能會(huì)很快發(fā)生。


4.最大值和最小值


有時(shí),內(nèi)容占用屏幕的整個(gè)寬度,如在移動(dòng)設(shè)備上,但是具有延伸到電視屏幕的整個(gè)寬度的相同內(nèi)容通常不那么有意義。這就是為什么Min/Max值有幫助。例如,寬度為100%,最大寬度為1000px將意味著內(nèi)容將填滿屏幕,但不要超過1000px。


 以上內(nèi)容便是深圳市翊百企業(yè)服務(wù)有限公司小編為大家?guī)淼娜績(jī)?nèi)容分享,希望對(duì)你們有所幫助!


【溫馨提示】文中部分文字圖片來源網(wǎng)絡(luò),版權(quán)歸屬原作者,若有不妥,請(qǐng)聯(lián)系告知修改或刪除,謝謝!



我們希望

下一個(gè)故事由您講述!

商務(wù)咨詢電話

0755-23204105