响应式布局网站实例(原创文章)

5/7/2014来源:Photoshop教程人气:4279

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。


知道什么是响应式布局了,接下来如何应用到网站上面呢?


因为响应式布局的网站都是根据浏览器分辨率以及不同移动设备大小,而适应的一种写法,知道原理那么就可以实现响应式布局的网站的排版了


主要是通过通过Media Queries实现响应式布局设计


 /* 当浏览器的可视区域小于980px */
@media screen and (max-width: 980px) {
    样式代码
}
 /* 当浏览器的可视区域小于650px */
@media screen and (max-width: 650px) {
   样式代码}

通过上面我们就可以监测浏览器的可视区域变化的是时候我们的页面结构元素也会相对应的变化,当然你可以再多设置几个尺寸的监测层叠样式表,这样子就可以根据不同尺寸设备来进行响应式的布局。


以下是不同设备环境网站页面的浏览效果,如果要实现到最佳的浏览效果,提高更好的用户浏览习惯,这个必须要花时间,罗马不是一天建成的吧!呵呵 估计你们都懂:



以下是手机分辨率为-320-480的模拟环境下的效果:


以横区域观看的效果




以下是平板电脑分辨率为-768-1024的模拟环境下的效果: