rem绝对自适应方案解析
rem
css3新增的rem是现在非常受欢迎的单位。看一下MDN上的说明：
这个单位代表根元素的
font-size大小（例如<html>元素的font-size）。
使用这个单位可以创建完美的可扩展布局，只需根据页面大小去修改html的font-size，就能达到适配整个页面的目的。那么问题来了，如何使html的font-size自适应呢？
媒体查询
media的用法这里就不赘述，简单说明通过媒体查询修改html的font-size以达到页面自适应的目的。
html如下：
<article class="container">
<ol>
<li>rem是相对于root元素(html)字体大小的一个单位。 eg:html默认font-size为16px 则1rem = 16px</li>
<li>若元素以rem为单位去设置字体、宽高、边距等。则修改html字体大小就能达到所有元素一起等比例修改的效果</li>
<li>所以要实现html字体在不同页面大小下自适应</li>
</ol>
</article>css如下：
//媒体查询控制html字体大小
@media (max-width:767px) {
html{
font-size: 14px;
}
}
@media (min-width:768px) {
html{
font-size: 16px;
}
}
@media (min-width:992px) {
html{
font-size: 20px;
}
}
//页面元素的简单样式
.container{
padding: 1rem;
}
li{
font-size: 1rem;
}通过媒体查询，在不同大小区间的页面上，设置html的font-size都不一样；
页面宽度为700px时，html的字体大小为14px，此时 1rem = 14px ，li元素的字体大小就是14px，包裹的内边距也是14px；改变页面宽度为800px，html的字体大小为16px，此时 1rem = 16px ，li元素的字体大小变为16px，包裹的内边距也变为16px；
这种方式当然媒体查询划分的越细致，自适应越强，但是无法实现完全自适应，只是区间性的。
vw
vw代表的视口的 1/100 100vw代表的即是视口的宽度。使用它我们就可以实现html的font-size完全自适应了。
css如下：
html{
font-size: calc(16/768*100vw); //以768时16px为标准进行缩放
}例子的768px为一个假设的标准值，一般设计稿的大小为标准，然后再进行适配。调节页面大小，可以完全自适应。
JS调整
加载页面和调整窗口大小的时，设置html的字体大小，已达到自适应的目的。
(function(){
var doc = document.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
function changeFontSize(){
var clietWidth = doc.offsetWidth,
scale = clietWidth/768; //以768为标准
doc.style.fontSize = scale * 16 + 'px'; }
if (!doc.addEventListener) return;
window.addEventListener(resizeEvt,changeFontSize) //窗口大小变化或者手机横屏
document.addEventListener('DOMContentLoaded',changeFontSize) //加载页面触发
})()1、获取视口宽度
2、以视口宽度对标准的变化，设置html的font-size
Atas ialah kandungan terperinci 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
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
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
1657
14
1415
52
1309
25
1257
29
1231
24
Menyelam mendalam tentang maksud dan penggunaan kod status HTTP 460
Feb 18, 2024 pm 08:29 PM
Analisis mendalam tentang peranan dan senario aplikasi kod status HTTP 460 Kod status HTTP adalah bahagian yang sangat penting dalam pembangunan web dan digunakan untuk menunjukkan status komunikasi antara klien dan pelayan. Antaranya, kod status HTTP 460 ialah kod status yang agak istimewa Artikel ini akan menganalisis secara mendalam peranan dan senario aplikasinya. Definisi kod status HTTP 460 Takrif khusus kod status HTTP 460 ialah "ClientClosedRequest", yang bermaksud bahawa klien menutup permintaan. Kod status ini digunakan terutamanya untuk menunjukkan
iBatis dan MyBatis: Analisis Perbandingan dan Kelebihan
Feb 18, 2024 pm 01:53 PM
iBatis dan MyBatis: Analisis Perbezaan dan Kelebihan Pengenalan: Dalam pembangunan Java, ketekunan adalah keperluan biasa, dan iBatis dan MyBatis ialah dua rangka kerja kegigihan yang digunakan secara meluas. Walaupun mereka mempunyai banyak persamaan, terdapat juga beberapa perbezaan dan kelebihan utama. Artikel ini akan memberikan pembaca pemahaman yang lebih komprehensif melalui analisis terperinci tentang ciri, penggunaan dan kod sampel kedua-dua rangka kerja ini. 1. Ciri iBatis: iBatis ialah rangka kerja kegigihan yang lebih lama yang menggunakan fail pemetaan SQL.
Penjelasan terperinci tentang ralat Oracle 3114: Cara menyelesaikannya dengan cepat
Mar 08, 2024 pm 02:42 PM
Penjelasan terperinci tentang ralat Oracle 3114: Bagaimana untuk menyelesaikannya dengan cepat, contoh kod khusus diperlukan Semasa pembangunan dan pengurusan pangkalan data Oracle, kami sering menghadapi pelbagai ralat, antaranya ralat 3114 adalah masalah yang agak biasa. Ralat 3114 biasanya menunjukkan masalah dengan sambungan pangkalan data, yang mungkin disebabkan oleh kegagalan rangkaian, pemberhentian perkhidmatan pangkalan data atau tetapan rentetan sambungan yang salah. Artikel ini akan menerangkan secara terperinci punca ralat 3114 dan cara menyelesaikan masalah ini dengan cepat, dan melampirkan kod tertentu
Parsing Wormhole NTT: rangka kerja terbuka untuk sebarang Token
Mar 05, 2024 pm 12:46 PM
Wormhole ialah peneraju dalam kebolehkendalian blockchain, memfokuskan pada mencipta sistem terdesentralisasi yang berdaya tahan, kalis masa hadapan yang mengutamakan pemilikan, kawalan dan inovasi tanpa kebenaran. Asas visi ini ialah komitmen terhadap kepakaran teknikal, prinsip etika dan penjajaran komuniti untuk mentakrifkan semula landskap kebolehoperasian dengan kesederhanaan, kejelasan dan rangkaian luas penyelesaian berbilang rantaian. Dengan peningkatan bukti pengetahuan sifar, penyelesaian penskalaan dan piawaian token yang kaya dengan ciri, rantaian blok menjadi lebih berkuasa dan kesalingoperasian menjadi semakin penting. Dalam persekitaran aplikasi yang inovatif ini, sistem tadbir urus baharu dan keupayaan praktikal membawa peluang yang belum pernah berlaku sebelum ini kepada aset merentas rangkaian. Pembina protokol kini bergelut dengan cara untuk beroperasi dalam pelbagai rantaian yang muncul ini
Analisis makna dan penggunaan titik tengah dalam PHP
Mar 27, 2024 pm 08:57 PM
[Analisis makna dan penggunaan titik tengah dalam PHP] Dalam PHP, titik tengah (.) ialah operator yang biasa digunakan untuk menyambung dua rentetan atau sifat atau kaedah objek. Dalam artikel ini, kami akan menyelami makna dan penggunaan titik tengah dalam PHP, menggambarkannya dengan contoh kod konkrit. 1. Operator titik tengah rentetan Concatenate Penggunaan yang paling biasa dalam PHP adalah untuk menggabungkan dua rentetan. Dengan meletakkan . antara dua rentetan, anda boleh menyambungkannya untuk membentuk rentetan baharu. $string1=&qu
Apache2 tidak boleh menghuraikan fail PHP dengan betul
Mar 08, 2024 am 11:09 AM
Disebabkan oleh keterbatasan ruang, berikut ialah artikel ringkas: Apache2 ialah perisian pelayan web yang biasa digunakan, dan PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas. Dalam proses membina tapak web, kadangkala anda menghadapi masalah bahawa Apache2 tidak dapat menghuraikan fail PHP dengan betul, menyebabkan kod PHP gagal dilaksanakan. Masalah ini biasanya disebabkan oleh Apache2 tidak mengkonfigurasi modul PHP dengan betul, atau modul PHP tidak serasi dengan versi Apache2. Secara umumnya terdapat dua cara untuk menyelesaikan masalah ini, satu
Analisis ciri baharu Win11: Bagaimana untuk melangkau log masuk ke akaun Microsoft
Mar 27, 2024 pm 05:24 PM
Analisis ciri baharu Win11: Cara melangkau log masuk ke akaun Microsoft Dengan keluaran Windows 11, ramai pengguna mendapati ia membawa lebih banyak kemudahan dan ciri baharu. Walau bagaimanapun, sesetengah pengguna mungkin tidak suka sistem mereka terikat pada akaun Microsoft dan ingin melangkau langkah ini. Artikel ini akan memperkenalkan beberapa kaedah untuk membantu pengguna melangkau log masuk ke akaun Microsoft dalam Windows 11 dan mencapai pengalaman yang lebih peribadi dan autonomi. Mula-mula, mari kita fahami sebab sesetengah pengguna enggan log masuk ke akaun Microsoft mereka. Di satu pihak, sesetengah pengguna bimbang bahawa mereka
Analisis fungsi eksponen dalam bahasa C dan contoh
Feb 18, 2024 pm 03:51 PM
Analisis terperinci dan contoh fungsi eksponen dalam bahasa C Pengenalan: Fungsi eksponen ialah fungsi matematik biasa, dan terdapat fungsi perpustakaan fungsi eksponen sepadan yang boleh digunakan dalam bahasa C. Artikel ini akan menganalisis secara terperinci penggunaan fungsi eksponen dalam bahasa C, termasuk prototaip fungsi, parameter, nilai pulangan, dsb. dan memberikan contoh kod khusus supaya pembaca dapat memahami dan menggunakan fungsi eksponen dengan lebih baik. Teks: Fungsi perpustakaan fungsi eksponen math.h dalam bahasa C mengandungi banyak fungsi yang berkaitan dengan eksponen, yang paling biasa digunakan ialah fungsi exp. Prototaip fungsi exp adalah seperti berikut
