目前,我根据使用的屏幕大小来不同地管理CSS代码,并且效果很好:
@media only screen and (max-width: 40em) {
my code
}
现在,我要实现的目标是根据屏幕分辨率将一段html代码放置在不同的位置。
例如,我的div id =“ news_box”将放置在桌面上的标头包装中。而在手机上,div id =“ news_box”将放置在页脚包装中。
我该如何实现?
非常感谢,
最佳答案
据我所知,没有办法使用DOM
来操纵CSS
,但是您可以使用JavaScript hack:
window.addEventListener('load', function(){
var width = this.innerWidth;
if(width < 400) {
document.getElementById('footer-id').appendChild(document.getElementById('news_box'));
}
});
或者,也许给它分配一个类,并使该元素同时出现在页眉和页脚中(尽管您希望更改ID):
#footer-id .news_box {
display: none;
}
#header-id .news_box {
display: block;
}
@media only screen and (max-width: 40em) {
#footer-id .news_box {
display: block;
}
#header-id .news_box {
display: none;
}
}