<progress id="nc499"><pre id="nc499"><rt id="nc499"></rt></pre></progress>

<dd id="nc499"><track id="nc499"><dl id="nc499"></dl></track></dd>
  • <nav id="nc499"></nav>

    <span id="nc499"></span>

    前端開發常見的幾種布局方式

    來源:尚硅谷 2021-04-07 18:43:39
    作為前端開發工程師,布局方式有多種,對于不同的場景可以使用不同的布局方式,但是很剛參加前端培訓的同學對于這些不是很了解,那么我們就先來簡單的來了解一下,那些前端開發必須了解的布局。

    1.靜態布局:

    靜態布局:給頁面元素設置固定的寬度和高度,單位用px,當窗口縮小,會出現滾動條,拉動滾動條顯示被遮擋內容。針對不同分辨率的手機端,分別寫不同的樣式文件。

    2.彈性布局:

    css3引入的,flex布局;優點在于其容易上手,根據flex規則很容易達到某個布局效果,然而缺點是:瀏覽器兼容性比較差,只能兼容到ie9及以上;

    前端培訓

    3.自適應布局:

    分別為不同的屏幕分辨率定義布局,在每個布局中,頁面元素不隨窗口大小的調整而發生變化,當窗口大小到達一定分辨率時變化一次。創建多個靜態布局,每個靜態布局對應一個屏幕分辨率范圍,使用@media媒體查詢技術。

    4.流式布局:

    元素的寬高用百分比做單位,元素寬高按屏幕分辨率調整,布局不發生變化。屏幕尺度跨度過大的情況下,頁面不能正常顯示。

    5.響應式布局:

    
    
    使用meta標簽設置,頁面元素寬度隨窗口調整自動適配。采用自適應布局和流式布局的綜合方式,為不同屏幕分辨率范圍創建流式布局。

    在我們參加前端培訓學習或者是做前端開發是做項目時要怎么區選擇布局方式。

    1.如果只做pc端,那么靜態布局是最好的選擇;

    2.如果做移動端,且設計對高度和元素間距要求不高,那么彈性布局(rem+js)是最好的選擇,一份css+一份js調節font-size搞定;

    3.如果pc,移動要兼容,而且要求很高那么響應式布局還是最好的選擇,這個時現在比較流行的方式。
    原文出處:http://www.atguigu.com/jsfx/9310.html
    版權聲明:本文來源地址若非本站均為轉載,若侵害到您的權利,請及時聯系我們,我們會在第一時間進行處理。