響應(yīng)式網(wǎng)站設(shè)計(jì)的9個(gè)基本原則

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是我們多屏幕問(wèn)題的一個(gè)很好的解決方案，但是從打印的角度來(lái)看，它是困難的。沒(méi)有固定的頁(yè)面大小，毫米或毫米，沒(méi)有物理限制來(lái)對(duì)抗。隨著越來(lái)越多的小工具可以打開(kāi)網(wǎng)站，Google桌面和手機(jī)的設(shè)計(jì)也是過(guò)去的。因此，讓我們澄清一下響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的一些基本原則，以便擁抱流暢的網(wǎng)絡(luò)，而不是與之相沖突。為了保持簡(jiǎn)單，我們將專注于布局。
響應(yīng)對(duì)比自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)
它可能看起來(lái)一樣，但不是。這兩種方法相互補(bǔ)充，所以沒(méi)有對(duì)錯(cuò)的方法。讓內(nèi)容決定。
流量
隨著屏幕尺寸變小，內(nèi)容開(kāi)始占據(jù)更多的垂直空間，下面的任何東西都會(huì)被推下來(lái)，這被稱為流程。如果您習(xí)慣于使用像素和點(diǎn)進(jìn)行設(shè)計(jì)，那么抓握可能會(huì)很棘手，但是當(dāng)您習(xí)慣使用它時(shí)，可能會(huì)很有意義。
相對(duì)單位
畫布可以是桌面，移動(dòng)屏幕或其間的任何東西。像素密度也可以有所不同，所以我們需要靈活的單位，無(wú)處不在。那就是百分比相對(duì)單位派上用場(chǎng)。所以做一些50％的寬度意味著它總是占用一半的屏幕（或視口，這是打開(kāi)的瀏覽器窗口的大小）。
斷點(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ā)生。
大值和最小值
有時(shí)，內(nèi)容占用屏幕的整個(gè)寬度，如在移動(dòng)設(shè)備上，但是具有延伸到電視屏幕的整個(gè)寬度的相同內(nèi)容通常不那么有意義。這就是為什么Min / Max值有幫助。例如，寬度為100％，大寬度為1000px將意味著內(nèi)容將填滿屏幕，但不要超過(guò)1000px。
嵌套對(duì)象
記得相對(duì)位置嗎？相互依賴的許多元素將難以控制，因此將容器中的元素包裹起來(lái)更容易理解，干凈整潔。這就是像像素這樣的靜態(tài)單位。它們對(duì)于您不想縮放的內(nèi)容（如徽標(biāo)和按鈕）很有用。
移動(dòng)或桌面
從技術(shù)上來(lái)說(shuō)，如果一個(gè)項(xiàng)目從較小的屏幕開(kāi)始到更大的（首先移動(dòng)的），反之亦然（桌面式），則沒(méi)有什么區(qū)別。然而，它增加了額外的限制，并幫助您做出決定，如果您首先從移動(dòng)開(kāi)始。人們通常從兩端開(kāi)始，所以真的，去看看什么對(duì)你更好。
網(wǎng)頁(yè)字體與系統(tǒng)字體
想要在您的網(wǎng)站上看到一個(gè)很酷的Futura或Didot？使用網(wǎng)頁(yè)字體雖然他們會(huì)看起來(lái)很驚艷，但請(qǐng)記住，每個(gè)都將被下載，您將擁有的越多，加載頁(yè)面所需的時(shí)間就越長(zhǎng)。另一方面，系統(tǒng)字體是閃電般快速的，除非用戶在本地沒(méi)有，否則會(huì)退回到默認(rèn)字體。
位圖圖像與矢量圖
你的圖標(biāo)有很多細(xì)節(jié)和一些花哨的效果嗎？如果是，請(qǐng)使用位圖。如果沒(méi)有，請(qǐng)考慮使用矢量圖像。對(duì)于位圖使用jpg，png或gif，對(duì)于矢量，最佳選擇將是SVG或圖標(biāo)字體。每個(gè)都有一些好處和一些缺點(diǎn)。但請(qǐng)記住大小 - 沒(méi)有圖片應(yīng)該在沒(méi)有優(yōu)化的情況下上網(wǎng)。另一方面，向量通常很小，但是一些較老的瀏覽器將不支持它。另外，如果它有很多曲線，它可能比位圖重，所以選擇明智。

文章名稱：響應(yīng)式網(wǎng)站設(shè)計(jì)的9個(gè)基本原則
標(biāo)題路徑：http://www.bm7419.com/news19/280269.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、面包屑導(dǎo)航、服務(wù)器托管、搜索引擎優(yōu)化、做網(wǎng)站、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(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í)需注明來(lái)源： 創(chuàng)新互聯(lián)