用@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查询改变主题

回答

相关问题