響應式網(wǎng)頁設計是針對多屏幕問題的一個很好的解決方案。但從印刷的視角來看有點困難。沒有固定的頁面尺寸。沒有毫米或英寸。沒有任何的物理限制。無從下手。為了desktop和mobile單獨使用像素設計的方法也成為了過去。因為越來越多的設備都可以打開網(wǎng)站。因此。網(wǎng)站建設覺得需要我們需要弄清楚響應式網(wǎng)頁設計的一些基本原則。接受流體網(wǎng)頁。而不是與之相抗。

1.響應式 vs 自適應網(wǎng)頁設計

它們看起來似乎是相同的。但事實并非如此。這兩種方法相輔相成。并沒有說哪個是正確的那個是錯誤的。內(nèi)容決定一切。

2.內(nèi)容流動

隨著屏幕尺寸變小。內(nèi)容將會占據(jù)更多的垂直空間。而下方的內(nèi)容就會被接著往下推。這就是所謂的流動。如果你是使用像素和磅來進行設計的。這可能會有點棘手。但是當你習慣了之后。就會變得很有意義了-網(wǎng)站設計認為！

3.相對單位

畫布大小可以是desktop、mobile或是它們之間的任何尺寸。像素密度也可以有所不同。所以我們需要靈活的、在各種屏幕上都可以使用的單位。這就是相對單位（如百分比）派上用場的時候了。所以設置50%的寬度也就意味著它會占據(jù)屏幕（或視圖。即打開的瀏覽器窗口的尺寸）的一半。

4.斷點

斷點允許布局在預定義的點改變。例如：desktop屏幕上有3列。但是在mobile上只有一列。大多數(shù)CSS屬性可以根據(jù)斷點改變。通常你會根據(jù)具體的內(nèi)容來設置斷點。如果一個句子超過了屏幕長度。你可能就需要為其添加一個斷點。但是使用斷點是需要謹慎——當它很難理解什么內(nèi)容會影響什么內(nèi)容的時候。它可能會迅速地導致混亂。

5.大值和小值

有時候。如果內(nèi)容占據(jù)了屏幕的整個寬度是很好的。比如在移動設備上。但是如果是在電視屏幕上。相同的內(nèi)容。占據(jù)了你的屏幕整個的寬度。通常就意義不大了。這就是Min/Max值發(fā)揮作用的時候了。比如說。設置width為100%。然后max-width是1000px。那么內(nèi)容會填滿屏幕。但是不會超過1000px。

6.嵌套對象

還記得相對位置嗎？讓很多元素的位置依賴于其它元素來定位是很難控制好的。因此使用容器來包裹元素可以讓它更易理解。也更整潔。這就是靜態(tài)單位（比如像素）發(fā)揮作用的時候了。對于你不想要模塊化的內(nèi)容（比如logo或按鈕）。它們是有用的。

7.Mobile優(yōu)先 還是Desktop優(yōu)先

從技術(shù)上講。如果一個項目是從一個較小的屏幕開始。變成較大的屏幕（mobile優(yōu)先）。還是反過來（desktop優(yōu)先）。并沒有太大的差別。然 而它還是增加了額外的限制。可以幫助你決定是否從mobile優(yōu)先開始。通常大家在一開始的時候都會兩端一起寫。所以。還是看看哪個運行起來更好。

8.網(wǎng)頁字體 vs 系統(tǒng)字體

希望你的網(wǎng)站上有很酷的Futura或Didot字體嗎？可以使用網(wǎng)頁字體！雖然它們看起來非常棒。但是記住字體放得越多。你加載頁面的時間也會越長。在另一方面。加載系統(tǒng)字體確是快如閃電。但當用戶本地沒有這套字體時。它就會返回默認的字體。

9.位圖 vs 矢量圖

你是否想過在圖標上添加很多的細節(jié)和花哨的效果？如果想過的話。使用位圖比較合適。如果沒有?？梢钥紤]使用矢量圖。對于位圖。使用的是jpg、png或gif格 式的圖像。而對于矢量圖。知名的選擇是SVG或圖標字體。每個都有對應的優(yōu)勢和缺點。但是圖片的大小也需要重視——網(wǎng)頁上的圖片必須經(jīng)過優(yōu)化。另一個方 面。矢量圖通常比較小。但是一些舊版的瀏覽器不支持。此外。如果它有很多曲線的話。它也可能會比位圖要重。所以。慎重選擇。

本文名稱：響應式網(wǎng)站建設中的常見設計方式-網(wǎng)站建設分享
文章分享：http://jinyejixie.com/news8/298758.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、關(guān)鍵詞優(yōu)化、網(wǎng)站設計、搜索引擎優(yōu)化、域名注冊、微信公眾號

廣告

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