说明:bootstrap
需求:
1.在最大的div里面有div1 /div2 /div3。
其中,div1和div2是一样的内容块,里面有图片和文字信息。 div3是侧栏,内容和高度不变。如下图。
2.当web窗口变小时,div1和div2里面的内容会自适应把内容往下排列,如下图。
3.需要的最终效果是
代码如下:
如:对文字大小 .station-msg-basic-layout02-val { @media (max-width: 1650px) { font-size:16px; color:#00031a; padding-right: 5px; padding-top: 5px; font-weight: bold; } //窗口小于等于1650px,文字字号16px @media (min-width: 1651px) { font-size:30px; color:#00031a; padding-right: 10px; padding-top: 5px; }//窗口大于等于1651px,文字字号30px @media (max-width: 980px) { font-size:30px; color:#00031a; padding-right: 10px; padding-top: 5px; }//窗口小于等于980px,文字字号30px }
如:对图片大小
.svg-class { @media (max-width: 1650px) { width: 24px; height: 24px; } @media (max-width: 980px) { width: 60px; height: 60px; } @media (min-width: 1651px) { width: 60px; height: 60px; } }