2017-04-05 80 views
0

所以我使用flexbox在一個大屏幕上顯示一組連續的部分,然後一個顯示在另一個上面,當屏幕是做得更小。 這適用於我的電腦,當我在Chrome瀏覽器上使用移動模擬器時,當我使用手機上的任何瀏覽器(Safari,Chrome,Firefox)時,它會調整它的大小,因此兩個部分彼此相鄰,從而使字太小而無法閱讀。我怎樣才能讓手機瀏覽器獨自留下一個元素

現在我嘗試添加此:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 

但是,隨着頁面的其餘部分的格式混亂。 有什麼類似的,但只有一個元素?

+1

歡迎來到StackOverflow,您的問題應該包含一個[最小,完整和可驗證的示例](http://stackoverflow.com/help/mcve)。 – hungerstar

+0

它應該在任何地方工作,但你沒有顯示任何標記幫助我們。 – Rob

+0

好吧,如果你需要一個例子,你去。 雖然沒什麼特別的。 http://codepen.io/bobbrom/pen/rygNeM –

回答

0

您可以使用媒體查詢來使行爲僅出現在某些分辨率上,因此它只能在移動設備上運行。以下媒體查詢將在所有電話上運行包含的樣式。

@media only screen and (max-width:766px) { 
    .myClass {width:100vw;display:block;} 
} 
+0

是的,我在想,但它破壞了使用flexbox的關鍵點不是嗎? –

+0

聽起來像在這種情況下,他希望flexbox忽略這一個實例。那爲什麼不呢? – Maarten

+0

@BobbyBromfield不,「flexbox」不會取代媒體查詢。 – LGSon