阅读更多

7顶
0踩

Web前端
响应式web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难。没有固定的页面尺寸、没有毫米或英寸,没有任何物理限制,让人感到无从下手。随着建立网站可用的各种小工具越来越多,像素设计局限于桌面和移动端也已经成为历史。因此,现在就让我们来说明一下如何运用响应式web设计的各项基本原则来实现,而不是抗拒流畅的网页体验。为了简单起见,我们将着重讲布局(当然,响应式设计远远不止于此,如果你想进一步学习,可以点击此处)。

响应式设计vs适应式设计

看似相同实则不然。这两种设计方式彼此相辅相成,所以说也没有对错之分。具体情况要依内容而定。



内容流

随着屏幕尺寸越来越小,内容所占的垂直空间也越来越多,也就是说,内容会向下方延伸,这就叫做内容流。如果你习惯了使用像素和点进行设计,可能会觉得这个有点难掌握。不过没关系,习惯了就很好理解了。



相对单位

你的设计对象可能是台式桌面,也可能是移动端屏幕或者介于两者之间的任意屏幕类型。像素密度也会彼此不同,所以我们需要使用灵活可变,并且能够适应各种情况的单位。那么在这种情况下,百分比等相对单位就派上用场了。使用百分比时,我们说宽度50%就是表示宽度占屏幕大小(或者叫视区,也就是指所打开浏览器窗口的大小)的一半。



断点

断点可以让页面布局在预设的点进行变形,也就是说,在台式桌面上显示3栏,在移动设备上仅显示1栏。大多数CSS属性都可以实现断点之间的变形。断点放置的位置通常取决于内容。比如,如果一句话要换行,你可能就需要加上断点。但断点使用时需要谨慎——如果搞不清内容之间的逻辑关系,很容易弄的一团乱。



最大和最小值

有时候内容占满整个屏幕宽度(例如在移动设备上)是好事,但如果相同的内容在电视屏幕上也撑得满满的,貌似就不太合理了。这就是为什么要有最大/最小值。例如,如果宽度为100%,最大宽度1000px,那么内容就会以不超过1000px的宽度填充屏幕。



嵌套对象

还记得相对位置吗?如果一大堆要素彼此都紧密联系,那么必将难以控制。因此,将要素放置到容器中就会让它们变得更加好理解,并且简洁明快。这种情况就需要用到像素之类的静态单位了。静态单位对于logo和按钮等不需要扩展的内容来说非常有用。



移动优先还是台式桌面优先

严格来说,项目从小屏幕入手过渡到大屏幕(移动优先),还是从大屏幕入手过渡到小屏幕(台式桌面优先)区别不大。但是,从移动端着手可以给你带来一些额外的限制,帮助你进行决策。通常情况下大家会从两方面同时着手,所以你还是要看哪种方式最适合你。



web字体vs系统字体

想让自己的网站拥有炫酷的Futura或Didot效果吗?那就是用web字体吧。尽管web字体看起来很炫酷,但你要记住,这些字体都需要用户下载,字越多,用户加载页面的时间也就越长。另一方面,系统字体加载速度则快得多(前提是用户本机就有),但太过普通。



位图vs矢量图

你的图标是否有很多细节,并且应用了很多华丽的效果?如果是,那就用位图。如果不是,考虑使用矢量图。如果是位图,使用jpg、png或gif。矢量图则最好使用SVG或图标字体。其各有利弊。但你要时刻牢记图标尺寸——未经过优化的图片不能传到网上。另一方面,矢量图通常比较小,不过部分比较老的浏览器可能不支持矢量图。还有,如果图标有很多曲线,那有可能会比位图还大,所以要明智取舍。


  • 大小: 94.1 KB
  • 大小: 32.5 KB
  • 大小: 115.1 KB
  • 大小: 146.3 KB
  • 大小: 109.8 KB
  • 大小: 102.4 KB
  • 大小: 254.8 KB
  • 大小: 21.1 KB
  • 大小: 76.4 KB
