整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
用方案
1、設置根 font-size：625%（或其它自定的值，但換算規則 1rem 不能小于 12px）
2、通過媒體查詢分別設置每個屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可換算為 rem
優：有一定適用性，換算也較為簡單。
劣：有兼容性的坑，對不同手機適配不是非常精準；需要設置多個媒體查詢來適應不同手機，單某款手機尺寸不在設置范圍之內，會導致無法適配。
網易方案
1、拿到設計稿除以 100，得到寬度 rem 值
2、通過給 html 的 style 設置 font-size，把 1 里面得到的寬度 rem 值代入x document.documentElement.style.fontSize =document.documentElement.clientWidth / x + ‘px‘;
3、設計稿 px/100 即可換算為 rem
優：通過動態根 font-size 來做適配，基本無兼容性問題，適配較為精準，換算簡便。
劣：無 viewport 縮放，且針對 iPhone 的 Retina 屏沒有做適配，導致對一些手機的適配不是很到位。
手淘方案
1、拿到設計稿除以 10，得到 font-size 基準值
2、引入 flexible
3、不要設置 meta 的 viewport 縮放值
4、設計稿 px/ font-size 基準值，即可換算為 rem
優：通過動態根 font-size、viewpor、dpr 來做適配，無兼容性問題，適配精準。
劣：需要根據設計稿進行基準值換算，在不使用 sublime text 編輯器插件開發時，單位計算復雜。
em 適配方法是一種常用的響應式布局方法，它通過使用 rem 單位來設計頁面布局，使得當屏幕大小變化時，頁面布局能夠自適應調整。
要計算 HTML 根字號及適配方案，可以按照以下步驟進行:
1.確定根字號：根字號是指頁面上第一個非標題元素的寬度，通常是一個固定的數字，例如 100 或 200?？梢酝ㄟ^調試和觀察頁面布局來確定根字號。
2.計算布局寬度：通過使用 width: 100%; 來設置根元素的寬度，使其占據整個頁面的寬度。
3.確定適配方案：根據根字號和屏幕大小，可以選擇不同的適配方案。例如，當屏幕寬度小于等于 750px 時，可以使用 100% 寬度的根元素;當屏幕寬度大于 750px 時，可以使用 750px 寬度的根元素。
4.編寫 CSS 樣式：根據適配方案，編寫相應的 CSS 樣式，控制根元素的寬度和布局。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 確定根字號 */
body {
font-size: 16px;
}
/* 計算布局寬度 */
@media screen and (max-width: 750px) {
body {
font-size: 100px;
width: 100%;
}
}
/* 適配方案：當屏幕寬度大于 750px 時，使用 750px 寬度的根元素 */
@media screen and (min-width: 751px) {
body {
font-size: 75px;
width: 750px;
}
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
在上面的代碼中，@media 查詢被用來根據屏幕大小來選擇不同的適配方案。當屏幕寬度小于等于 750px 時，使用 100% 寬度的根元素;當屏幕寬度大于 750px 時，使用 750px 寬度的根元素。同時，body 元素的 font-size 被定義為 16px，作為根元素的參考大小。
需要注意的是，rem 適配方法只適用于文本內容為主的頁面，對于圖片、圖標等非文本元素，應該根據實際情況選擇不同的適配方案。
1、設置根 font-size：625%（或其它自定的值，但換算規則 1rem 不能小于 12px）
2、通過媒體查詢分別設置每個屏幕的根 font-size
3、CSS 直接除以 2 再除以 100 即可換算為 rem
優：有一定適用性，換算也較為簡單
劣：有兼容性的坑，對不同手機適配不是非常精準；需要設置多個媒體查詢來適應不同手機，單某款手機尺寸不在設置范圍之內，會導致無法適配
#挑戰30天在頭條寫日記#
以往的頁面布局中，可能我們使用像素（px）這個長度單位是最多的。但是隨著Web技術的發展，出現了移動端頁面，因此需要找尋既適應PC端又需要在移動端完美展示的解決方案，這樣對于網頁的設計就有了更高的要求，于是響應式布局也出現了，它的出現使得我們設計的網頁可以適配多種設備，例如：電腦、手機、平板等等。如果沒有合理的使用長度單位，那么不同設備之間的展示效果會完全不一樣，甚至可能會造成頁面錯亂，所以，也深入的了解了一下相關的長度單位在頁面中的作用，在這里做了一下總結。
首先，我從這次的學習中了解到CSS單位中的長度單位分為：
具體情況如下：
CSS長度單位
下面，我根據我學到的內容，我梳理了一下重點的幾個知識點（px，em，rem，vw，vh），現在給大家分享一下。
常用的一些CSS長度單位：
了解上述的基本單位，下面是我學習中的寫的一些demo，我把效果分享給大家看看。
html結構如下：
<div>
Hello World!
<br>
<span>你好，世界！</span>
</div>css如下：
div {
font-size: 16px;
}
div span {
font-size: 24px;
}div內的元素設置了字體大小為16px，span里的字體設置了24px，span標簽的樣式把父級的div字號大小給覆蓋了。從這個案例我們也可以得出一個結論：字號是可以從父級繼承的。
通常在瀏覽器中，瀏覽器的默認字體大小為16px，即：1em = 16px，那么，根據該值，可以推算出0.75em = 12px，0.625em = 10px。
html結構如下：
<h2>Hello World!
<br>
<span>PHP是世界上最好的語言！</span>
</h2>css如下：
<style>
html {
font-size: 1.25em;
}
h2 {
font-size: 1.5rem;
}
h2 span {
font-size: 1rem;
}
</style>html根元素字號
上面的案例設置了html根元素的字號大小為1.25em，此時可以換算出當前情況下1em的實際大小為：1.25em * 16 = 20px，因此，1em = 20px，從上面的圖例中的控制臺里也可以看到，確實是20px，那么h2字號的大小應該是：1.5 * 20 = 30px，效果如圖：
1.25em
h2下的span標簽的字號大小應該是1em * 20 = 20px。
1em
當前在html根元素設置了字號（font-size），可以看做是一個固定值，它后面的所有子元素如果想用html的字號，就沒有辦法再使用em了，因為em它是可以被繼承的，從MDN上我們也可以了解到，它的子元素的字體大小是相對于父級元素而言的，此時我們可以使用一個新的屬性來來使用html根元素的字號值，這個屬性即：rem。
同樣，我們還是先設置一個根元素的字號，現有如下的html結構：
<div>
Hello World!
<br>
<span>你好，世界！</span>
</div>css如下：
<style>
html {
font-size: 0.75em;
}
div {
font-size: 2rem;
}
div span {
font-size: 3rem;
}
</style>在前面，我們已經知道了，瀏覽器的默認字體大小是16px，此時聲明了根元素的font-size為0.75em，那么0.75 * 16 = 12px，此時1em = 12px = 1rem，設置完根元素的字號之后，后面的字體就可以直接使用rem即可。
根據上面的div字號大小，我們可以知道“Hello World”的字號大小為：2rem * 12 = 24px，效果圖如下：
“Hello World”的字號大小
那么，span內部的字號大小為：3rem * 12 = 36px，效果圖如下：
span內部的字號大小
由這個案例就可以知道，rem的字號大小都是相對于根元素(html)的。
同時，還有一點需要注意的是，在使用邊框(border)屬性時，不要用rem/em，一定要用px，否則邊框的大小也會隨著根元素字號的改變而變粗或變細。
以上就是我學習em/rem/vh/vw這些知識當中的案例，搞清楚這些屬性的區別，對于以后學習響應式布局，會方便很多。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
