如上圖所示，b-div自動(dòng)在第二行顯示，因此可以看到inline-block屬性是串行安排元素，如果不超過(guò)一行，則在一行內(nèi)顯示，超過(guò)一行，則進(jìn)行換行。

我們?cè)僬{(diào)整一下代碼，把inline-block改為inline

 a bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 
c
d
e
f
 

看到a  b在一行顯示，inline和inline-block的區(qū)別就是，inline強(qiáng)制元素在一行，而inline-block則是不超過(guò)一行在一行內(nèi)顯示，否則換行。

如上是我們常用的div 顯示控制。參考w3cSchool整理的display屬性表格如下

上面我們講解了div元素在默認(rèn)瀏覽器流式布局的情況下,body中元素布局的情況，而實(shí)際上，每一個(gè)div元素內(nèi)部也可以包含其它元素，而這些子元素也是一樣按照流方式進(jìn)行布局。請(qǐng)參看如下代碼和效果圖。

 a      A     B     
C
  
c
d
e
f
 

從上述事例圖中可以看到，包含在div中的子div也遵循之前的流式方式進(jìn)行排版，并且由于父DIV是由子div支撐起來(lái)的，因此子div的布局也會(huì)影響到父div在父流中的布局。

但很多情況下，總會(huì)有一些搗亂分子存在，他們不希望按照固定的流來(lái)安置自己而是更希望自己能夠有個(gè)性一點(diǎn)。他們使用float和position屬性來(lái)實(shí)現(xiàn)這個(gè)目的。float常用的屬性如下

loat這個(gè)CSS屬性比較難于控制，使用的好，那么你可以把布局做的很眩，使用的不好，界面會(huì)亂的一塌糊涂。如下是摘錄的float的用法分析,它已經(jīng)對(duì)float進(jìn)行了***的說(shuō)明。

CSS浮動(dòng)屬性Float詳解

什么是CSS Float?

float 是 css  的定位屬性。在傳統(tǒng)的印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為“文本環(huán)繞”。在網(wǎng)頁(yè)設(shè)計(jì)中，應(yīng)用了CSS的float屬性的頁(yè)面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動(dòng)的元素仍然是網(wǎng)頁(yè)流的一部分。這與使用絕對(duì)定位的頁(yè)面元素相比是一個(gè)明顯的不同。絕對(duì)定位的頁(yè)面元素被從網(wǎng)頁(yè)流里面移除了，就像印刷布局里面的文本框被設(shè)置為無(wú)視頁(yè)面環(huán)繞一樣。絕對(duì)定位的元素不會(huì)  影響其它元素，其它元素也不會(huì)影響它，無(wú)論它是否和其它元素挨著。

像這樣在一個(gè)元素上用CSS設(shè)置浮動(dòng)：

#sidebar { float: right; }

fload屬性有四個(gè)可用的值：Left 和Right 分別浮動(dòng)元素到各自的方向，None (默認(rèn)的) 使元素不浮動(dòng)，Inherit  將會(huì)從父級(jí)元素獲取float值。

Float的用處

除了簡(jiǎn)單的在圖片周圍包圍文字，浮動(dòng)可用于創(chuàng)建全部網(wǎng)頁(yè)布局。

Float對(duì)小型的布局同樣有用。例如頁(yè)面中的這個(gè)小區(qū)域。如果我們?cè)谖覀兊男☆^像圖片上使用Float，當(dāng)調(diào)整圖片大小的時(shí)候，盒子里面的文字也將自動(dòng)調(diào)整位置：

同樣的布局可以通過(guò)在外容器使用相對(duì)定位，然后在頭像上使用絕對(duì)定位來(lái)實(shí)現(xiàn)。這種方式中，文本不會(huì)受頭像圖片大小的影響，不會(huì)隨頭像圖片的大小而有相應(yīng)變化。

清除Float

清除(clear)是浮動(dòng)(float)的相關(guān)屬性.一個(gè)設(shè)置了清除Float的元素不會(huì)如浮動(dòng)所設(shè)置的一樣，向上移動(dòng)到Float元素的邊界，而是會(huì)忽視浮動(dòng)向下移動(dòng)。如下，一圖頂千言。

范例代碼和事例截圖

aaaa
aaaaa
aaaaaa
aaaaaa
 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb 
