MIX Fold3包裝盒泄露 新機本月登場
小米的全新折疊屏旗艦MIX Fold3將于本月發布，近日該機的真機包裝盒在網上泄露。從圖上來看，新的MIX Fold3包裝盒在外觀設計方面延續了之前的方案，變化不大，這也是目前小米旗艦
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
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號