響應式設計 基礎實踐

2021-06-28 15:23:54 字數 1429 閱讀 3119

頁設計師似乎已經有了乙個共識,就是為大量裝置建立不同的**幾乎是不可能的。響應式**是未來的趨勢,除非這個移動裝置需要一些非常具體的功能或完全不同的內容值得開發。

你可能已經知道響應設計,移動第一方針,和得體的退化。這些都是建立廣泛可訪問站點和網路應用程式的主要工具和技術。在這篇文章中,我將集中著重討論移動設計方面和一些亮點技術,從而能改善您的桌面站點。移動第一並不意味著,你應該開始從320px螢幕寬度的向上延伸擴充套件。更多考慮的是從工作流程中所有可能的使用情況。

簡單

即使在乙個很小的螢幕,乙個簡單而整潔的布局,也能確保使用者得到最好的體驗。但是你只有這一種方法為手持裝置的使用者考慮嗎?一旦你建立了乙個偉大的無障礙和良好的流動性的移動**,再回頭看看對比下你的桌面版本。不要忘了觸控和滑鼠是完全不同的性質。不要讓您的桌面使用者僅僅因為需要在兩個選單項之間移動200px而扭傷了手腕。**查詢是你的朋友。

放棄它,隱藏它

因此你應該決定要花費比別人更多的代價為這些看似不太重要的體驗上建立乙個移動**。最好的做法就是擺脫他們,不僅僅是為了節省一些畫素和提供更好的使用者體驗。現在問你自己,有必要把桌面版本上的東西全部展現出來嗎?那樣可能讓使用者感到迷惑或分心?也許這些選項應該是為高階使用者而設計為隱藏在子選單?也許使用者會體會到只有4個主選單,而不是6個主選單項?

桌面瀏覽器的響應

方位

方位是乙個基於當前正在縱向或橫向位置看裝置的規範。通過**查詢,你可以在不同方位分配不同的布局。一些桌面瀏覽器是「偽造」的方向,根據視窗的寬度和高度的比例。這使您可以新增一些很好的調整,以增強使用者體驗。

輸入型別

html5有一些新特性能幫助移動使用者填寫**。例如:如果你新增型別為email的字段,它會告訴移動瀏覽器提供像「@」字元或「.com」擴充套件性的電子郵件位址。請記住,它也有助於桌面使用者。他們將得到他們以前使用的電子郵件位址提供的乙個下拉列表,甚至根據他們以前使用的細節,自動填充整體**。

少的導航,更好的使用者**

在移動裝置上瀏覽,如果我有從主頁丟失了印象深刻的幾個鏈結,我會很惱火並感到失落。我會問自己:我在正確的地方嗎?我應該回去並開始了嗎?這是不應該出現的,用完整的url欄和臃腫的文字描述當切換標籤對於移動使用者來說是不明智的。

擁抱新標準

沒有通過不必要的「哦,閃光,為什麼」的辯論,我只是建議你讓您的**面向未來,盡可能地利用新興的標準。css3的過渡和其他花哨的視覺效果,先進的互動html5的。這似乎是以後要走的,除了一些過時的標籤,w3c已經支援相當一部分新特性了,所以我認為從長遠看來這是乙個不錯的選擇。

正如你看到的我沒討論過多的技術細節,但我一般都認為,擁有這方面技術的眼光會讓你更加節省開發時間。要考慮跨平台而不僅僅為移動裝置。讓您手持裝置和桌面站點在某個內容上的行為更加

《響應式web設計實踐》筆記

1.什麼是響應式設計 針對任意裝置對網頁內容進行完美布局的一種顯示機制。響應式 設計 responsive web design 的理念是 頁面的設計與開發應當根據使用者行為以及裝置環境 系統平台 螢幕尺寸 螢幕定向等 進行相應的響應和調整。具體的實踐方式由多方面組成,包括彈性網格和布局 css m...

bootstrap響應式設計簡單實踐。

首先需要熟悉boostrap提供的響應式設施 的響應式設施主要是利用 查詢對元素的可見性和inline or block顯示做變換處理。在mobile屏下面主要做以下幾個處理 1 原先row內行布局的div變成列布局,我一般喜歡以sm 750px 作為基準,所以這一點的實現很簡單,在使用col xx...

《響應式Web設計實踐》一1 2 小結

工業的發展正在逐步影響響應式設計。在我統計過的站點中,幾乎有一半的站點使用了自己專有的體驗 和我們早在21世紀頭幾年使用的解決方案一樣,而不是提供響應式站點。響應式設計並不是乙個有缺陷的方 只有在它被誤用為乙個附加的功能而非首要原則的時候,才會導致一種臃腫的 違反直覺的體驗。同樣,只有當我們將注意力...