您好,登錄后才能下訂單哦!
小編給大家分享一下移動(dòng)端頁面布局應(yīng)該怎么弄,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
什么是viewport
簡單來講,viewport就是瀏覽器上,用來顯示網(wǎng)頁的那一部分區(qū)域了,也就是說,瀏覽器的實(shí)際寬度,是和我們手機(jī)的寬度不一樣的,無論你的手機(jī)寬度是320px,還是640px,在手機(jī)瀏覽器內(nèi)部的寬度,始終會(huì)是瀏覽器本身的viewport。如今的瀏覽器,都會(huì)給自己的本身提供一個(gè)viewport的默認(rèn)值,可能是980px,或者是其他值。就以手機(jī)來說吧,目前,新版本的手機(jī)瀏覽器,絕大部分是以980px作為默認(rèn)的viewport值的。我這里對(duì)新版本的不同平臺(tái)下的瀏覽器做了測試,經(jīng)過測試,iphone下的默認(rèn)viewport為980px,安卓下的瀏覽器,目前主流的最新瀏覽器(比如chrome,還有很多國產(chǎn)的像qq,uc)的viewport也是980px了。
viewport是用來干什么的
viewport的默認(rèn)值,一般來說是大于手機(jī)屏幕的。這樣就可以做到當(dāng)我們?cè)跒g覽桌面端網(wǎng)頁的時(shí)候,可以讓桌面端端網(wǎng)頁正常顯示(我們普通頁面設(shè)計(jì)的時(shí)候,一般頁面的主區(qū)域是以960px來做的,所以980px這個(gè)值,可以做到桌面端網(wǎng)頁的正常顯示)。但是,其實(shí)我們手機(jī)的屏幕寬度是沒有960px的,因此瀏覽器會(huì)出現(xiàn)橫向滾動(dòng)條。同時(shí),即使是基于980的viewport,我們?cè)谝苿?dòng)端瀏覽我們的桌面頁面的體驗(yàn)其實(shí)也并不好,所以,一般的,我們會(huì)專門給瀏覽器設(shè)計(jì)一個(gè)移動(dòng)端的頁面。
對(duì)viewport的控制
如今可以絕大部分瀏覽器里(即主流的安卓瀏覽器和ios),都支持對(duì)viewport的一個(gè)控制了。一般的,我們會(huì)這么寫。
viewport默認(rèn)有6個(gè)屬性
我們把這個(gè)標(biāo)簽是在head里面,像這樣
<meta name="viewport" content="initial-scale=1">
這樣就可以做到對(duì)viewport的控制了
width: 設(shè)置viewport的寬度(即之前所提及到的,瀏覽器的寬度詳),這里可以為一個(gè)整數(shù),又或者是字符串"width-device"
initial-scale: 頁面初始的縮放值,為數(shù)字,可以是小數(shù)
minimum-scale: 允許用戶的最小縮放值,為數(shù)字,可以是小數(shù)
maximum-scale: 允許用戶的最大縮放值,為數(shù)字,可以是小數(shù)
height: 設(shè)置viewport的高度(我們一般而言并不能用到)
user-scalable: 是否允許用戶進(jìn)行縮放,'no'為不允許,'yes'為允許
三個(gè)需要了解的概念:
PPI: 可以理解為屏幕的顯示密度
DPR: 設(shè)備物理像素和邏輯像素的對(duì)應(yīng)關(guān)系,即物理像素/邏輯像素
Resolution: 就是我們常說的分辨率
物理像素與邏輯像素
看了我們上面內(nèi)容一的第一點(diǎn)之后,或許有些人會(huì)有些疑問,我的安卓手機(jī),或者iphone6plus(目前應(yīng)該僅限于這一款機(jī)型吧),買回來的是1920x1080的或者其他更高的,比我之前所謂的那個(gè)viewport默認(rèn)的980px要大。
這樣的問題,也就是我之前所說的物理像素與邏輯像素的關(guān)系了(即DPR)。以1920x1080為例,1080為物理像素,而我們?cè)趘iewport中,獲取到的,比如"width-device",是邏輯像素。所以之前viewport的默認(rèn)值,所比對(duì)的大小,其實(shí)是邏輯像素的大小,而非物理像素的大小。
以iphone6為例,在不做任何縮放的條件下,iphone6的獲取到的'width-device'為375px,為屏幕的邏輯像素。而購買時(shí)我們所知的750px,則為屏幕的物理像素。
CSS的問題
有了上面第二點(diǎn)的一些基礎(chǔ),還是以iphone6為例,我們可以知道,其實(shí)我們所寫的1px,在iphone6上為2px的物理像素。所以,最后的,給出一個(gè)結(jié)論。就是我們寫的1px,在移動(dòng)端,是邏輯像素的1px,而非物理像素的1px。
簡單說下rem
rem是根據(jù)頁面的根元素的font-size的一個(gè)相對(duì)的單位,即
html{ font-size: 16px; }
比如當(dāng)我們?cè)谝粋€(gè)div中,如此寫
div{ width: 2rem; }
那么我們的width,是16*2 = 32px
rem做到適配不同分辨率
這個(gè)是現(xiàn)在手機(jī)淘寶的移動(dòng)端的解決方案,即使用rem的特性,來對(duì)頁面進(jìn)行布局。
下面舉一個(gè)例子
假定設(shè)計(jì)稿的大小為750,那么我們則將整個(gè)圖分成100份來看(下面的題外話會(huì)說明為什么會(huì)分成100份來看)
那么,我們現(xiàn)在就讓根部元素的font-size為75px
html{ font-size: 75px; }
那么,我們現(xiàn)在就可以比對(duì)設(shè)計(jì)稿,比如設(shè)計(jì)稿中,有一個(gè)div元素,寬度,高度都為75px,那么我們這樣寫即可
div{ height: 1rem; width: 1rem; }
可能看到這里,一些人還是不明白怎么用rem做到適配不同的分辨率,那么我們?cè)賮?/span>
現(xiàn)在,我們換設(shè)備了,不用這個(gè)設(shè)備是一個(gè)width為640的手機(jī)
那么這個(gè)時(shí)候,我們的rem單位就起到作用了。
我們的rem全是根據(jù)html的font-size來改變的,所以說,這個(gè)時(shí)候,我們只需要把html下的font-size改成64px。那么,我們之前的div,因?yàn)槭歉鶕?jù)html下的font-size動(dòng)態(tài)變化的,那么。此時(shí)也就變成了寬度和高度都為64px的東西了。這樣,就可以做到適配不同的屏幕分辨率了。(其實(shí)就是個(gè)等比縮放)
總結(jié)一下,我們的解決方案,其實(shí)就是 設(shè)計(jì)稿的像素/html的font-size = 用來代替px的rem。
這一個(gè)步驟,我們需要通過JS來進(jìn)行操作。
對(duì)于js的操作在下面會(huì)提到。
DPR的問題
視覺姐姐給了我們?cè)O(shè)計(jì)稿,并交由我們實(shí)現(xiàn),那么,我們應(yīng)該去認(rèn)真的實(shí)現(xiàn):-)(試想你做了一張圖,而前端很多地方并沒有按照你所想的,你所給的去做,而是私自改變了很多東西,你肯定會(huì)不高興的)
那么1px會(huì)出現(xiàn)什么問題呢。
還記得我們第二大點(diǎn)講的,我們的設(shè)備,是有物理像素和邏輯像素的。而假設(shè)我們的設(shè)計(jì)稿是750的,同時(shí)還是以iphone6為例,此時(shí)如果我們的viewport是這樣的
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
之前說過,在不做任何縮放的條件下,iphone6獲取到的viewport為375px。
然后我們的頁面中有個(gè)div,他有一個(gè)邊框值,如下
div{ height: 5rem; widht:5rem; border: 1px solid #000 }
此時(shí)我們寫的1px,實(shí)際上是邏輯像素,而我們?cè)趇phone6上看到的是物理像素,于是這個(gè)時(shí)候,我們眼睛所看到的其實(shí)是2px(參考第二點(diǎn)第三個(gè)問題)
所以此時(shí)我們需要在viewport上做文章了,此時(shí)先明確,如果要獲取到真正的1px,那么我們需要這么做,將viewport改為
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
即對(duì)屏幕做0.5倍的縮放。這樣,我們就能得到實(shí)際的1px。
所以到這里,我們還要明確一點(diǎn),viewport的meta標(biāo)簽,我們這里也只能通過js來動(dòng)態(tài)生成。
同時(shí),這樣寫,據(jù)說還可以避免比如inline的SVG等元素按照邏輯像素的渲染。避免了整個(gè)頁面清晰度的打折(其實(shí)我并不能看出來)
文字適配問題
最近深深糾結(jié)與rem與px做字體單位的問題,還是先分別談下二者吧。
rem與px的特點(diǎn):
字體大小引發(fā)的系列問題:
文字適配的解決方案:
上面說了這么多,我們總要有一套解決方案吧
對(duì)于一些標(biāo)題性的文字,我們依然可以用rem。讓他隨著屏幕來進(jìn)行縮放,因?yàn)闃?biāo)題性文字一般較大,而較大的文字,點(diǎn)陣對(duì)其影響就越小。這樣,即使出現(xiàn)奇怪的尺寸,也能夠讓字體得到很好的渲染。
對(duì)于一些正文內(nèi)容的文字(即站在使用者的角度,你不希望他進(jìn)行縮放的文字)。我們采用px來進(jìn)行處理。
倘若一個(gè)字體,只提供了12px,14px,16px的點(diǎn)陣。那么當(dāng)你寫13px,15px,17px的時(shí)候。就并沒有其字體大小所對(duì)應(yīng)的點(diǎn)陣。那么這樣就造成了一個(gè)問題。他們會(huì)使用其相鄰的點(diǎn)陣,比如對(duì)應(yīng)使用了12px,14px,16px的點(diǎn)陣,而導(dǎo)致一個(gè)問題,文字占用的大小確實(shí)改變,但點(diǎn)陣卻并沒有改變。
字體大小:我們平時(shí)也看過,很多網(wǎng)站,是不以奇數(shù)作為字體大小的。我稍微查了些東西,在知乎上的現(xiàn)在網(wǎng)頁設(shè)計(jì)中的為什么少有人用 11px、13px、15px 等奇數(shù)的字體?問題下,有一些比較好的解答,我就不再多說(我也并不能比這個(gè)問題說的更多),總的來說,其實(shí)就是偶數(shù)寬度的字體能夠顯得均衡,以及一個(gè)點(diǎn)陣的問題。不過因?yàn)橐劶包c(diǎn)陣,所以我拿上面回答中的一個(gè)內(nèi)容舉例。
以rem作為字體單位:我們可以讓頁面整體的文字,也跟隨著html的font-size來進(jìn)行改變,這樣,在不同的屏幕下,可以做到文字相對(duì)屏幕的比例是一樣的。
以px作為字體單位: 這個(gè)是目前很多網(wǎng)站還是依然采用的方法。因?yàn)橐陨厦嫠鶎懙?,以rem作為字體單位。無論在任何屏幕下面,我們的文字都會(huì)根據(jù)屏幕做一個(gè)適應(yīng)。試想這樣一個(gè)場景。你買了一個(gè)大屏手機(jī)(5.7寸的),而別人用的是4寸的手機(jī)。以rem作為字體單位的話,那大屏手機(jī)看到的文字多少和小屏手機(jī)確實(shí)一樣的了。這樣來做,其實(shí)并不符合我們買大屏手機(jī)的期待。同時(shí),以rem作為字體單位,可能會(huì)導(dǎo)致出現(xiàn)很多奇怪的字體大?。ó吘故歉鶕?jù)html的font-size動(dòng)態(tài)變化的嘛),同時(shí)這其中還涉及到了一個(gè)點(diǎn)陣尺寸的概念,這個(gè)在下面來講。
在 三.使用rem布局 里面,我們給出了各種情況的解決方案,并且,在我舉例的時(shí)候,熱衷于使用iphone來舉例,但其實(shí),上面的所有問題,不是僅僅iphone會(huì)出現(xiàn)的問題,安卓也是一樣。但是,如果你已經(jīng)看完了上面,那么這里,才是真正給出我們解決方案的地方,并且,這個(gè)解決方案并不完善。
談?wù)刬phone的r屏與安卓的各種屏
rem布局也好,用viewport進(jìn)行縮放也罷,文字的適配問題也是,都是基于我們想對(duì)各個(gè)不同的設(shè)備所進(jìn)行的匹配。這套方案很好,然而也有其兼顧不到的地方。即安卓和ios的屏幕的一些問題,當(dāng)然,細(xì)的東西我們不談,我們只談dpr。
安卓并沒有對(duì)自己的屏幕叫做r屏,但是其原理和iphone的r屏可以說是一樣。r屏做的是什么,把兩個(gè)(三個(gè))物理像素,丟到了一個(gè)邏輯像素里面,讓屏幕展現(xiàn)的更清晰(當(dāng)然,這是我片面的理解,不過我覺得大體來說并沒有錯(cuò),我們也不用去深入探討r屏還有什么東西,我也并不懂)。而安卓也是一樣,他也同樣把n個(gè)物理像素丟到了一個(gè)邏輯像素里面。而這里的n,也就是dpr值(所以當(dāng)我看到好多人問安卓為什么不采用r屏的時(shí)候,我真的也是……醉了?)。而安卓的dpr值,并不像iphone那樣,就只有兩個(gè)值。安卓的dpr是千奇百怪的,可能是1.5,2,3,4,2.5等等的都有。(甚至我還看到了1.7之類的,安卓的各個(gè)設(shè)備商,玩的真尼瑪high啊。怎么高興怎么來。)
所以,對(duì)安卓的屏幕的dpr的處理,其實(shí)是很頭疼的,因?yàn)椋臀覀儗?duì)字體的處理,有了很大的沖突。這個(gè)在下面提及
其實(shí)iphone為開發(fā)者考慮到了很多東西,為了讓開發(fā)者便于開發(fā),在6plus出現(xiàn)之前,iphone的dpr始終也就是2(即前面所談的物理像素/邏輯像素=2),即使是6plus出現(xiàn)了,iphone到底其實(shí)也就只有2,3這兩個(gè)dpr。我們很容易對(duì)其做到兼顧。
先談iphone
再談安卓
首先看看手淘的解決方案
rem布局
用js獲取到頁面的寬度,然后對(duì)其進(jìn)行寬度/10的處理,再將其寫到html的font-size中。手淘的flexible.js里面的這一部分,并為了方便看懂做了些改寫。大體就是這樣的
function refreshRem(){ var docEl = window.document.documentElement; var width = docEl.documentElement.getBoundingClientRect().width; var rootSize = width/10; docEl.style.fontSize = rootSize + 'px'; }
dpr的配置
首先,在引入flexible.js之前,我們可以對(duì)dpr進(jìn)行手動(dòng)的配置,即使用自定義的meta標(biāo)簽來配置dpr(看清楚是flexible,而非viewport)
<meta name="flexible" content="initial-dpr=2,maximum-dpr=3" />
iniital-dpr是把dpr強(qiáng)制設(shè)定為給定的值,而maximum-dpr則是給出一個(gè)最大的dpr限制,然后對(duì)其和系統(tǒng)的dpr做一個(gè)比較。
然后依然為了方便閱讀我把flexble.js這一部分的代碼抽象出來,
var doc = window.document var metaEl = doc.querySelector('meta[name="viewport"]'); var flexibleEl = doc.querySelector('meta[name="flexible"]'); var dpr = 0; var scale = 0; //縮放比例 //在meta標(biāo)簽中,已經(jīng)有了viewport,則使用已有的viewport,并根據(jù)meta標(biāo)簽,對(duì)dpr進(jìn)行設(shè)置 if (metaEl) { console.warn('將根據(jù)已有的meta標(biāo)簽來設(shè)置縮放比例'); var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/); if (match) { scale = parseFloat(match[1]); dpr = parseInt(1 / scale); } //如果在meta標(biāo)簽中,我們手動(dòng)配置了flexible,則使用里面的內(nèi)容 } else if (flexibleEl) { var content = flexibleEl.getAttribute('content'); if (content) { var initialDpr = content.match(/initial\-dpr=([\d\.]+)/); var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/); if (initialDpr) { dpr = parseFloat(initialDpr[1]); scale = parseFloat((1 / dpr).toFixed(2)); }
if (maximumDpr) {
dpr = parseFloat(maximumDpr[1]);
scale = parseFloat((1 / dpr).toFixed(2));
}
}
}
這樣,我們通過flexible的分析與獲取,對(duì)dpr進(jìn)行了書寫。不過其實(shí)這里,是有個(gè)問題的。即在書寫maximum的的情況下,其實(shí)根本沒有像文檔中給我們的說法一樣,做一個(gè)比較,而是做了和initialDpr一樣的一個(gè)處理。不過這里也不對(duì)其做一個(gè)探討了。
然后,這套解決方案,然后當(dāng)我們?cè)趍eta標(biāo)簽里面并沒有對(duì)viewport以及flexible兩個(gè)的任意一個(gè)進(jìn)行書寫的時(shí)候,他也是會(huì)自動(dòng)獲取一個(gè)dpr值的
if (!dpr && !scale) { var isAndroid = window.navigator.appVersion.match(/android/gi); var isIPhone = window.navigator.appVersion.match(/iphone/gi);、 //devicePixelRatio這個(gè)屬性是可以獲取到設(shè)備的dpr的 var devicePixelRatio = win.devicePixelRatio; if (isIPhone) { // iOS下,對(duì)于2和3的屏,用2倍的方案,其余的用1倍方案 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 其他設(shè)備下,仍舊使用1倍的方案 dpr = 1; } scale = 1 / dpr; }
這里我們可以看到,手機(jī)淘寶并沒有對(duì)安卓的dpr進(jìn)行一個(gè)適配,原因之后再講。
然后到了這里,我們獲取到了我們需要的dpr值,并根據(jù)dpr值獲取到了我們所需要的縮放值(即scale)
然后我們要做的,就是在并沒有viewport的meta標(biāo)簽對(duì)情況下自己動(dòng)態(tài)將這個(gè)標(biāo)簽寫進(jìn)我們的header,形式是這樣的
<meta name="viewport" content="initial-scale=scale, maximum-scale=scale, minimum-scale=scale, user-scalable=no">
這樣,dpr的配置,也就完成了,當(dāng)然,安卓設(shè)備并沒有對(duì)dpr進(jìn)行一個(gè)配置(上面的動(dòng)態(tài)生成就不給出js了)
文字的解決方案
由于手淘暫時(shí)并沒有對(duì)安卓做一個(gè)處理,所以,這里,只是對(duì)iphone做了一個(gè)處理
即在html上,加入了一個(gè)自定義屬性,data-dpr。
<html data-dpr='dpr'></html>
還是以750的設(shè)計(jì)稿為例(即iphone6)
假如設(shè)計(jì)稿上某a標(biāo)簽是32px,那么,我們要這么寫
a{ font-size: 16px } /*iphone6*/ [data-dpr='2'] a{ font-size: 32px } /*iphone6plus*/ [data-dpr='3'] a{ font-size: 32px }
現(xiàn)在的一些問題
正如我們看到的,手淘目前的方案里面,是沒有考慮到安卓dpr的問題的。即,這套方案,只對(duì)于iphone的r屏做了一個(gè)處理,而對(duì)于安卓,并沒有做dpr的處理。我們來分析下原因吧(個(gè)人拙見)。
我們希望字體能夠以px來展現(xiàn),同時(shí),我們也希望我們的東西能對(duì)dpr做一個(gè)適配。對(duì)于ios,這自然是可行的,即采用了data-dpr的自定義屬性來調(diào)整文字。4到6寫一套字體大小,6p寫一套字體大小,然后在對(duì)dpr為1的屏幕寫一套字體大小。其實(shí)這種寫法還是很惡心,不過基于對(duì)dpr的適配,這樣寫也算是個(gè)解決方案了。
不過同樣的解決方案到安卓就不行了,安卓的dpr有時(shí)候會(huì)很亂(比如現(xiàn)在在goole的手機(jī)測試?yán)锩婵梢钥吹?,安卓的dpr,lg的某些設(shè)備還采用了1.7那樣的奇怪dpr)。而當(dāng)1.7dpr這種不規(guī)范的數(shù)字出現(xiàn)的時(shí)候,我們就不能采用之前的解決方案了,比如
[data-dpr='1.7'] a{ font-size: 25px }
這樣的東西是不可能去寫的,那萬一還有2.25,2.5之類的呢?我們都要拿去匹配么?
其實(shí)現(xiàn)在,因?yàn)槲覀兺ㄟ^devicePixelRatio可以獲取到安卓的dpr值,即可以做到對(duì)安卓設(shè)備的dpr一個(gè)匹配。但是,文字如果采用px的話,確實(shí)是很難做到匹配的。
即總結(jié)一下,就是說,對(duì)于安卓的dpr匹配,目前來說,是沒有什么問題的,但是,對(duì)于dpr匹配之后的字體,那肯定是有問題的。
常見的dpr下的字體,我們依然可以解決,但是不常見的dpr,我們確實(shí)很難做到對(duì)dpr的解決。那如何解決這些問題呢。目前以我本人這個(gè)不太靈光的腦袋,確實(shí)也不曉得該如何進(jìn)行一個(gè)處理了,起碼做不到很好的解決。
不過,還是丟上些個(gè)人的觀點(diǎn)吧。
在之前的對(duì)dpr的判斷中,是根據(jù)了設(shè)備進(jìn)行判斷,即安卓不對(duì)dpr進(jìn)行改變,僅對(duì)ios的設(shè)備進(jìn)行改變。那么,我們其實(shí)可不可以以dpr的值來做一個(gè)處理呢?即像這樣寫
if (!dpr && !scale) { //devicePixelRatio這個(gè)屬性是可以獲取到設(shè)備的dpr的 var devicePixelRatio = win.devicePixelRatio; //判斷dpr是否為整數(shù) var isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g) if (isRegularDpr) { // 對(duì)于是整數(shù)的dpr,對(duì)dpr進(jìn)行操作 if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) { dpr = 3; } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){ dpr = 2; } else { dpr = 1; } } else { // 對(duì)于其他的dpr,人采用dpr為1的方案 dpr = 1; } scale = 1 / dpr; }
我們對(duì)這里做了一點(diǎn)點(diǎn)修改,即來判斷dpr是否是規(guī)則的,也就是是否是我們常見的1,2,3等,然后,我們只對(duì)規(guī)則的dpr,來進(jìn)行一個(gè)字體的處理。這樣,iphone依然還是用之前的匹配方案。而其實(shí)目前安卓,很多的設(shè)備還是比較常見的dpr了,所以我們這里,將之前對(duì)設(shè)備的判斷,轉(zhuǎn)變成對(duì)dpr是否是整數(shù)的一個(gè)判斷。其他地方不變,可以解決對(duì)安卓dpr的部分匹配。
同樣,開發(fā)的時(shí)候,如果并不在乎字體的問題的話,大可以直接使用rem。那樣是可以做到dpr和文字都適配的問題。不過正如我們講到字體的時(shí)候所說的,使用rem是很多用戶不希望的(大屏機(jī)還是和小屏機(jī)看到一樣多的內(nèi)容),同時(shí),還有點(diǎn)陣的問題。
好,東西寫到這里,也將近到了尾聲。第一次寫這么長的東西,感覺好累啊=_=。嗯還有篇2000字的檢討要寫,默默匿了去寫檢討了。
手機(jī)淘寶的flexible設(shè)計(jì)與實(shí)現(xiàn)
iphone6plus很有趣的地方
iphone6plus照理來說的,其實(shí)際dpr是2.87左右的,不過,為了方便開發(fā)者來開發(fā),iphone6plus對(duì)其做了一個(gè)調(diào)整,將dpr調(diào)整為3,然后在對(duì)屏幕進(jìn)行了一個(gè)縮放。這樣做,自然是方便了開發(fā)者前去開發(fā),然而,這樣做,也有了一些性能上的損失。(iphone為開發(fā)者考慮的還是挺周全的,看看隔壁安卓,dpr怎么爽怎么來,都特么自己玩自己的)
有意思的vh和vw
vh,vw目前還存在很大程度的兼容性問題,所以還并沒有采用。
vh,vw有什么特點(diǎn)呢
這兩個(gè)元素分別會(huì)把屏幕上的可視高度(說通俗點(diǎn)就是你手機(jī)屏幕那個(gè)框框頭裝起的東西),寬度,分成100份來看,比如先前我們用rem來處理的地方,我們需要在html元素下寫上font-size: 75px,然后再在div下寫上width:1rem。而有了vh,vw之后,我們?nèi)绱颂幚韍tml的font-size就好。
html { font-size: 10vw; }
這樣寫,省去了一部js操作的步驟。
看完了這篇文章,相信你對(duì)移動(dòng)端頁面布局應(yīng)該怎么弄有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。