首頁  >  文章  >  web前端  >  響應式佈局的見解

響應式佈局的見解

WBOY
WBOY原創
2016-08-31 08:41:451232瀏覽

    對於響應式佈局呢,我相信每個人都有自己不同的見解,有的呢認為響應式佈局就是一種網頁,但是我們真正的響應式佈局是可以隨網頁的大小,從而自己調節的一種網頁,在PC端的時候網頁上的所有的東西都呈一排顯示,或者是分為有兩個側欄,或一個側欄,還有主題內容組成的,在PC端的時候是整體一排顯示的,但隨著螢幕的縮小版面會變小在手機端的話,可能原本豎起排的按鈕就會橫排過來.....

    那麼寫響應式佈局的幾種方法有:

    1.首先大家應該認識midia這個字吧,media呢在英文中就是媒體的意思,這是就有人問media有什麼屬性呢?它可以做什麼?其實media呢有一個語句呢就是@media  screen  and(min-width:) (max-width);這個語句呢就是響應式佈局的基礎應用,給它賦予不同的值的話,它就可以在不同的屏幕上顯示了,這樣她就可以實現響應式佈局的效果了,但是由於瀏覽器的兼容問題,它依舊存在的許多的毛病這怎麼辦呢?這時就涉及到了media的一些其它的屬性了,總之一句話media還是很強大的,用它也可以實現響應式佈局。

    2.其次呢是響應式佈局的另一種實現的方法以百分比的形式給寬度,這樣的佈局也可以實現響應式佈局的效果隨著屏幕的放大縮小佈局也會跟著放大縮小的,這種佈局的方法雖然可以實現響應式佈局但是現在在我的的工作,或者公司中已經很少推薦使用這種佈局的方式了,雖然說這種佈局的方法簡單,但同時它也存在著很大的問題已經跟不上時代的發展了,而且這樣佈局的程式碼量相對來說程式碼多、視覺不美觀,這樣在我們做專案的時候有很大的影響,所以儘管這種佈局的方法是簡單但是我們現在已經很少公司去用這種的佈局方法了。

    3.最後呢還有一種方法也可以做響應式佈局,那就是用bootstrap的柵欄,在最大屏幕就用col-lg-,在平板顯示的話就適用col-sm-,在最小屏幕就適用col -xs-,在PC端顯示的話就用的col-md-,在這個框架中,將一個容器分成了十二個格子,這種佈局的方法也具有響應式佈局的效果,柵格針對不同的裝置設定了不同的樣式,例如,在一個元素上使用了兩個class,那麼他會根據裝置螢幕的大小來選擇合適的樣式,如果螢幕的大小不在類別的範圍內那麼他就會忽略這兩個類;而柵欄的每個樣式都是在row的基礎上進行,可以通過不同組合的類來達到在不同設備上顯示的期望效果,但是呢這個佈局是以做手機app為主的雖然說他也可以實現響應式佈局的效果,但是我個人認為這種佈局的框架不是很好,但是總體來說沒有什麼小毛病。

    以上呢就是我個人對響應式佈局的見解,這只是我自己的一些見解如果有什麼不對的地方請大家多多指點,謝謝大家!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn