在 WordPress 中制作可堆叠的两列
making stackable two columns in WordPress
我正在使用一个应该响应式的主题,但是当使用两列短代码并在较小的浏览器或移动设备上查看页面时,列会缩小以并排适应浏览器的宽度,而不是堆叠。
在智能手机上看起来很糟糕,我正在尝试使列堆叠。
您可以在以下位置查看该页面:http://goo.gl/t8QOA5
相关css:
.one_half {
float:left;
line-height:22px;
margin-right:2%;
width:49%;
margin-bottom:27px;
display:block
}
.one_half_last {
float:left;
line-height:22px;
width:49%;
margin-bottom:27px;
display:block
}
使用媒体查询根据视口的宽度编写条件css。
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
示例:
@media (max-width: 480px) {
.one_half, .one_half_last {
width: 100%;
}
}
我正在使用一个应该响应式的主题,但是当使用两列短代码并在较小的浏览器或移动设备上查看页面时,列会缩小以并排适应浏览器的宽度,而不是堆叠。
在智能手机上看起来很糟糕,我正在尝试使列堆叠。
您可以在以下位置查看该页面:http://goo.gl/t8QOA5
相关css:
.one_half {
float:left;
line-height:22px;
margin-right:2%;
width:49%;
margin-bottom:27px;
display:block
}
.one_half_last {
float:left;
line-height:22px;
width:49%;
margin-bottom:27px;
display:block
}
使用媒体查询根据视口的宽度编写条件css。 https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
示例:
@media (max-width: 480px) {
.one_half, .one_half_last {
width: 100%;
}
}