6月iOS設(shè)備性能榜：M2穩(wěn)居榜首 A系列只能等一手3nm來救
沒有新品發(fā)布，自然iOS設(shè)備性能榜的上榜設(shè)備就沒有什么更替，僅僅只有跑分變化而產(chǎn)生的排名變動，畢竟蘋果新品的發(fā)布節(jié)奏就是這樣的，一年下來也就幾個移動端新品，不會像安卓廠商，一
Hello，大家好，我是 Sunday。
響應(yīng)式適配是日常開發(fā)中非常常見的問題，所以在面試中可能會被經(jīng)常問到。但是很多同學卻沒有專門了解過這方面的知識，導致被問到這方面問題的時候，回答并不盡如人意。
所以，今天咱們就把整個響應(yīng)式適配的問題、方案 好好梳理一遍，徹底幫助大家解決這個問題。
屏幕上顯示的所有內(nèi)容都由像素組成。但是，不同的手機屏幕在 大小、方向、縮放級別和像素上都不相同。比如：Iphone15 和 Iphone15Plus。
圖片
所以，這就會導致在一個屏幕上看起來完美的布局在另一個屏幕上可能會 “破板”。
假設(shè)：一個寬度為 600px 的 div，在設(shè)計中它應(yīng)該占據(jù)屏幕的一半。但是當你遇到不同的 屏幕 時（4K、1080P、或者 手機）那么這固定的 600px 是無法占據(jù)整個屏幕一半的寬度的。
那么這就會導致咱們剛才所說的 “破板” 問題，因此我們不應(yīng)該使用 px 作為尺寸單位。
為此 css 提供了很多的尺寸單位來代替 px，如：rem、em、vh、vw...
所以接下來咱們就分別來看看這些尺寸單位代表的都是什么意思，以及應(yīng)用場景
在響應(yīng)式的開發(fā)中，更加推薦使用 rem 而 非em，原因如下：
在日常開發(fā)中，我們可以直接通過如下代碼來控制 html 根標簽 fontsize 動態(tài)變化：
/** * 初始化 rem 基準值，最大為 40px */export const useREM = () => { // 定義最大的 fontSize const MAX_FONT_SIZE = 40 // 監(jiān)聽 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 。表示基于視口的最小和最大尺寸。
百分比 永遠相對于父元素 的大小的。它允許相對于父元素的大小定義大小、邊距、填充和其他屬性，而不是固定的。因此，所有的 百分比（%） 都會帶來 復合效應(yīng)（即由于嵌套關(guān)系，大小會被動的根據(jù)祖先元素增大或減小） 問題
.container { width: 50%; /* 容器將占據(jù)其父容器寬度的50% */}.background-element { background-position: 50% 50%; /* 將背景圖像置于中心 */}關(guān)于尺寸單位的處理有很多的方式，以下是很多公司最常見的一種處理方式：
本文鏈接：http://m.www897cc.com/showinfo-26-84463-0.html針對尺寸單位，為什么不應(yīng)該使用 px 作為尺寸單位？以及最佳實踐！
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請聯(lián)系：2376512515@qq.com 津ICP備18001702號
津公網(wǎng)安備 12010102000574號