那些年,我们一起玩过的响应式布局

简介:

 博客园的资源很丰富,也很精彩。不过这些精彩的东西放到一些移动终端上阅览就不堪入目了,体验相当不好

  

 你可以忍受每一次打开博客,还得放大屏幕阅读么?整个屏幕都挤满了很小很小的文字,反正我是受够了。

 所以,我们需要改变!!! 先看看什么是响应式布局,你所看的这篇文章就是采用响应时布局~ 现代浏览器才能看到效果

 

什么是响应式布局

我的理解就是,为了让用户享受更好的体验效果,给用户展现最有价值的信息,让同一个页面在不同终端上有不一样的展现效果。比如你正在阅读的这篇博客,当你缩小(放大)浏览器窗口时(先滚动顶部,因为顶部做了比较多的修改,效果比较明显),你会看到这些神奇的效果。

正常情况下,顶部是这样的:

稍微缩小一点,是这样的:

  • 变化一:about那个块不见了
  • 变化二:浮动的推荐&反对框偏移了

再缩小一点

  • 变化一:背景图片不见了
  • 变化二:右侧sidebar块跑到文章下面去了

还可以再小一点

  这个变化就相当大了,很多东西都不见了,元素的位置也改变了

  那么,什么是响应式布局,你有了一定的理解么~

 

技术什么的不是关键,关键是设计

  技术太普遍了,大家都会用,可是真正让用户感到舒适的,还是好的设计我是这样考虑的:

1. 屏幕分类:

  根据移动终端的尺寸(分辨率),我大概做了这么些分类:

  ←480px   481px~700px   701px~960px   961px→

  首先搞清楚你的用户群所使用的终端类型和比例,这是2012年第二季度的统计数据

  iPhone、Nokia、HTC、Samsung和Moto 五个品牌的移动终端位居前五位,占比分别为22.13%、13.98 和11.69%、10.87% 和7.47%,其次为Huawei、Sony 和ZTE 等。

  感兴趣的话,可以去搜搜这些终端的分辨率是多少,然后针对这些数据做一个分类~我不多说了。

 

2. 不同的需求

  一个比较小的屏幕能够容纳多少数据,展现多少信息,这一点必须把握住,比如当设备宽度是480像素的时候,我们没必要展现太多的信息,因为你展现出来用户也不会看,这些冗余信息只会影响用户对信息主次的判断,甚至他们会觉得这些冗余信息太多,而跳过你的内容

  我的设计是这样的:

 我的页面只包括这些内容,像随笔分类、随笔档案,友情链接,推荐链接等,这些信息又多又占空间,应该去除!

 再比如:刚开始的时候,那个推荐&反对的块及贴在文章的右侧,当窗口缩小之后,我把他放到了右下角,再小些,为了展示更多的内容,直接把他给隐藏了~

 

关于技术

技术核心是Media Query,网上都说烂了。

给推荐两篇博文:

这两个博客的布局也是响应式布局

 

需要注意的几个点:

  1. head中记得加上这句话:

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

  如果不加,效果就是本文第一章图所示,文字会很小很多的挤在一个页面上。

 

  2. media query虽然好用,但是低版本IE不支持,不要纠结,咱把他给忽视掉~O(∩_∩)O~

  如果你太固执一定要考虑的话,推荐这个:https://code.google.com/p/css3-mediaqueries-js/

<!--[if lt IE 9]>
     <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js">
</script> <![endif]-->

  把这句话加到你的代码顶部,我试过了,相当不好用,响应式效果甚微。

 

关于测试工具

  1. 这个网站,你可以试试,戳测试工具

  2. chrome下有一个插件,叫做Moblile/Tablet Divice Testing,下载地址:戳我

 

本文响应式布局代码

说了半天,有些童鞋可能等不及想去试试了~

晒晒我弄的几行代码,有兴趣的可以参考下:../file/media-480.css

  meida query

 

小结

  响应式布局是这几年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,响应式布局显得十分重要。设计虽好,我觉得也存在诸如一下的一些弊端

  1. 页面需要加载更多额外的内容,比如我们的手机看这个页面的话,体验效果还行,但是那些次要的内容依然被加载进来了,没看看见是因为被我display:none给隐藏了。所以,如果想得到好的用户体验,同时节省流量的话,应该在加载之前做一些判断。

  2. 还是存在兼容性问题,要知道,现在IE6-8所占的市场份额仍然在40%+,这么庞大的用户群我们暂时是不能忽略的,若引用其他的JS来矫正,这个太费资源,不可取,而且事实表明这些JS并不好用。

 

P.S:本文图片都是直接截屏,没有做优化处理,整个页面体积过于庞大,看来图片的优化和lazyload很有必要啊!!!下次弄一个简洁版的lazyload用用~~

 最后。。。来一张萌图,哈哈哈~






本文转自Barret Lee博客园博客,原文链接:http://www.cnblogs.com/hustskyking/p/responsive-web-desigin.html,如需转载请自行联系原作者

目录
相关文章
|
28天前
|
前端开发 JavaScript 容器
响应式布局
# 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。
|
2月前
移动端的布局如何使用媒体查询
移动端的布局如何使用媒体查询
28 2
|
3天前
|
编解码 前端开发 JavaScript
现代前端开发中的自适应布局与响应式设计
【2月更文挑战第10天】在当今移动设备和不同屏幕尺寸的普及下,前端开发中的自适应布局和响应式设计变得至关重要。本文将探讨现代前端开发中自适应布局的实现原理、响应式设计的优势以及实际应用中的最佳实践。
|
28天前
|
前端开发 JavaScript API
掌握CSS Flexbox,打造完美响应式布局,适配各种设备!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
2月前
|
编解码 前端开发
响应式设计布局要不要了解一下?
响应式设计布局要不要了解一下?
18 0
|
3月前
移动端开发—流式布局
移动端开发—流式布局
|
5月前
|
编解码 前端开发 Android开发
前端页面布局之【响应式布局】
前端页面布局之【响应式布局】
25 0
|
7月前
响应式布局的五种方法
响应式布局是同一页面在不同的屏幕上有不同的布局,即只需要一套代码使页面适应不同的屏幕。
|
7月前
|
开发框架 移动开发 前端开发
UniApp响应式布局
UniApp 是一款基于 Vue.js 开发的跨平台应用开发框架,可以同时构建 iOS、Android、H5 等多个平台的应用。在 UniApp 中,单位(Unit)是一个非常重要的概念,它决定了应用在不同设备上的布局和样式,要适应不同设备尺寸和屏幕方向的布局是一项艰巨的任务。UniApp 提供了多种方式来实现响应式布局。通过使用 Flex 布局、媒体查询、自适应单位和条件渲染,我们可以根据不同的屏幕尺寸和方向创建出适应性强的布局,从而提供更好的用户体验。
151 1
|
7月前
响应式布局--媒体查询
响应式布局--媒体查询
31 0