7
0
评论 共 2 条 请登录后发表评论
2 楼 xsharp 2014-11-26 09:53
简洁,生动,形象
1 楼 forcer521 2014-11-25 17:22
好文档!!

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 美国众神第五章

    ”他冲着楼 梯下面一级台阶上一个用过的安全套皱了一下鼻子,带着一脸厌恶的表情,用脚尖把它踢到楼梯边上,“有人会不小心踩到上面,摔断脖子的。”他不满地嘟哝着, “就像香蕉皮一样,只有最下流、最冷血的人才会...

  • LVS的DR模式(ldirectord的使用,keepalived配置高可用集群)

    也可以是公网地址,如果使用公网地址,此时可以通过互联网对RIP进行直接访问 RS跟Director Server必须在同一个物理网络中 所有的请求报文经由Director Server,但响应报文必须不能进过Director Server...

  • 这一年,这些书:2022年读书笔记

    生活在今天的现代人平均脑容量为1 500毫升左右,据罗宾·邓巴先生的观察和统计,现代人的团体规模极限是148人,粗略估算大概为150人,这就是著名的“邓巴数”,是现代人在社交时建立稳定关系的人数极限,一旦生活...

  • 非常感人非常激发人的潜能的信,你一定要看!

     “你在外面坐一下,我到卧室换件衣服。”女秘书对大老板说:“你 别偷看,我叫你,你再进来。”  大老板心想,女秘书叫他进卧室,一定想跟他亲热,于是在外面先把 衣服脱了。这时候果然听见女...

  • 科幻小说《霜与火》 by 雷·布雷德伯里

    妈妈用发烫的双手喂西姆吃东西。人生的梦魔开场了。一来到世间,他的眼睛就闪烁着警觉的光芒;而后又令人费解地充满了显而易见的恐怖神色。西姆的喉咙让食物给噎住了,呛得哇哇大哭。他茫然四顾。浓雾散开,山洞的...

  • 网瘾父母,在直播间疯狂剁手

    快递盒子堆成山了”“我爸在直播间99元买的东西,我在电商平台上找到了9.9元的,我爸说我搜到的是假的”“到底怎么能阻止父母‘剁手’啊,我都想报警了”……网瘾老人,疯狂起来可能超过青春期的年轻人。“三无”...

  • 《那些年啊,那些事——一个程序员的奋斗史》四

    31  “我们再重新找房吧?”伍定轩对段伏枥说道。...当初伍定轩决定买这小盆仙人掌的时候,也是从网上听人说,它可以防辐射。    伍定轩继续说着:“你看,能够在恶劣的环境中生存的仙人掌,居然在我们的屋子被

  • 曾仕强主讲:易经的奥秘(全文讲义)

    人应不应该有自信,这种话不能用有或者没有来回答,《易经》里面“自天佑之,吉无不利”,是包括自信在内,但是我们中国人讲到自,只讲什么?只讲自觉、只讲自反、自省、自律,我们从来没有讲过自信。现在年轻人太...

  • 微信简单之美

    本文来自互联网收集,感谢微信之父张小龙无私的分享。 目录: 第1章 从一个小故事讲起 第2章 从微信“摇一摇”看简单就是美 第3章 产品经理应该像上帝那样了解人性 第4章 群体用户与个体用户...第6章 产品如何从用

  • 五分钟商学院(基础---商业篇)

    用户代言人:转身,成为用户的代言人 最小可用品:用最快的速度,最低的成本犯错 企业能量模型之定价 渗透定价法:把自己逼疯,对手逼死 撇脂定价法:为什么手机越卖越便宜? 组合定价法:自己装配汽车花的钱,能买...

  • 重装机兵3 完美攻略修正版

    之后去车间顶部干掉尤姆霍玛(我最后使用火焰瓶烧死他的得到了他的火焰放射器)之后在车间顶部的仓库找到了一串钥匙,先来到厂区右边的办公楼,拿到经理室的钥匙,之后来到厂区左边的办公楼,用一串钥匙先打开第一道...

  • 变为优秀的iOS工程师

    总之,人并不擅长做重复枯燥的工作,而这些工作恰恰是机器擅长的,想办法交给机器去做吧,遵循 DRY: Don’t Repeat Yourself! 不利的懒惰 下面这些不利的懒惰会极大地妨碍我们成为优秀的工程师(在写下面...

  • 工程师的懒惰

    总之,人并不擅长做重复枯燥的工作,而这些工作恰恰是机器擅长的,想办法交给机器去做吧,遵循 DRY: Don’t Repeat Yourself! 不利的懒惰 下面这些不利的懒惰会极大地妨碍我们成为优秀的工程师(在写下面...

  • 口袋妖怪金心银魂详细图文攻略(下)及游戏下载

    踩蓝色的区域是让其旋转,红色的区域是左右平移,体会一下机关的思路就可以到达对岸了  上去之后,走几步 又看见一个浮游机关。这次要通过它来到右边的陆地。  再继续向上走,看见最后一个浮游机关。想办法...

  • 西游记泥潭指南

    对一个刚近入西游记的新手来说,如何在一个人神鬼怪的世界中 生存下去是最重要的,以下之是几点小小的建议指南。 1。进入: 进入西游记,你会最先出现在长安城的南城客栈。客栈中有一块 西游记最大的...

  • varnish

    这就不得不让人将怀疑的目光投向月亮,投向那位“堕落母神”,然后遭遇污染……我差点被自己的想法逗乐。 作为资深的“占卜家”,解梦大师,我没有谦虚,坦然说出了自己的认知: “三个可能,一是这梦境在诱导你去...

  • 遇见未知的自己 - 张德芬

    读完,最好能够读完几章之后,好好地咀嚼、反思一下,再继续下面 的章节。    若是能够和好朋友或家人一起看、一起分享心得,效果会更好。 ? 如果只是浮光掠影地把它当成一般小说来看,那...

  • 侍魂

     顿时酒馆里到是有一大半的人买这个刚进来的超级胖子赢,霸王丸放下酒葫芦,盯着这个怪人看了好一下,突 然又望了一下开出的赔率,竟然是一赔三十,他气的使劲拍了一下桌子,“竟然不买我酒王赢?你们嫌钱多啊,嫌...

  • 遇见未知的自己……

    若菱有点困了,真的不知道老人为什么拉着她说这么多令人困惑的话。 她瞥了一下四周,要命了,老人像是个隐居的高士,家里居然看不到一具电话! 「我告诉你这些是要帮助你认清楚一些事实,因为我们人所有受苦的...

  • 天才在左疯子在右

    她没想到我会反问,愣了一下:“你到底在干吗?”  我:“我不告诉你。”说完我继续假装兴致盎然地看着眼前那根蔫了的草。  她往我跟前凑了凑,也看那根草。  我装作很神秘地用手捂上不...

Global site tag (gtag.js) - Google Analytics