cccccc

上例中，側(cè)欄向右浮動(dòng)，并且短于主內(nèi)容區(qū)域。頁(yè)腳(footer)于是按浮動(dòng)所要求的向上跳到了可能的空間。要解決這個(gè)問(wèn)題，可以在頁(yè)腳(footer)上清除浮動(dòng)，以使頁(yè)腳(footer)待在浮動(dòng)元素的下面。

#footer { clear: both; }

aaaa
aaaaa
aaaaaa
aaaaaa
 bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
                                bbbbbbbbbbbbbbbbbbbbbbbbbbbbbb cccccc

清除(clear)也有4個(gè)可能值。最常用的是 both，清楚左右兩邊的浮動(dòng)。left 和 right 只能清楚一個(gè)方向的浮動(dòng)。none  是默認(rèn)值，只在需要移除已指定的清除值時(shí)用到。inherit 應(yīng)該時(shí)第五個(gè)值，不過(guò)很奇怪的是 IE 不支持(這個(gè)不奇怪吧，IE 從來(lái)都這么特立獨(dú)行吧  -糖伴西紅柿注)。只清除左邊或右邊的浮動(dòng)，實(shí)際中很少見(jiàn)，不過(guò)絕對(duì)有他們的用處。

偉大的塌陷

使用浮動(dòng)(float)的一個(gè)比較疑惑的事情是他們?cè)趺从绊懓麄兊母冈氐?。如果父元素只包含浮?dòng)元素，那么它的高度就會(huì)塌縮為零。如果父元素不包含任何的可見(jiàn)背景，這個(gè)問(wèn)題會(huì)很難被注意到，但是這是一個(gè)很重要的問(wèn)題。

塌陷的直觀對(duì)立面更不好，看看下面的情況：

當(dāng)上面的塊級(jí)元素自動(dòng)擴(kuò)展以適應(yīng)浮動(dòng)元素時(shí)，段落間的文本流中會(huì)出現(xiàn)非自然的空白換行，而且沒(méi)有有效的方法來(lái)修正這個(gè)問(wèn)題。對(duì)于這種情況，設(shè)計(jì)師的抱怨會(huì)更甚于對(duì)塌陷的抱怨(沒(méi)理解，不是設(shè)計(jì)完成之后才會(huì)進(jìn)行頁(yè)面編碼嗎?-糖伴西紅柿)。

為了防止怪異的布局和跨瀏覽器的問(wèn)題，塌陷問(wèn)題幾乎總是被要處理的。我們?cè)谌萜髦械母?dòng)元素之后，容器結(jié)束之前來(lái)清除浮動(dòng)。

清除浮動(dòng)的技術(shù)

如果你很明確的知道接下來(lái)的元素會(huì)是什么，可以使用 clear:both; 來(lái)清除浮動(dòng)。這個(gè)方法很不錯(cuò)，它不需要  hack，不添加額外的元素也使得它有良好的語(yǔ)義性。當(dāng)然事情并不是都可以這樣解決的，工具箱中還是需要另外幾個(gè)清除浮動(dòng)的工具。

◆ 空div方法從字面來(lái)看，是一個(gè)空的 div。

有時(shí)可能會(huì)用

或者一些其他元素，但是 div 是最常用的，因?yàn)樗鼪](méi)有瀏覽器默認(rèn)樣式;沒(méi)有特殊功能，而且一般不會(huì)被 css  樣式化。這個(gè)方法因?yàn)橹皇菫榱吮憩F(xiàn)，對(duì)頁(yè)面沒(méi)有上下文涵義而被純語(yǔ)義論者嘲笑。誠(chéng)然，從嚴(yán)格的角度來(lái)說(shuō)他們是對(duì)的，但是這個(gè)方法有效而且沒(méi)有任何傷害。

◆ overflow 方法在父元素上設(shè)置 overflow 這個(gè) css 屬性。如果父元素的這個(gè)屬性設(shè)置為 auto 或者  hidden，父元素就會(huì)擴(kuò)展以包含浮動(dòng)。這個(gè)方法有著較好的語(yǔ)義性，因?yàn)樗恍枰~外元素。但是，如果需要增加一個(gè)新的 div 來(lái)使用這個(gè)方法，其實(shí)就和空 div  方法一樣沒(méi)有語(yǔ)義了。而且要記住，overflow 屬性不是為了清除浮動(dòng)而定義的。要小心不要覆蓋住內(nèi)容或者觸發(fā)了不需要的滾動(dòng)條。

