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

文章名稱：響應式網站設計的9個基本原則
標題路徑：http://www.js-pz168.com/news19/280269.html

成都網站建設公司_創新互聯，為您提供定制網站、面包屑導航、服務器托管、搜索引擎優化、做網站、移動網站建設

廣告

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