深入理解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>三、移动端页面开发技巧：
先调查用户的使用情况，总结出大部分用户使用的都是什么设备。
比如：我现在的用户大多使用的是三种手机，我们先将每种手机的分辨率都从网上找出来。
将他们都罗列出来，然后去写媒体查询（因为不同手机分辨率不同，所以用像素的话，会出现显示的相同，举个栗子~ 比如说小朋友吃饭，食堂给小朋友的标配是一个馒头，可是有的小朋友饭量大，有的饭量小，所以会出现不够吃或者吃不了造成浪费。怎么避免这种情况呢，所以食堂大妈想了一个主意体重在50斤~60斤的小盆友可以领取到一个馒头，低于50斤的半个馒头，体重大于60斤的，两个馒头，这三种分配方式。）
我的用户群体大概是这三种设备
设备名称 分辨率 估算字体大小 rem与px转换
iphone5 320568 font-size：12px； 1rem=12px
iphone6 375667 font-size：14px； 1rem=14px
iphone6 Plus 414*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">
width - viewport设备的宽度
height - viewport设备的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
上面分配好了，按照这种方式写媒体查询
html,body{ height: 100%; margin: 0; padding: 0; font-size: 14px;}//注意初始样式必须写在最顶部！！！！如果写在媒体查询底部的话就会覆盖上方的媒体查询（因为是层叠样式表嘛~）
@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;}
}因为上面写好了一套初始模版，因为初始模版都是px的，在文章的开端我们就强调了为什么不能用px了，所以我们要将页面中的px转换成相应的rem值
例：
header{
width:140px;//转化为10rem，因为我们是基于最中间的设备做的，中间设备的font-size：14px，所以140px=10rem。
}所有用px的高宽全部改成rem这样就完成了，对三种设备的适配。
Atas ialah kandungan terperinci 深入理解CSS中的rem以及移动端的布局方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1385
52
Cara menggunakan operasi gerak isyarat mudah alih dalam projek Vue
Oct 08, 2023 pm 07:33 PM
Cara menggunakan operasi gerak isyarat mudah alih dalam projek Vue Dengan populariti peranti mudah alih, semakin banyak aplikasi perlu menyediakan pengalaman interaktif yang lebih mesra pada terminal mudah alih. Operasi gerak isyarat ialah salah satu kaedah interaksi biasa pada peranti mudah alih, yang membolehkan pengguna menyelesaikan pelbagai operasi dengan menyentuh skrin, seperti meluncur, mengezum, dsb. Dalam projek Vue, kami boleh melaksanakan operasi gerak isyarat mudah alih melalui pustaka pihak ketiga Perkara berikut akan memperkenalkan cara menggunakan operasi gerak isyarat dalam projek Vue dan memberikan contoh kod khusus. Pertama, kita perlu memperkenalkan yang istimewa
Selesaikan masalah titik berbilang sentuhan pada terminal mudah alih Vue
Jun 30, 2023 pm 01:06 PM
Dalam pembangunan mudah alih, kita sering menghadapi masalah sentuhan berbilang jari. Apabila pengguna menggunakan berbilang jari untuk meleret atau mengezum skrin pada peranti mudah alih, cara mengecam dan bertindak balas terhadap gerak isyarat ini dengan tepat ialah cabaran pembangunan yang penting. Dalam pembangunan Vue, kami boleh mengambil beberapa langkah untuk menyelesaikan masalah sentuhan berbilang jari pada terminal mudah alih. 1. Gunakan pemalam vue-touch vue-touch ialah pemalam gerak isyarat untuk Vue, yang boleh mengendalikan acara sentuhan berbilang jari dengan mudah pada bahagian mudah alih. Kami boleh memasang vue-to melalui npm
Apakah REM (nama penuh REMME)?
Feb 21, 2024 pm 05:00 PM
Apakah syiling REMME? REMME ialah mata wang kripto berasaskan teknologi blockchain khusus untuk menyediakan penyelesaian keselamatan dan pengesahan identiti rangkaian yang sangat selamat dan terdesentralisasi. Projek ini bertujuan untuk menggunakan teknologi penyulitan yang diedarkan untuk meningkatkan dan memudahkan proses pengesahan pengguna, dengan itu meningkatkan keselamatan dan kecekapan. Inovasi REMME ialah ia menggunakan kebolehubahan dan ketelusan rantaian blok untuk menyediakan pengguna kaedah pengesahan identiti yang lebih dipercayai. Dengan menyimpan maklumat pengesahan pada rantaian blok, REMME menghapuskan satu-satunya titik kegagalan sistem pengesahan berpusat dan mengurangkan risiko kecurian data atau gangguan. Kaedah pengesahan berasaskan blokchain ini bukan sahaja lebih selamat dan boleh dipercayai, tetapi juga menyediakan pengguna dengan latar belakang REMME Dalam era digital semasa, rangkaian
Evolusi dan aplikasi unit susun atur CSS: daripada piksel kepada unit relatif berdasarkan saiz fon elemen akar
Jan 05, 2024 pm 05:41 PM
Dari px ke rem: Evolusi dan aplikasi unit susun atur CSS Pengenalan: Dalam pembangunan bahagian hadapan, kita selalunya perlu menggunakan CSS untuk melaksanakan reka letak halaman. Sejak beberapa tahun kebelakangan ini, unit susun atur CSS telah berkembang dan berkembang. Pada mulanya kami menggunakan piksel (px) sebagai unit untuk menetapkan saiz dan kedudukan elemen. Walau bagaimanapun, dengan peningkatan reka bentuk responsif dan populariti peranti mudah alih, unit piksel telah mendedahkan beberapa masalah secara beransur-ansur. Untuk menyelesaikan masalah ini, rem unit baharu wujud dan secara beransur-ansur digunakan secara meluas dalam reka letak CSS. satu
Bagaimana untuk menyelesaikan masalah penguatan klik dua kali pada terminal mudah alih dalam pembangunan Vue
Jun 29, 2023 am 11:06 AM
Dengan populariti peranti mudah alih, menggunakan Vue untuk pembangunan mudah alih telah menjadi pilihan biasa. Walau bagaimanapun, kami sering menghadapi masalah semasa pembangunan mudah alih, iaitu klik dua kali untuk membesarkan. Artikel ini akan menumpukan pada masalah ini dan membincangkan cara menyelesaikan kaedah khusus penguatan klik dua kali pada terminal mudah alih dalam pembangunan Vue. Masalah penguatan klik dua kali pada peranti mudah alih berlaku terutamanya kerana peranti mudah alih secara automatik membesarkan nisbah zum halaman web apabila mengklik dua kali pada skrin sentuh. Untuk pembangunan web umum, klik dua kali ini untuk membesarkan biasanya bermanfaat kerana ia boleh
Panduan lengkap untuk melaksanakan reka letak responsif mudah alih dalam Vue (Vant)
Jun 09, 2023 pm 04:09 PM
Panduan Lengkap untuk Melaksanakan Reka Letak Mudah Alih Responsif dalam Vue (Vant) Reka letak responsif mudah alih adalah bahagian yang sangat penting dalam pembangunan web moden Dengan populariti peranti mudah alih, cara untuk bertindak balas dengan cepat terhadap saiz dan resolusi skrin telefon mudah alih pengguna telah menjadi a Salah satu cabaran yang perlu dihadapi oleh jurutera hadapan. Rangka kerja Vue dilengkapi dengan ciri susun atur responsif, dan terdapat juga banyak perpustakaan pihak ketiga untuk membantu kami melaksanakan reka letak responsif. Antaranya, perpustakaan komponen Vant ialah perpustakaan UI mudah alih Vue kerana ia sangat berkuasa, mudah digunakan dan disesuaikan serta serasi sepenuhnya dengan peranti mudah alih.
Bagaimana untuk melaksanakan fungsi penentududukan peta mudah alih menggunakan Python dan API Peta Baidu
Jul 29, 2023 pm 11:33 PM
Kaedah melaksanakan fungsi penentududukan peta mudah alih menggunakan Python dan API Peta Baidu Dengan pembangunan Internet mudah alih, fungsi penentududukan peta telah menjadi lebih biasa dalam aplikasi mudah alih. Python, sebagai bahasa pengaturcaraan yang popular, juga boleh melaksanakan fungsi penentududukan peta mudah alih dengan menggunakan API Peta Baidu. Berikut akan memperkenalkan langkah-langkah untuk melaksanakan fungsi penentududukan peta menggunakan Python dan API Peta Baidu, dan memberikan contoh kod yang sepadan. Langkah 1: Mohon Kunci API Peta Baidu Sebelum memulakan, kami perlu memohon terlebih dahulu
Cara mengendalikan reka bentuk mudah alih dan responsif dalam bentuk PHP
Aug 10, 2023 am 11:51 AM
Cara menangani reka bentuk mudah alih dan responsif dalam bentuk PHP Dengan populariti dan kekerapan peranti mudah alih yang semakin meningkat, dan semakin ramai pengguna menggunakan peranti mudah alih untuk mengakses tapak web, menyesuaikan diri dengan mudah alih telah menjadi isu penting. Apabila berurusan dengan borang PHP, kita perlu mempertimbangkan cara untuk mencapai antara muka mesra mudah alih dan reka bentuk responsif. Artikel ini menerangkan cara mengendalikan reka bentuk mudah alih dan responsif dalam bentuk PHP dan menyediakan contoh kod. 1. Borang responsif menggunakan HTML5 HTML5 menyediakan beberapa ciri baharu yang boleh melaksanakan borang responsif dengan mudah.