◆ 簡(jiǎn)單清除方法使用了一個(gè)聰明的 css 偽選擇符(:after)來(lái)清除浮動(dòng)。比起在父元素上設(shè)置  overflow，只需要給它增加一個(gè)額外的類似于”clearfix”的類。這個(gè)類使用如下 css:

.clearfix:after {                     content: ".";                     visibility: hidden;                     display: block;                     height: 0;                     clear: both;

這會(huì)在清除浮動(dòng)的父元素之后應(yīng)用一點(diǎn)看不見(jiàn)的內(nèi)容。這不是全部?jī)?nèi)容，還需要一些額外的代碼來(lái)適應(yīng)那些老舊的瀏覽器。

不同的情況需要不同的浮動(dòng)清除方法。以一個(gè)具有不同樣式塊的網(wǎng)格為例。

為了從視覺(jué)上較好的把相似的塊聯(lián)系起來(lái)，需要在必要的地方開(kāi)啟新行，這里是顏色改變的地方。如果每個(gè)顏色組都有一個(gè)父元素的話，我們可以使用 overflow  或者 簡(jiǎn)單清除方法?；蛘撸诿拷M之間用一個(gè)空div方法。額外的 div 之前并不存在，可以自己試試來(lái)看看哪個(gè)方法好。

浮動(dòng)的問(wèn)題

浮動(dòng)因脆弱而飽受詬病。大多數(shù)的脆弱性來(lái)自于 IE6 及其一系列的浮動(dòng)相關(guān) bug。因?yàn)樵絹?lái)越多的設(shè)計(jì)師不再支持 IE6  了，你也可以不關(guān)注它了。不過(guò)對(duì)于那些要關(guān)注的人來(lái)說(shuō)，這里有些大概。

◆ 推倒是浮動(dòng)元素內(nèi)的元素(大多是圖片)比浮動(dòng)元素本身寬造成的現(xiàn)象。大多數(shù)的瀏覽器會(huì)在浮動(dòng)之外渲染圖片，但是不會(huì)有伸出來(lái)的部分影響其他布局。IE  會(huì)擴(kuò)展浮動(dòng)來(lái)包含圖片，精彩大幅度地影響布局。一個(gè)普遍的例子是突破伸出主內(nèi)容之外把側(cè)欄推到下面。

◆ 快速修正：確保不是圖片造成這種情況，使用 overflow:hidden 來(lái)切除多余的部分。

◆ 雙倍邊距bug處理 IE6 時(shí)，另一個(gè)需要記住的事情是，如果在和浮動(dòng)方向相同的方向上設(shè)置外邊距(margin)，會(huì)引發(fā)雙倍邊距?？焖傩拚航o浮動(dòng)設(shè)置  display:inline; 而且不用擔(dān)心，它依然是塊級(jí)元素。

◆ 3像素間距是指挨著浮動(dòng)元素的文本會(huì)神奇的被踢出去3像素，好像浮動(dòng)元素的周圍有一個(gè)奇怪的力場(chǎng)一樣?？焖傩拚涸谑苡绊懙奈谋旧显O(shè)置寬度或高度。

◆ IE7 中，底邊距 bug是當(dāng)浮動(dòng)父元素有浮動(dòng)子元素時(shí)，這些子元素的底邊距會(huì)被父元素忽略掉。快速修正：用父元素的底內(nèi)補(bǔ)白(padding)代替。

接著我們繼續(xù)說(shuō)明其他用于定位的元素

position常用的屬性如下(static為默認(rèn)屬性)

其中absolute和fixed都會(huì)使元素不再遵循流的布局方式。而relative還會(huì)使元素繼續(xù)遵循流的方式，只是使其定位于相對(duì)于其在流中的位置的相對(duì)位置上。我們先看一下relative的效果。

 a      A     B     
C
  
c
d
e
f
 

上述代碼中，我們指定了A元素在其流中位置向右30px，這個(gè)變化并不會(huì)影響到B元素在流中的布局。

