天空之城

 找回密码
 注册

QQ登录

只需一步,快速开始

!header_login!

!header_login_tip!

响应式布局这件小事 设计师如何实现响应布局

admin 发表于 2014-9-4 09:23:56 | 显示全部楼层   [复制链接]
10 2257

注册用户登录后可以浏览更多完整大图

您需要 登录 才可以下载或查看,没有帐号?注册

x
讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案。今天就和大家来讲讲响应式布局这件小事,包含什么是响应式布局、响应式布局的优点和缺点以及响应式布局该怎么设计(通 过CSS3 Media Query实现响应布局)。
130151hsxsbw7771d47ssd.jpg

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

meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
参数设置∶
width – viewport的宽度
height – viewport的高度
initial-scale – 初始的缩放比例
minimum-scale – 允许用户缩放到的最小比例
maximum-scale – 允许用户缩放到的最大比例
user-scalable – 用户是否可以手动缩放
最后对于在IE浏览器中不支持media query的情况,我们可以使用Media Query JavaScript来解决,只需要在页面头部引用css3-mediaqueries.js即可。示例:<!--[if lt IE 9]>
<![endif]-->

好了,响应式布局的小事就这么多,如你有好的补充意见或不同的见解,可以联系我,我们一起探讨这件小事……


130151j0huu6611sa0da11.jpg


130151wthhtxcjp4osiyjs.jpg


130151nttsp1h33zotsi1c.jpg


130124d1ngpjn03bnu5nj0.jpg



130124of22t4tu6uuisz0q.jpg


130124bby55b952llly7yy.jpg


130124xuclaasvgjaguy8c.jpg

130012miqxxh0v1rrrcnq0.jpg


130011uz8zgpf39g9fe9we.jpg


130011r5kqy5k3ye5zfe5g.jpg


130011npipfcic0kf4oc0e.jpg
回复

使用道具 举报

发表于 2014-9-3 19:06:44 | 显示全部楼层
就艺术的角度而言,这篇帖子不算太成功,但它的实验意义却远远大于成功本身。正所谓:“一马奔腾,射雕引弓,天地都在我心中!”
发表于 2014-9-3 19:08:53 | 显示全部楼层
在看完这帖子以后,我没有立即回复,因为我生怕我庸俗不堪的回复会玷污了这网上少有的帖子。但是我还是回复了,因为觉得如果不能在如此精彩的帖子后面留下自己的网名,那我死也不会瞑目的!能够在如此精彩的帖子后面留下自己的网名是多么骄傲的一件事啊!楼主,请原谅我的自私!
发表于 2014-9-3 19:11:15 | 显示全部楼层
也许这么做是犯天下之大忌,也许这句话才说一半,我就被同样祟敬您的这些追随者用牙齿撕成碎片,可是我不怕。是您给了我无限的勇气,是您在指引着我正确的方向,我抬起头,天空中您的身影渐渐浮现,您仿佛在朝我微笑,您轻轻的说:“just do it!”
发表于 2014-9-3 19:14:04 | 显示全部楼层
精辟,一定得顶!
发表于 2014-9-3 19:29:26 | 显示全部楼层
楼主威武!支持一下!
发表于 2014-9-3 19:30:20 | 显示全部楼层
这个可以有,顶起!
发表于 2014-9-3 22:32:16 | 显示全部楼层
支持!
发表于 2014-9-4 09:15:07 | 显示全部楼层
支持!
发表于 2014-9-4 09:23:56 | 显示全部楼层
强!!!
您需要登录后才可以回帖 登录 | 注册

本版积分规则

Archiver|手机版|小黑屋|浩友团,为好友组团!

Copyright©2000-2019 迎接光与爱的新纪元 Prepare For Change All Rights Reserved. 版权所有 ( 沪ICP备16018105号  

快速回复 返回顶部 返回列表