Hello,大家好,我是 Sunday。
響應式適配是日常開發中非常常見的問題,所以在面試中可能會被經常問到。但是很多同學卻沒有專門了解過這方面的知識,導致被問到這方面問題的時候,回答并不盡如人意。
所以,今天咱們就把整個響應式適配的問題、方案 好好梳理一遍,徹底幫助大家解決這個問題。
屏幕上顯示的所有內容都由像素組成。但是,不同的手機屏幕在 大小、方向、縮放級別和像素上都不相同。比如:Iphone15 和 Iphone15Plus。
圖片
所以,這就會導致在一個屏幕上看起來完美的布局在另一個屏幕上可能會 “破板”。
假設:一個寬度為 600px 的 div,在設計中它應該占據屏幕的一半。但是當你遇到不同的 屏幕 時(4K、1080P、或者 手機)那么這固定的 600px 是無法占據整個屏幕一半的寬度的。
那么這就會導致咱們剛才所說的 “破板” 問題,因此我們不應該使用 px 作為尺寸單位。
為此 css 提供了很多的尺寸單位來代替 px,如:rem、em、vh、vw...
所以接下來咱們就分別來看看這些尺寸單位代表的都是什么意思,以及應用場景
在響應式的開發中,更加推薦使用 rem 而 非em,原因如下:
在日常開發中,我們可以直接通過如下代碼來控制 html 根標簽 fontsize 動態變化:
/** * 初始化 rem 基準值,最大為 40px */export const useREM = () => { // 定義最大的 fontSize const MAX_FONT_SIZE = 40 // 監聽 html 文檔被解析完成的事件 document.addEventListener('DOMContentLoaded', () => { // 獲取 html 標簽 const html = document.querySelector('html') // 獲取根元素 fontSize 標準,屏幕寬度 / 10。(以 Iphone 為例 Iphone 6 屏幕寬度為 375,則標準 fontSize 為 37.5) let fontSize = window.innerWidth / 10 // 獲取到的 fontSize 不允許超過我們定義的最大值 fontSize = fontSize > MAX_FONT_SIZE ? MAX_FONT_SIZE : fontSize // 定義根元素(html)fontSize 的大小 (rem) html.style.fontSize = fontSize + 'px' })}
視口單位(ViewProt)表示用戶瀏覽器窗口的大小。它有兩個常用的尺寸單位:
除此之外,還有兩個標記單位:vmin 和 vmax 。表示基于視口的最小和最大尺寸。
百分比 永遠相對于父元素 的大小的。它允許相對于父元素的大小定義大小、邊距、填充和其他屬性,而不是固定的。因此,所有的 百分比(%) 都會帶來 復合效應(即由于嵌套關系,大小會被動的根據祖先元素增大或減?。?問題
.container { width: 50%; /* 容器將占據其父容器寬度的50% */}.background-element { background-position: 50% 50%; /* 將背景圖像置于中心 */}
關于尺寸單位的處理有很多的方式,以下是很多公司最常見的一種處理方式:
本文鏈接:http://www.tebozhan.com/showinfo-26-84463-0.html針對尺寸單位,為什么不應該使用 px 作為尺寸單位?以及最佳實踐!
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com