响应式布局

首先,什么是响应式布局呢?

响应式布局是2010年5月提出的一个概念,简单地说就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本。这个概念是为了解决移动互联网浏览器而产生的,目的是为用户提供更加舒适的界面以及良好的用户体验。

优点:

1.面对不同分辨率设备灵活性强

2.能够方便的解决多设备显示适应问题

缺点:

1.兼容各种设备工作量大,效率低下。

2.代码累赘,会出现隐藏性没有用的元素,加载时间长

大家先来了解一下css3 中的MEDIA QUERY:

(一)简单的响应式了解

html代码:

css代码:

效果展现如下:

a.浏览器窗口宽度大于640px(为792px:)

b.浏览器窗口宽度小于640px(为574px)

(二)一个稍微复杂的实例

html代码:

css代码:

各个div颜色自己设置,在此不再多说,只展示一下@media 的部分

a.浏览器窗口宽度大于960px时,下面的图进行了缩小:

b.浏览器窗口宽度小于960px大于600px时,下面的图进行了缩小:


c.浏览器窗口宽度小于600px时,下面的图进行了缩小:


注:低端浏览器不支持css3,用js实现。


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页