响应式布局的应用。要很好地实现响应式布局, 主要依赖的技术有:HTML5的Viewport, CSS3的Media Query和流式布局的技术。
通过CSS中的媒体查询Media Query来实现响应式布局, 其实就是达到不同的响应点 (多为屏幕分辨率) 时触发媒体查询中的代码, 所以我们还需对现有设备的屏幕分辨率进行了解后, 再对响应点进行合理的设置。
目前根据市场上主流终端的分辨率可以大致地进行如下的设置:PC端-大屏幕:至少1200px, 常规:至少960px;平板竖屏-至少768px, 手机到平板-至少767px, 手机-至多480px。当然这种设置会随着终端市场份额的改变而改变。有了对各种终端设备的响应点了解后, 就可以运用Media Query进行响应式布局的设计了。
