响应式CSS-不同大小的不同布局 [英] Responsive CSS- Different Layout for Different Size

问题描述

因此，我基本上希望网站上的页面具有2种不同的布局.

So, I basically want to have 2 different layouts for a page on my website.

对于400像素以下:

1. [图像]

1. [image]

说明

[图像]

说明

对于400像素以上:

1. [图像]说明
2. [图像]说明

(因此，图像和文本在同一行上)

(so, the image and the text are on the same line)

我知道，如果我的断点是预定义的断点之一，那么使用Bootstrap可以很容易地做到这一点，但事实并非如此.那么，最好的方法是什么?我还能使用Bootstrap网格系统并以某种方式破解"它还是完全做其他事情?

I know I can do this very easily with Bootstrap if my breakpoint was one of the predefined ones, but it is not. So, what would the best approach be? Could I still use Bootstrap grid system and 'hack' it somehow or do something else altogether?

谢谢！

推荐答案

以下是代码段

/*screen width over 400px*/
@media (min-width: 401px){
img {
  width:50px;
  height:50px;
  }
p{
  display:inline;
}
}
/*screen upto 400px*/
@media (max-width: 400px){
img {
  width:100px;
  height:100px;
  }
}

<img src='https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcSSHCRPXAtpOWvSaR4T5ecblzIT-RdIV19VjNB4uUPPnEq_UT5r'>
<p id='p1'>
description
</p>
<img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQEaoUONNbTby87bfUNcRrdufGcaLSbDnC3SGSqKLk1ZwNFMEE3'>
<p id='p2'>
description
</p>

这篇关于响应式CSS-不同大小的不同布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！