Web响应式(一)

内容:

  • 什么是响应式Web?
  • 如何确定浏览器是否支持
  • 响应式例子
  • 图片跟随窗口缩放

一、什么是响应式Web?

“响应式Web设计”这个名字是Ethan Marcotte在2010年发明的。当时,他在A List Apart上写了一篇文章这篇文章综合运用了三种已有技术(弹性网格布局、弹性图片/媒体、媒体查询)实现了一个解决方案,就叫“响应式Web设计”。

总的来说响应式设计就是网页的内容随着访问网页设备的窗口的大小不同而呈现不同的样式。
如:电脑、手机的窗口大小


二、如何确定浏览器是否支持

参考这个网站:http://caniuse.com


三、响应式例子

github官网:https://github.com/


四、图片跟随窗口缩放

设置图片css属性,max-width:100%;
max-width:100%与width:100%区别:前者是基于图片本身的宽度,后者是基于父元素的宽度。

posted @ 2022-11-01 15:08  发生什么事了?  阅读(58)  评论(0编辑  收藏  举报