每個高階前端工程師都應該知道的前端佈局

發表於2023-09-21
前端工程師
首發於公眾號 大遷世界，歡迎關注。? 每週一篇實用的前端文章 ?️ 分享值得關注的開發工具 ? 分享個人創業過程中的趣事

快來免費體驗ChatGpt plus版本的，我們出的錢 體驗地址:https://chat.waixingyun.cn可以加入網站底部技術群，一起找bug，...

1.響應式

一套適用於手機、iPad 和 PC 的程式碼。每次載入不同的樣式時，它們都能在一個專案中相容。這就是所謂的響應性。然後，我希望產品經理能多考慮一下。我不想做了設計工作，最後卻說它不好看，因為我不會做設計。

2.自適應

自適應是一套程式碼，無論螢幕尺寸如何變化，改變的只是頁面的元素尺寸，而不會出現三欄變兩欄的表格變化。以前，領導和設計總讓我修改頁面，說是自適應視窗的變化。結果要求把三欄改成兩欄。為什麼要把這個按鈕隱藏起來，那個按鈕改成外觀，怎麼改呢？難道不需要設計一張圖片嗎？我是不是在幻想？

  • 使用彈性佈局
  • 使用百分比
  • 避免寫死寬度和高度
  • 新增捲軸
  • 使用 rem

3.移動終端的常用寬度和高度

image.png

  • 垂直螢幕的常見寬高比：1:2, 2:3, 3:4, 3:5, 5:8, 9:16
  • 橫向螢幕的常見寬高比：4:3, 5:3

智慧手機螢幕尺寸和解析度列表

image.png

4.常見佈局

4.1 百分比佈局

  • 當改變視窗的高度和寬度時，透過給出 height, width, padding, border, 和 margin 等屬性，它們都依賴於父元件的寬度和高度（margin 和 padding 都可以使用百分比值的形式，但這與通常的想法有點不同，不同之處在於 margin-top, margin-bottom, padding-top, and padding-bottom 的百分比值不是指容器的高度，而是指父容器的寬度）。
  • 如果為子元素的頂部和底部設定了百分比，它將相對於父元素的高度，並直接進行非靜態定位（預設定位）。同樣，如果為子元素的左側和右側設定了百分比，它將與父元素寬度的直接非靜態定位（預設定位）相對應。
  • 如果子元素的 padding 和 margin 設定為百分比，無論是垂直還是水平，它們都是相對於直接父元素的寬度而言的，與父元素的高度無關。 border-radius 是一個百分比，是相對於其寬度而言的

缺點計算困難。如果我們要根據設計草案定義元素的寬度和高度，必須將其轉換為百分比單位。

4.2 媒體查詢佈局

使用 @media 媒體查詢，我們可以針對不同的螢幕尺寸編寫不同的樣式，從而實現響應式佈局。

響應式的缺點：如果有太多的樣式需要在瀏覽器尺寸發生變化時進行更改，那麼多套樣式程式碼將非常麻煩。

@media mediatype and not only (media feature) { css-code; }

<link rel="stylesheet" media="mediatype and not only (media feature)" href"mystylesheet.css"
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">

@media screen and (max-device-width:960px){
  body{background:red;}
}

常用響應斷點閾值設定

image.png

4.3 Rem responsive 佈局

rem 通常用於適應移動終端，頁面根據視口分為 10 個部分。

例如，現在有 5 個大小相同的螢幕（750 640 480 375 320），所有螢幕的總寬度被劃分為 10rem.

然後，我們需要獲取與這些不同螢幕相對應的 html 根元素的字型大小。

image.png

flexible.js 外掛還可以解決以下問題

em 和 rem 與之類似，它們都根據 font-size 來縮放頁面佈局，但 em 主要取決於直接父級標籤 font-size 的大小，並且只會查詢最近的父級標籤，而不會直接依賴於整個 html 根標籤。

4.4 VW、VH 響應式佈局

因為 100vw = 100 檢視視窗寬度，100vh = 100 檢視視窗高度，那麼根據 750 的設計草案，100vw 就是 750。那麼 1vw 就是 7.5px

image.png

4.5 Flex 彈性佈局

flex-direction, flex-wrap, justify-content, align-items

align-content: order, flex-grow, flex-shrink, flex-basis, align-self

4.6 雙翼佈局

左右兩列的寬度是恆定的，中間一列的寬度則根據瀏覽器視窗的大小自適應調整。

4.7 聖盃佈局

與雙飛翼佈局一樣，左右兩欄的寬度是恆定的，中間一欄的寬度根據瀏覽器視窗的大小自適應，但它更加完整。

交流

首發於公眾號 大遷世界，歡迎關注。? 每週一篇實用的前端文章 ?️ 分享值得關注的開發工具 ❓ 有疑問？我來回答

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章