响应式设计简单说呢就是针对不同的屏幕分辨率应用不同的CSS样式,这里有两个关键点:
一是如何在不修改DOM结构的前提下调整布局
二是如何判断屏幕分辨率并应用对应的CSS
以上两点应该不依赖于JS.
(1) 实现第一点依靠的是流式布局,就是所有参与布局的DIV都用float:left,宽度都用百分比表示
图一
图二
如上两个图所示,黄色DIV的宽度是60%,粉丝DIV宽度为40%,如果将黄色和粉色的宽度都改为 width=100%,那么从一行变成了2行。从而实现了不修改DOM实现布局变化
(2) HTML5提供了一种新的CSS语法——@media,学名是media Query,可以为不同的分辨率设定不同的样式CSS
@media only screen and (max-width:320px){
#head{width:100%;}
}
上段代码含义就是当屏幕宽度小于等于320px时应用大括号中的样式。
@media only screen and(min-width:321px) and (max-width:480px) and (orientation:landscape){
//样式代码
}
上段代码针对phone横屏的。宽度在321~480px之间,且“横向”的
除了上述两点,还需要在页面上增加一个viewport的meta标签,否则在手机上可能会有页面自动缩放的情况:
<meta name="viewport" content="width=device-width;initial-scale=1.0">
总结:响应式布局有三个关键点:
1.流式布局 Liquid Layout
2.媒体查询 Media Query
3.Viewport