加入收藏 | 设为首页 | RSS
您当前的位置:首页 > 在线留言

响应式布局

时间:01-24  来源:本站  作者:
  声明:百科词条人人可编辑,词条创建和修改均免费,绝不存在官方及代理商付费代编,请勿上当受骗

  声明:百科词条人人可编辑,词条创建和修改均免费,绝不存在官方及代理商付费代编,请勿上当受骗。详情

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

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

  我们在上面了解了什么是响应式布局,那在我们的实际项目中应该怎么去设计呢?在以往我们设计网站的时候都会受到不同浏览器的兼容性的困扰,还要来个不同尺寸设备,我们该怎么淡定下来呢?有需求就会有解决方案,说到响应式布局,就不得不提起CSS3中的Media Query(媒介查询),这可是个好东西,易用、强大、快捷……Media Query是制作响应式布局的一个利器,使用这个工具,我们可以非常方便快捷的制造出各种丰富的实用性强的界面。接下来就一起来深入的了解Media Query。

  最后,我们需要对我们刚刚设计的Media Queries进行测试,想要在不同设备上测试Media Queries的效果,可以使用一个浏览工具来检验不同尺寸屏幕下的显示效果,在这里为大家介绍一个不错的在线工具 – Responsivator,它可以模拟iPhone等各种不同设备,并且还可以自定义不同尺寸屏幕的显示效果,只需要输入一个url甚至是本地的一个url(如:),就可以看到网站在不同尺寸屏幕下的显示效果。

  好了,我们明白了什么是Media Query,那我们一起来运用到响应式布局的设计项目中去。设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024px的时候,则通过Media Query预设的样式表来将页面的宽度设置为百分比显示,这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理,当浏览器的可视区域改变到某个值(假如为650px)的时候,页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子:

  #footer {padding: 8% 5%;margin-bottom: 10px;}

  #searchform {position: absolute;top: 5px;right: 0;}

  #content {width: auto; float: none; margin: 20px 0;}

  #sidebar {width: 100%; float: none; margin: 0;}

  通过上面我们就可以监测浏览器的可视区域变化的时候我们的页面结构元素也会相对应的变化,当然你可以再多设置几个尺寸的监测层叠样式表,这样子就可以根据不同尺寸设备来进行响应式的布局。为了更好的显示效果,我们往往还要格式化一些CSS属性的初始值:

  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {

  最后要注意的是在页面的头部head/head之间加上下面这句∶

  meta name=“viewport” content=“width=device-width; initial-scale=1.0”

  /*small_screen480.css即为对480px大小移动终端书写的css文件*/

  css文件被区分引用,接下来的工作就是我们非常熟识的弹性布局了,另外再注意俩点,一是图片,在移动设备上,要做一些特定适合的小图片来匹配,如果单纯使用压缩的图片会失真,影响用户体验;二是在头部加入如下代码,目的是声明在移动设备上设置原始大小显示和是否缩放

  meta name=”viewport” content=”width=device-width; initial-scale=1.0″

  最后说下IE浏览器,因为他不支持media Queries的,使用时需要引用一个Media Query Javascript解决,如下:

  script src=”../../css3-mediaqueries.js”/script

广告
上一篇:扫二维码留言墙提意见AI矢量图模板
下一篇:描写同学情谊的经典句子
广告
推荐
最新
  1. 描写同学情谊的经典句子
  2. 响应式布局
  3. 扫二维码留言墙提意见AI矢量图模板
  4. 鐣欒█澧欒璁
  5. 成都宽窄巷子的“留言墙”成独特风景
  6. 魔道祖师:激动!告白墙上看到道友留言“魏无羡
  7. 深圳网站设计_品牌网站建设_响应式网站建设
  8. 路由器网址查询 (含TP-LinkNetCoreTendaMer
  9. 自适应网站建设-响应式网页设计 - 深圳易百
  10. 深圳市德传技术有限公司
热门
  1. 长江网武汉城市留言板首场“区长在线互动”
  2. 成都男子为获免费鸭肠发朋友圈 领导留言旷
  3. 北京功能全面的在线聊天系统怎么申请
  4. 在线英语培训:外贸人士如何更高效的工作?
  5. 日本最大视频网站直播阅兵式 留言超过12万
  6. 哒哒英语海外招聘低门槛 野鸡外教也能变身
  7. QQ华夏迎资料片送祝福 留言免费送Q币
  8. 12个ppt素材网站主要是免费先收藏以备不时
  9. 安徽省教育厅厅长6月24日上午接受高招在线
  10. 女子花一万多购买在线英语课程 结果却遇上