好后面我們關(guān)鍵介紹absolute和fixed屬性。

absolute屬性

我們用一段代碼和截圖來(lái)直觀的體驗(yàn)一下

a
     b     
c
     
d
     
e

從上圖看到，我們?yōu)閎元素定義了position為absolute,并指定其離左邊50px(這個(gè)50px是距離屏幕邊界，如何相對(duì)于其父元素定位，后面有詳細(xì)介紹)。由于指定了absolute屬性，則b元素已經(jīng)不再?gòu)膶儆诹?，因此流按照acde的方式進(jìn)行排列。

上述代碼中有一個(gè)疑問(wèn)，我們指定了b元素為absolute,但并沒(méi)有指定b的top坐標(biāo)，那為什么b元素顯示在目前這個(gè)位置呢?這個(gè)可以這樣理解，每一個(gè)元素可以使用top  left right bottom四個(gè)位置進(jìn)行定位，b元素在流中的時(shí)候，瀏覽器為其計(jì)算了top left right  bottom四個(gè)位置值，當(dāng)我們指定了absolute和left屬性時(shí)，引擎直接修改了left和right屬性，但top和bottom還使用了之前流中的位置，因此b元素會(huì)在目前屏幕中這個(gè)位置顯示。如果我們?cè)贋閎元素指定top或bottom屬性，則b元素將會(huì)變更位置，按照指定位置顯示。left和bottom、top和bottom是一組屬性，當(dāng)我們指定了left，則right自定按照width-left獲得，如果指定了right，則left按照width-right獲得，當(dāng)同時(shí)指定了left和right則按照l(shuí)eft處理。top和bottom同理。

absolute屬性會(huì)使元素根據(jù)相對(duì)于 static  定位以外的***個(gè)父元素進(jìn)行定位。這段話如何理解呢?請(qǐng)參看如下代碼，了解子元素使用absolute的效果

a
     b     
cccc
     
d
     
e

上述代碼中我們?cè)赾元素內(nèi)指定了元素ccc，ccc元素使用absolute定位，指定了其left=20px。但從上述截圖中我們看到ccc元素指定的20px并不是距離c元素左邊界20px而是距離整個(gè)屏幕邊界，也就是body的邊界20px。這就是由于c元素默認(rèn)position屬性為static，body默認(rèn)的position屬性也是static，因此ccc元素并沒(méi)有依據(jù)c的位置也沒(méi)有根據(jù)body進(jìn)行定位而是根據(jù)屏幕位置進(jìn)行了定位。好，我們修改一下c元素的posiiton屬性看看效果。

a
     b     c         ccc     
d
     
e

上述代碼中，我們指定了c元素的定位屬性為relative，這時(shí)，ccc元素屬性為absolute時(shí)，就根據(jù)了c元素的邊界進(jìn)行了定位。那如果c元素也是absolute定位該是什么效果呢?

a
     b     c         ccc          
d
     
e

上述代碼中我們修改了c元素為absolute定位，左邊距80px,可以看到ccc元素根據(jù)c元素定位后的位置進(jìn)行了相對(duì)定位。

fixed屬性

生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。

元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

這個(gè)屬性可以控制元素在硬件屏幕上的指定位置顯示，它不再?gòu)膶儆诹?，也不再使元素從屬于其父元素屬性進(jìn)行定位，而是直接根據(jù)硬件屏幕進(jìn)行定位。這個(gè)屬性主要用于超出瀏覽器窗口的網(wǎng)頁(yè)時(shí)，保持某些元素永遠(yuǎn)浮動(dòng)于屏幕的制定位置。我們舉一個(gè)事例來(lái)看他的效果。

111
     
222
     
333
     
444
     
555
     
111
     
222
     
333
 ... ... ... ... ... ...     
444
     
555
     I am fixed

我們建立多個(gè)div條目使其超出屏幕容納范圍，然后加入一個(gè)fixed的元素，并指定其位置。然后滾動(dòng)屏幕，可以看到不論網(wǎng)頁(yè)怎么滾動(dòng)，fixed元素始終在屏幕指定的物理位置。從上面看出，fixed屬性在界面設(shè)計(jì)中是非常關(guān)鍵的功能，但遺憾的是在android2.2以下和iOS5.0以下平臺(tái)都不支持這個(gè)屬性。在AppCan平臺(tái)，我們提供了幾種機(jī)制來(lái)實(shí)現(xiàn)相關(guān)的類似功能。具體可以參考我們相關(guān)的網(wǎng)站。

