響應式設計 例項

2022-08-21 14:45:10 字數 619 閱讀 9343

響應式有三個核心的東西:

1、css3  的media query屬性,這個是響應的乙個基石

2、彈性的布局

3、彈性

media query屬性使用上次有說明,在此就不多做說明。

本人自己感覺,相應式布局的難點在2、3兩點。彈性布局要求頁面不能用前端最熟悉的px,只能用百分比,但是百分比會帶來很多問題,很重要的一點就是拉伸和壓縮的問題。拉伸是指的呈現不能比原始尺寸要大,其中包括一是不能變形,即寬和高的比例不能改變,二是不能拉伸的比原始更高或是更寬(假如的原始尺寸是100*50的,最寬只能是100,最高只能是50),這個在一般的布局下很好控制,但是在百分比布局和不同解析度在一起的作用的就很難控制。需要拿著計算器仔細的計算了。

還有一點就是內容的組織,在小螢幕的情況下,一般採取兩種方式來改變布局,一是隱藏內容,二是改變內容位置;這樣就要求分清內容的主次,在一定的情況下捨棄什麼樣的內容。還有一點可能和ui設計師關係很大,因為頁面在不同的解析度下呈現的方式不一樣,所以設計師要設計不同解析度呈現樣式,具體這個解析度怎麼決定,這次做的專題只是隨便選擇了幾個,具體怎麼選擇,還沒有深入研究,不過大體上選擇的分級應該和現在市場上移動裝置的解析度及尺寸一致。

這個做的只是乙個嘗試,在此貼出作專題的一些小小的總結,希望不吝賜教。

響應式例項

假如人生不曾相遇 假如人生不曾相遇,我還是我,你還是你。行走在孤獨而陌生的城市裡,每天看日出日落,聽蟲鳴鳥叫,與自己的影子彼此安慰,冷暖自知。遇到便是緣分,碰到就會有福分。我們這一生總會遇到各種各樣的人,不論遇上誰,碰上誰,遇到了就要以誠相待,用心關懷,彼此溫暖,彼此珍惜。假如人生不曾相遇,我不會知...

響應式設計

響應式設計 樣式設計適應各種不同解析度尺寸 學習1.css3 media queries 2.樣式覆蓋 考 the orientation media query 一文。我們可以建立多個樣式表,以適應不同裝置型別的寬度範圍。將多個media queries整合在乙個樣式表檔案中 50 smartph...

響應式設計

響應式設計簡單說呢就是針對不同的螢幕解析度應用不同的css樣式,這裡有兩個關鍵點 一是如何在不修改dom結構的前提下調整布局 二是如何判斷螢幕解析度並應用對應的css 以上兩點應該不依賴於js.1 實現第一點依靠的是流式布局,就是所有參與布局的div都用float left,寬度都用百分比表示 圖一...