當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS之响应式布局

發布時間：2024/3/24 CSS 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS之响应式布局小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

設置***文字大小***的單位
- px：設置為固定的css像素
- em：相對于父元素字體的大小
- %：相對于父元素字體的大小
- rem：相對于根元素（html）的字體大小
設置***寬度***的單位
- px：設置為固定的css像素
- em:
  - 如果自身有font-size，em相對于自己的font-size
  - 如果自身沒有font-size，em相對于父元素的font-size
- %：相對于父元素的寬度大小
- rem：相對于根元素（html）的字體大小
總結：**rem單位永遠相相對于根元素（html）的字體大小
- html {font-size: 12px; }div {font-size: 2rem; /* 24px */width: 5rem; /* 60px */background-color: skyblue; }

媒體查詢（Media Query）是CSS3新語法。
- 使用 @media 查詢，可以針對不同的媒體類型定義不同的樣式
- @media 可以針對不同的屏幕尺寸設置不同的樣式
- 使用@media才能夠實現頁面響應式布局
媒體查詢語法規范：
- @media mediatype and|not|only (media feature) {CSS-Code;}
- 媒體類型：all(所有設備)、screen(用于電腦屏幕，平板電腦，智能手機等。)
- media feature：
  - width(瀏覽器的窗口尺寸，可加min/max)
  - device-width(設備的參數尺寸，可加min/max)
min-width和max-width
- min-width：最小寬度，在媒體查詢中，寬度大于或者等于最小寬度時，就觸發其CSS樣式
- max-width：最大寬度，在媒體查詢中，寬度小于或者等于最大寬度時，就觸發其CSS樣式

媒體查詢一般寫四套設備方案，在編寫媒體查詢時注意順序(從小到大)，后者符合條件的媒體查詢會覆蓋前者

媒體查詢 + rem實現元素動態大小變化
- rem單位是相對于html元素的字體大小的，我們可以將元素所有的css單位都設置為rem單位
- 通過媒體查詢，可以根據不同的屏幕寬度設置不同的HTML元素的字體大小，以此達到頁面元素大小的動態變化
引入媒體查詢的css文件資源
- 針對于不同的屏幕尺寸 調用不同的css文件
<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 400px)">

核心：使用媒體查詢根據不同設備按比例設置***html的字體大小***，然后頁面元素使用***rem做尺寸單位***
- 當html字體大小變化。元素尺寸也會發生變化，從而達到等比縮放的適配
rem適配方案***流程***：
按照設計稿與設備寬度的比例，動***態計算并設置 html*** 根標簽的 font-size 大小；（媒體查詢)
CSS 中，設計稿元素的寬、高、相對位置等取值，按照同等比例換算為 rem 為單位的值
rem適配方案的技術選擇
核心：rem + 媒體查詢 + less 技術
動態設置 html 標簽 font-size 大小

① 假設設備寬度是750px

② 假設我們把整個屏幕劃分為15等份（劃分標準不一可以是20份也可以是10等份）

③ 每一份作為html字體大小，這里就是50px

④ 那么在320px設備的時候，html元素的字體大小為320/15 就是 21.33px

⑤ 用我們頁面元素的大小除以不同的 html 字體大小會發現他們比例還是相同的

⑥ 但是已經能實現不同屏幕下頁面元素盒子等比例縮放的效果
元素中的***rem單位***取值
- 公式：頁面元素的rem值 = 頁面元素值（px） / html font-size 字體大小

以上是生活随笔為你收集整理的CSS之响应式布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。