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

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

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

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

廣告

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