用@Media查詢改變主題

-5

我在我的頁面上有一個div;這個div在桌面視圖中包括img（頂部div）和文本（div底部）;我想要移動視圖，img和文本內聯。你可以幫我嗎？ enter image description here 用@Media查詢改變主題

我的代碼：

<div class="ph-cnt mui--z2 col-lg-2 col-lg-offset-1 col-md-2 col-md-offset-1 col-sm-10 col-md-offset-1 col-xs-10 col-xs-offset-1 "> 
<div class="img-ph-cnt " align=center> 
    <img src="img/telephone-operator.svg" alt="Phone" width="100px" class="img-responsive"> 
</div> 
<div class="content-ph-cnt" align=center> 
    <h4>Phone</h4> 
    <h2>00225555</h2> 
    <h4>fax</h4> 
    <h2>1223456</h2> 
</div>

來源

2017-08-11 iMohammad

你嘗試過什麼？ – jhpratt

使用媒體查詢。你的頭銜就是答案。按照在這裏詢問，看看這個：[mcve]和這個：[問] –

檢查這個小提琴

https://jsfiddle.net/yogesh078/owukasna/

<div class="container"> 
<div class="image imageresponsive border img-ph-cnt " align=center> 
IMAGE 
</div> 
<div class="text imageresponsive border img-ph-cnt " align=center> 
Text 
</div>

CSS：

.border 
{ 
    border: 1px solid red; 
} 
.text 
{ 
    height:50px; 

} 
.image 
{ 
    background:black !important; 
    height:50px; 
    color:#FFF; 
} 
@media (min-width:641px) { 
    .imageresponsive 
    { 
    width: 50%; 
    float:left; 
    } 
} 
@media (min-width:1281px) 
{ 
    width: 100%; 
} 


@media (min-width:320px) { /* smartphones, 480x320 phones */ } 
@media (min-width:481px) { /* smaller tablets @ 600 or @ 640 wide. */ } 
@media (min-width:641px) { /* portrait tablets, landscape e-readers, landscape 800x480 */ } 
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ } 
@media (min-width:1025px) { /* big landscape tablets, laptops and desktops */ } 
@media (min-width:1281px) { /* resolution laptops and desktops */ }

我也有提供媒體查詢使用不同的設備，根據您可以在移動類，並相應修改

來源

2017-08-11 13:36:09 Yogesh

用@Media查詢改變主題

回答

相關問題