這篇文章主要介紹了css3新單位vw、vh的使用教程,本文通過實例代碼給大家介紹vw、vh、vmin、vmax 的含義及vw、vh與%百分比的區(qū)別,感興趣的朋友一起看看吧
響應(yīng)式布局的單位我們第一時間會想到通過rem單位來實現(xiàn)適配,但是它還需要內(nèi)嵌一段腳本去動態(tài)計算跟元素大小。
比如:
(function?(doc,?win)?{ ??let?docEl?=?doc.documentElement ??let?resizeEvt?=?'orientationchange'?in?window???'orientationchange'?:?'resize' ??let?recalc?=?function?()?{ ????var?clientWidth?=?docEl.clientWidth ????if?(!clientWidth)?return ????docEl.style.fontSize?=?14?*?(clientWidth?/?320)?+?'px' ??} ??if?(!doc.addEventListener)?return ??win.addEventListener(resizeEvt,?recalc,?false) ??doc.addEventListener('DOMContentLoaded',?recalc,?false) })(document,?window)
那有沒有一個單位不需要JS和CSS耦合在一起的單位?答案是有的,就是vw/vh。
vw?=?view?width vh?=?view?height
這兩個單位是CSS3引入的,以上稱為視口單位允許我們更接近瀏覽器窗口定義大小。
vw、vh、vmin、vmax 的含義
(1)vw、vh、vmin、vmax 是一種視窗單位,也是相對單位。它相對的不是父節(jié)點或者頁面的根節(jié)點。而是由視窗(Viewport)大小來決定的,單位 1,代表類似于 1%。
視窗(Viewport)是你的瀏覽器實際顯示內(nèi)容的區(qū)域—,換句話說是你的不包括工具欄和按鈕的網(wǎng)頁瀏覽器。
(2)具體描述如下:
vw:視窗寬度的百分比(1vw 代表視窗的寬度為 1%)
vh:視窗高度的百分比
vmin:當(dāng)前 vw 和 vh 中較小的一個值
vmax:當(dāng)前 vw 和 vh 中較大的一個值
vw、vh 與 % 百分比的區(qū)別
(1)% 是相對于父元素的大小設(shè)定的比率,vw、vh 是視窗大小決定的。
(2)vw、vh 優(yōu)勢在于能夠直接獲取高度,而用 % 在沒有設(shè)置 body 高度的情況下,是無法正確獲得可視區(qū)域的高度的,所以這是挺不錯的優(yōu)勢。
vmin、vmax 用處
做移動頁面開發(fā)時,如果使用 vw、wh 設(shè)置字體大?。ū热?5vw),在豎屏和橫屏狀態(tài)下顯示的字體大小是不一樣的。
由于 vmin 和 vmax 是當(dāng)前較小的 vw 和 vh 和當(dāng)前較大的 vw 和 vh。這里就可以用到 vmin 和 vmax。使得文字大小在橫豎屏下保持一致。
瀏覽器兼容性
(1)桌面 PC
Chrome:自 26 版起就完美支持(2013年2月)
Firefox:自 19 版起就完美支持(2013年1月)
Safari:自 6.1 版起就完美支持(2013年10月)
Opera:自 15 版起就完美支持(2013年7月)
IE:自 IE10 起(包括 Edge)到現(xiàn)在還只是部分支持(不支持 vmax,同時 vm 代替 vmin)
(2)移動設(shè)備
Android:自 4.4 版起就完美支持(2013年12月)
iOS:自 iOS8 版起就完美支持(2014年9月)
如何利用視口單位適配頁面
僅使用vw作為CSS單位
1.根據(jù)設(shè)計稿的尺寸轉(zhuǎn)換為vw單位(SASS函數(shù)編譯)
//iPhone?6尺寸作為設(shè)計稿基準(zhǔn) $vm_base:?375; @function?vm($px)?{ ????@return?($px?/?375)?*?100vw; }
2.無論是文本還是布局高寬、間距等都使用 vw
< p class="mod_nav"> ????????????< nav class="mod_nav_list" v-for="n in 5"> ????????????????< a href="#" class="mod_nav_list_item"> ????????????????????< span class="mod_nav_list_item_logo"> ????????????????< img src="http://jdc.jd.com/img/80"> ????????????????????< /span> ????????????????????< p class="mod_nav_list_item_name">導(dǎo)航入口< /p> ????????????????< /a> ????????????< /nav> < /p> .mod_nav?{ ????background:?#fff; ????&_list?{ ????????display:?flex; ????????padding:?vm(15)?vm(10)?vm(10); ????????&_item?{ ????????????flex:?1; ????????????text-align:?center; ????????????font-size:?vm(10); ????????????&_logo?{ ????????????????display:?block; ????????????????margin:?0?auto; ????????????????width:?vm(40); ????????????????height:?vm(40); ????????????????img?{ ????????????????????display:?block; ????????????????????margin:?0?auto; ????????????????????max-width:?100%; ????????????????} ????????????} ????????????&_name?{ ????????????????margin-top:?vm(2); ????????????} ????????} ????} }
最優(yōu)做法——搭配vw和rem
使用vm作為css單位代碼量確實減少很多,但是你會發(fā)現(xiàn)它是利用視口單位實現(xiàn),依賴于視口大小而自動縮放,失去了最大最小寬度的限制。
于是,聯(lián)想到不如結(jié)合rem單位來實現(xiàn)布局?rem 彈性布局的核心在于動態(tài)改變根元素大小,那么我們可以通過:·
給根元素大小設(shè)置隨著視口變化而變化的 vw 單位,這樣就可以實現(xiàn)動態(tài)改變其大小。
限制根元素字體大小的最大最小值,配合 body 加上最大寬度和最小寬度
這樣我們就能夠?qū)崿F(xiàn)對布局寬度的最大最小限制。因此,根據(jù)以上條件,我們可以得出代碼實現(xiàn)如下:
//?rem?單位換算:定為?75px?只是方便運算,750px-75px、640-64px、1080px-108px,如此類推 $vm_fontsize:?75;?//?iPhone?6尺寸的根元素大小基準(zhǔn)值 @function?rem($px)?{ ?????@return?($px?/?$vm_fontsize?)?*?1rem; } //?根元素大小使用?vw?單位 $vm_design:?750; html?{ ????font-size:?($vm_fontsize?/?($vm_design?/?2))?*?100vw; ????//?同時,通過Media?Queries?限制根元素最大最小值 ????@media?screen?and?(max-width:?320px)?{ ????????font-size:?64px; ????} ????@media?screen?and?(min-width:?540px)?{ ????????font-size:?108px; ????} } //?body?也增加最大最小寬度限制,避免默認(rèn)100%寬度的?block?元素跟隨?body?而過大過小 body?{ ????max-width:?540px; ????min-width:?320px; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,更多相關(guān)內(nèi)容請關(guān)注PHP中文網(wǎng)!
相關(guān)推薦:
Atas ialah kandungan terperinci 關(guān)于css3的單位vw和vh的使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

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)

