作為前端開發(fā)工程師，布局方式有多種，對于不同的場景可以使用不同的布局方式，但是很剛參加前端培訓的同學對于這些不是很了解，今天山東中公優(yōu)就業(yè)的老師帶大家先來簡單的了解一下，那些前端開發(fā)必須了解的布局。
1.靜態(tài)布局：
靜態(tài)布局：給頁面元素設(shè)置固定的寬度和高度，單位用px，當窗口縮小，會出現(xiàn)滾動條，拉動滾動條顯示被遮擋內(nèi)容。針對不同分辨率的手機端，分別寫不同的樣式文件。
2.彈性布局：
css3引入的，flex布局;優(yōu)點在于其容易上手，根據(jù)flex規(guī)則很容易達到某個布局效果，然而缺點是：瀏覽器兼容性比較差，只能兼容到ie9及以上;
3.自適應(yīng)布局：
分別為不同的屏幕分辨率定義布局，在每個布局中，頁面元素不隨窗口大小的調(diào)整而發(fā)生變化，當窗口大小到達一定分辨率時變化一次。創(chuàng)建多個靜態(tài)布局，每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍，使用@media媒體查詢技術(shù)。
4.流式布局：
元素的寬高用百分比做單位，元素寬高按屏幕分辨率調(diào)整，布局不發(fā)生變化。屏幕尺度跨度過大的情況下，頁面不能正常顯示。
5.響應(yīng)式布局：
使用meta標簽設(shè)置，頁面元素寬度隨窗口調(diào)整自動適配。采用自適應(yīng)布局和流式布局的綜合方式，為不同屏幕分辨率范圍創(chuàng)建流式布局。
在我們參加前端培訓學習或者是做前端開發(fā)是做項目時要怎么區(qū)選擇布局方式。
1.如果只做pc端，那么靜態(tài)布局是最好的選擇;
2.如果做移動端，且設(shè)計對高度和元素間距要求不高，那么彈性布局(rem+js)是最好的選擇，一份css+一份js調(diào)節(jié)font-size搞定;
3.如果pc，移動要兼容，而且要求很高那么響應(yīng)式布局還是最好的選擇，這個時現(xiàn)在比較流行的方式。