通過(guò)上面的講述，我們已經(jīng)知道了比較常見(jiàn)的幾種用于布局的屬性，來(lái)實(shí)現(xiàn)元素的定位。但這些屬性還不能夠完成我們對(duì)界面的布局要求，還要與其他相關(guān)定位屬性進(jìn)行結(jié)合。下面我們就對(duì)這些屬性進(jìn)行分析。

之前的事例中我們發(fā)現(xiàn)，div元素本身的大小，完全根據(jù)其子元素的高寬來(lái)支撐的，但實(shí)際情況是我們希望為d  iv元素本身設(shè)定一個(gè)大小高寬位置，然后在其中排布子元素。下面是幾種方案

在流中的div元素會(huì)完全忽略top, bottom, left,  right,width,height這些屬性，因此無(wú)法為流中的div元素指定大小位置等信息。在這種情況下如果需要調(diào)整div的高寬值，我們可以使用padding屬性、min-height、max-height、min-width、max-width來(lái)處理。我們一一進(jìn)行介紹

padding 屬性是用來(lái)指定一個(gè)元素的內(nèi)邊距。一個(gè)元素的寬度可以認(rèn)為是"

寬度=左邊框?qū)挾?左側(cè)內(nèi)邊距+內(nèi)容寬度+右側(cè)內(nèi)邊距+右邊框?qū)挾?，就如下圖所示。下圖中的margin屬性是元素與其他元素間的間隔也就是外邊距。

padding屬性的衍生屬性有padding-top padding-bottom padding-right  padding-left，分別制定四個(gè)邊距。

那么我們?nèi)绾问褂胮adding  來(lái)調(diào)整div的高寬呢，很簡(jiǎn)單直接為Padding指定數(shù)值即可。從上面的公式可以看出，如果希望寬度固定，再指定了邊框?qū)挾群瓦吘鄬挾群螅瑑?nèi)容寬度也就必須是定值。因此，使用padding來(lái)調(diào)整高寬時(shí)，常用在固定高寬的場(chǎng)景中。下面舉一個(gè)事例。

111   

上面事例中我們看到，我們?cè)O(shè)定了padding屬性為80px,也就是說(shuō)111元素外圍四個(gè)邊內(nèi)邊距都為80px，這時(shí)我們?yōu)閕mg子元素指定了絕對(duì)定位left:0px  top:5px。介紹一個(gè)定位的小技巧，上面的google圖片我們希望他居于左側(cè)并且縱向居中，該如何做呢?

111   

上面的代碼中，我們?yōu)閳D片指定了top位置為其父元素的50%位置(父元素Position要設(shè)定為非static)，但這指定了圖片的左上角位置在50%，圖片還是不居中，這時(shí)我們?yōu)閳D片指定了上外邊距為-15px，也就是圖片高度的一半，圖片會(huì)再上移15點(diǎn)，達(dá)到居中的效果。其實(shí)公式很簡(jiǎn)單  positionY=divHeight*50%-imgHeight*50%

下面是一個(gè)padding復(fù)雜應(yīng)用效果的范例截圖

上面我們使用padding來(lái)控制元素的高寬，但在元素包含內(nèi)容會(huì)出現(xiàn)變化的情況下，想固定高寬，padding已經(jīng)不能夠勝任。這時(shí)我們會(huì)用到min-width、max-width、min-height和max-height屬性。我們看下面的min-height事例，來(lái)了解其使用效果。

     111
222
           

上述的范例中，我們?yōu)閐iv制定了左側(cè)內(nèi)邊距80px用于容納圖片，高度指定了最小高度100px，這時(shí)我們可以看到，即使內(nèi)容高度發(fā)生了變化，div高度還是100px。但這個(gè)范例里只加入了111  222兩個(gè)內(nèi)容部分，如果內(nèi)容部分高度超過(guò)了100px，會(huì)出現(xiàn)什么情況呢?

div被撐開(kāi)，如何避免這種問(wèn)題呢?看如下代碼

     111
222
           