Bagaimana untuk mencapai kesan gelombang dengan CSS3 tulen? Artikel ini akan memperkenalkan kepada anda cara menggunakan animasi SVG dan CSS untuk mencipta kesan gelombang Saya harap ia akan membantu anda!

Artikel ini akan menunjukkan kepada anda cara menggunakan CSS untuk melaksanakan pelbagai butang berbentuk pelik yang kerap muncul. Saya harap ia akan membantu anda!

Dua kaedah: 1. Menggunakan atribut paparan, cuma tambah gaya "display:none;" pada elemen. 2. Gunakan kedudukan dan atribut teratas untuk menetapkan kedudukan mutlak elemen untuk menyembunyikan elemen. Cuma tambahkan gaya "position:absolute;top:-9999px;".

Kaedah pelaksanaan: 1. Gunakan pemilih ":aktif" untuk memilih keadaan klik tetikus pada gambar 2. Gunakan atribut transform dan fungsi skala() untuk mencapai kesan pembesaran gambar, sintaks "img:active {transform; : skala(pembesaran paksi-x, y Pembesaran paksi);}".

Bagaimana untuk mencipta karusel teks dan karusel imej? Perkara pertama yang semua orang fikirkan ialah sama ada untuk menggunakan js Malah, karusel teks dan karusel imej juga boleh direalisasikan menggunakan CSS tulen. Saya harap ia akan membantu semua orang.

Dalam CSS, anda boleh menggunakan atribut imej sempadan untuk mencapai sempadan renda. Atribut imej sempadan boleh menggunakan imej untuk membuat sempadan, iaitu, menambah imej latar belakang ke sempadan Anda hanya perlu menentukan imej latar belakang sebagai gaya renda; lebar sempadan imej ke dalam. Sama ada permulaan diulang;".

Dalam CSS3, anda boleh menggunakan atribut "animation-timing-function" untuk menetapkan kelajuan putaran animasi Atribut ini digunakan untuk menentukan cara animasi akan melengkapkan kitaran dan menetapkan lengkung kelajuan animasi. animation-timing-function: nilai atribut kelajuan;}".

Kecerunan linear CSS3 boleh merealisasikan segi tiga; hanya buat kecerunan linear 45 darjah dan tetapkan warna kecerunan kepada dua warna tetap, satu ialah warna segi tiga dan satu lagi ialah warna telus Sintaks "linear-gradient(45deg, color nilai , nilai warna 50%, warna lutsinar 50%, warna lutsinar 100%)".
