什么是响应式布局?

       今年很经常听到响应式布局,包括开始引入bootstrap作为前端UI的解决方案。到头来,对响应式布局的含意却一直是一无所知。

       百度了一下,响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

       用通俗的话来讲,所谓的响应式布局(Responsive Design),简单可以理解为自适应屏幕大小进行展示,并且获得比较好的体验。

       其中,浏览器的兼容是很大的一个技术点,而布局设计是一个设计难点。 如果将响应式布局简单理解为浏览器兼容又大合适,这样的技术在很多年前就已经有提出并有解决方案。以前的浏览器兼容,屏幕大小是相似的,操作习惯是相同的,所以兼容只要不用浏览器或者平台展示的样子一模一样就可以。

       而响应式布局并不是说要展现得一样。比如说菜单,在PC可以是左右布局,直接展示。而在手机上,不应该是PC上的缩小版,而应该是菜单屏展示,类似手机原生应用,这就是所谓的不同媒介的适应性体验。

      备记之。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
响应式布局(Responsive Web Design)是指在设计网站时,根据不同的设备屏幕大小和分辨率,自动调整网站布局和内容,以适应不同的设备和用户需求。下面介绍一些实现响应式布局的常用方法: 1. 使用 CSS 媒体查询:通过在 CSS 中使用媒体查询,可以根据不同的屏幕大小和分辨率,为不同的设备设定不同的 CSS 样式,以实现响应式布局。例如: ``` @media screen and (max-width: 768px) { /*在屏幕宽度小于等于 768px 时生效的 CSS 样式*/ } ``` 2. 使用流式布局:流式布局是指使用百分比等相对单位来设置元素的宽度和高度,以适配不同设备的屏幕大小。例如: ``` .container { width: 80%; max-width: 1200px; min-width: 320px; } ``` 3. 使用弹性盒子布局:弹性盒子布局(Flexbox)是 CSS3 中引入的一种新的布局方式,可以方便地实现响应式布局。通过设置容器的 display 属性为 flex,可以让容器内的子元素按照一定的规则布局,并根据屏幕大小和分辨率自动调整布局效果。例如: ``` .container { display: flex; flex-wrap: wrap; } ``` 4. 使用 CSS Grid 布局:CSS Grid 是另一种新的布局方式,可以更加灵活地实现响应式布局。通过将容器的 display 属性设置为 grid,可以将容器内的子元素划分为网格,并根据不同的屏幕大小和分辨率,自动调整网格的大小和位置。例如: ``` .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } ``` 总之,实现响应式布局需要结合多种方法和技术,开发者需要根据实际需求选择合适的方法,以达到最佳的页面布局效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值