與之前代碼相比，我們?yōu)閐iv指定了max-height屬性，來(lái)控制其***高度，避免內(nèi)容超出區(qū)域時(shí)撐大div,同時(shí)指定了overflow屬性，避免顯示到div外側(cè)(overflow屬性在不同的手機(jī)平臺(tái)上和平臺(tái)的不同版本中，支持度也是不同的，auto和scroll屬性基本都不會(huì)被支持。因此，如果希望在div內(nèi)部實(shí)現(xiàn)滾動(dòng)效果，目前瀏覽器原始功能還是不能夠?qū)崿F(xiàn)的)

上邊的事例中我們都使用的是px作為長(zhǎng)度高度單位，但是在手機(jī)應(yīng)用研發(fā)中，面對(duì)的手機(jī)硬件屏幕尺寸、分辨率等類別非常多，如果使用px作為度量單位，會(huì)造成在低分辨率手機(jī)顯示正常的元素，在高分辨率上顯示的非常小而無(wú)法讓用戶操作，或者在高分辨率手機(jī)的屏幕上顯示正常，但在低分辨率屏幕上又過(guò)大無(wú)法完全展示。對(duì)于這種情況，我們推薦，在手機(jī)應(yīng)用研發(fā)中，網(wǎng)頁(yè)內(nèi)部的度量單位都使用em。什么是em呢?假如當(dāng)前網(wǎng)頁(yè)的默認(rèn)字體是12px，那么0.5em就是6px，如果字體是32px那么0.5em就是16px。em是當(dāng)前字體大小相對(duì)單位。這樣，我們只需要為頁(yè)面在不同分辨率的手機(jī)指定不同的字體大小，而頁(yè)面內(nèi)部元素都指定em為單位，即可做到在不同分辨率上保持相近的效果。那如何來(lái)為每個(gè)頁(yè)面指定字體呢，我們使用media  query屬性。下面代碼摘錄于AppCan UI框架包

@media all and (min-width:340px) and (min-height:620px),(min-width:620px) and (min-height:340px) {     html     {         font-size:20px;     }     .ui-block-auto     {         width:33.333%     } }  @media all and (min-width:420px) and (min-height:760px) and (max-height:900px),                (min-width:760px) and (max-width:900px) and (min-height:420px) {     html     {         font-size:24px;     }     .ui-block-auto     {         width:33.333%     } }  @media all and (min-width:1000px) and (min-height:740px),(min-width:740px) and (min-height:1000px) {     html     {         font-size:20px;     }     .ui-block-auto     {         width:20%     } }

從上述代碼中，我們可以看到如何為不同分辨率的屏幕指定字體的。但這又衍生出了另一個(gè)問(wèn)題，當(dāng)手機(jī)進(jìn)行橫豎屏進(jìn)行切換時(shí)，手機(jī)認(rèn)為分辨率發(fā)生了變化，這時(shí)會(huì)造成上述media適配出現(xiàn)適配到其他分辨率的情況，有可能手機(jī)豎屏?xí)r布局正常變成橫屏?xí)r，真?zhèn)€布局發(fā)生了放大或縮小，字體也出現(xiàn)了變化。如何解決這種問(wèn)題呢?有幾種方法

1.如果軟件只需要在豎屏使用，AppCan平臺(tái)為應(yīng)用提供了配置選項(xiàng)，只需要在調(diào)整一下配置即可使應(yīng)用不再轉(zhuǎn)屏。

2.如果應(yīng)用需要轉(zhuǎn)屏支持，可以在網(wǎng)頁(yè)中加入下述代碼

document.body.style.fontSize=window.getComputedStyle(document.body,null).fontSize;

上述代碼的作用是為body的style指定字體，而字體是由瀏覽器計(jì)算得來(lái)的。由于style屬性優(yōu)先級(jí)高于CSS類，因此，可以使手機(jī)旋轉(zhuǎn)時(shí)的適配無(wú)效，保證手機(jī)界面不管橫豎屏始終保持一種字體。

3.如果應(yīng)用需要支持旋轉(zhuǎn)屏，并且確認(rèn)軟件只運(yùn)行于指定的手機(jī)分辨率上，可以調(diào)整media query，使其對(duì)橫豎屏情況進(jìn)行分別適配。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對(duì)創(chuàng)新互聯(lián)的支持。