响应式布局的关键在于 css的媒体查询
@media screen and (width:xxx)
所以支持@media的浏览器都可以，html版本没关系追问
@media screen and （max-width： 980px） {
#wrap {width： 90%; margin:0 auto;}
#content {width： 60%;padding： 5%;}
#sidebar {width： 30%;}
#footer {padding： 8% 5%;margin-bottom： 10px;}
}
/* 当浏览器的可视区域小于650px */
@media screen and （max-width： 650px） {
#header {height： auto;}
#searchform {position： absolute;top： 5px;right： 0;}
#content {width： auto; float： none; margin： 20px 0;}
#sidebar {width： 100%; float： none; margin： 0;}
}
@media screen and (width:xxx)
所以支持@media的浏览器都可以，html版本没关系追问
@media screen and (width:xxx)｛这里放的是不同视口的css样式是吧？那么如果缩小窗口页面的布局发生变化怎么办呢？谢谢！！｝
追答那么如果缩小窗口页面的布局发生变化怎么办呢？
你这是指什么？
实际你要写多套不同宽度布局的css，例如：
/* 当浏览器的可视区域小于980px */@media screen and （max-width： 980px） {
#wrap {width： 90%; margin:0 auto;}
#content {width： 60%;padding： 5%;}
#sidebar {width： 30%;}
#footer {padding： 8% 5%;margin-bottom： 10px;}
}
/* 当浏览器的可视区域小于650px */
@media screen and （max-width： 650px） {
#header {height： auto;}
#searchform {position： absolute;top： 5px;right： 0;}
#content {width： auto; float： none; margin： 20px 0;}
#sidebar {width： 100%; float： none; margin： 0;}
}
类似这样。
一般的响应式针对3种尺寸：桌面／平板／手机，大概范围都可以查到。
温馨提示：内容为网友见解，仅供参考
无其他回答
相似回答
