深入理解CSS中的rem以及行動端的佈局方法
相信大家對px已經很熟悉了，但提到rem有些人就不知道了。今天這篇文章主要介紹什麼是rem,em,以及他們在行動端中的佈局方法，有需要的可以參考一下，希望對你有幫助。
一、rem是什麼？
rem是css3中新增加的一個單位屬性(font size of the root element),根據頁面的根節點的字體大小進行轉變的單位。 root！ ！ ！ ！ ！ ！ ！ ！ ！根節點，也就是html。
範例：(下面範例中的根節點是html ，它的字體大小是100px，所以根節點下面的元素所設定的rem，都是1rem=100px。)
rem的初始值是16px，也就是說在沒有設定根節點的font-size的時候，1rem=16px
<html>
<head>
<style>
html,body{ font-size: 100px; }
header{ height: 1rem;width: 1rem; }
</style>
</head>
<body></body>
<header></header>
</html>二、em是什麼
##em也是相對單位，em單位是根據父元素的字體大小來進行轉變的單位。1、em的值並不是固定的；
2、em會繼承父級元素的字體大小。
範例：
<header style="font-size:100px;">//父元素的字体大小是100px
<div style="height:1em;width:1em;"></div>//所以子元素的em是1em=100px；
</header>三、行動裝置頁面開發技巧：
先調查使用者的使用情況，總結出大部分使用者使用的都是什麼設備。例如：我現在的用戶大多使用的是三種手機，我們先將每種手機的解析度都從網路上找出來。
設備名稱解析度估算字體大小rem與px轉換
iphone5 320568 font-size：12px；1rem=12px
iphone6 375667 font-size：14px；1rem=14px
##6 Plus 414iphone* 736 font-size：16px；1rem=16px
最開始的書寫可以根據設計圖紙來進行px的書寫（也就是先選擇好饅頭的大小）
優先寫出一套模版，然後基於這套模版去寫別的設備的媒體查詢
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
height - viewport裝置的高度
initial-scale - 初始的縮放比例
minimum-scale - 允許使用者縮放到的最小比例
maximum-scale - 允許使用者縮放到的最大比例
user-scalable - 用戶是否可以手動縮放
@media screen and (max-width:320px ) {
html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
html{font-size: 16px;}
}header{
width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}以上是深入理解CSS中的rem以及行動端的佈局方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
如何在Vue專案中使用行動端的手勢操作
Oct 08, 2023 pm 07:33 PM
如何在Vue專案中使用行動端的手勢操作隨著行動裝置的普及，越來越多的應用程式需要在行動端上提供更友善的互動體驗。而手勢操作是行動裝置上常見的互動方式之一，它能夠讓使用者透過觸控螢幕來完成各種操作，如滑動、縮放等。在Vue專案中，我們可以透過第三方函式庫來實現行動手勢操作，以下將介紹如何在Vue專案中使用手勢操作，並提供具體的程式碼範例。首先，我們需要引入一個專門用
解決Vue行動端多觸點問題
Jun 30, 2023 pm 01:06 PM
在行動裝置開發中，我們經常會遇到多手指觸控的問題。當使用者在行動裝置上使用多個手指滑動或縮放螢幕時，如何準確地識別和回應這些手勢是一個重要的開發難題。在Vue開發中，我們可以採取一些措施來解決行動端多手指觸控問題。一、使用vue-touch插件vue-touch是用於Vue的手勢插件，它可以方便地處理移動端的多手指觸控事件。我們可以透過npm安裝vue-to
REM(全名REMME)是什麼幣？
Feb 21, 2024 pm 05:00 PM
REMME是什麼幣？ REMME是一個基於區塊鏈技術的加密貨幣，致力於提供高度安全且去中心化的網路安全和身份驗證解決方案。此專案旨在利用分散式加密技術來增強和簡化使用者身份驗證流程，從而提升安全性和效率。 REMME的創新之處在於其借助區塊鏈的不可篡改性和透明性，為用戶提供了更可靠的身份驗證方式。透過將身份驗證資訊儲存在區塊鏈上，REMME消除了中心化身份驗證系統的單點故障，並降低了資料被盜或篡改的風險。這種基於區塊鏈的身份驗證方法不僅更安全可靠，而且還能夠為用戶REMME的背景在當前數位化時代，網絡
CSS佈局單位的演變與應用：從像素到根據根元素字體大小的相對單位
Jan 05, 2024 pm 05:41 PM
從px到rem：CSS佈局單位的演變與應用引言：在前端開發中，我們經常需要用到CSS來實現頁面佈局。在過去的幾年間，CSS佈局單位也經歷了演變和發展。最開始我們使用的是像素（px）作為單位來設定元素的大小和位置。然而，隨著響應式設計的興起和行動裝置的普及，像素單位逐漸暴露出一些問題。為了解決這些問題，新的單位rem應運而生，並逐漸廣泛應用於CSS佈局中。一
Vue開發中如何解決行動端雙擊放大問題
Jun 29, 2023 am 11:06 AM
隨著行動端設備的普及，使用Vue進行行動端開發已經成為了常見的選擇。然而，我們在行動端開發過程中常常會面臨一個問題，就是雙擊放大。本文將針對此問題，探討Vue開發中如何解決行動端雙擊放大的具體方法。行動端雙擊放大問題的出現，主要是因為行動裝置在觸控螢幕上進行雙擊操作時，會自動放大網頁的縮放比例。對於一般的網頁開發來說，這種雙擊放大通常是有好處的，因為它可以
Vue實現行動端響應式佈局的完整指南（Vant）
Jun 09, 2023 pm 04:09 PM
Vue實現行動端響應式佈局的完整指南（Vant）行動端響應式佈局是現代Web開發中非常重要的一環，隨著行動裝置的普及，如何快速響應用戶手機螢幕的大小和分辨率，成為了前端工程師必須面對的挑戰之一。 Vue框架自備響應式佈局的特性，同時也有不少第三方函式庫來幫助我們實現響應式佈局。其中，Vant元件庫是一款Vue行動裝置UI庫，因其十分強大、易用和客製化，並且完全符合移
使用Python和百度地圖API實現行動端地圖定位功能的方法
Jul 29, 2023 pm 11:33 PM
使用Python和百度地圖API實現行動端地圖定位功能的方法隨著行動網路的發展，地圖定位功能在行動裝置應用程式中變得越來越常見。 Python作為一種流行的程式語言，也可以透過使用百度地圖API來實現行動端地圖定位功能。以下將介紹使用Python和百度地圖API實作地圖定位功能的步驟，並提供對應的程式碼範例。步驟一：申請百度地圖API密鑰在開始之前，我們首先需要申請
Vue開發：優化行動裝置手勢縮放卡頓問題
Jun 30, 2023 pm 04:33 PM
Vue開發中如何解決行動端手勢縮放頁面卡頓問題近年來，行動端應用的普及使得手勢操作成為使用者互動的重要方式。在Vue開發中，實現行動端手勢縮放功能往往會遇到頁面卡頓的問題。本文將探討如何解決這個問題，並提供一些最佳化策略。在了解手勢縮放原則在解決問題之前，我們首先需要了解手勢縮放的原則。手勢縮放透過監聽觸控事件來實現，當使用者用兩個手指滑動螢幕時，頁面會按照手指的滑
