响应式的前端设计

发布者:技术编辑主任 发布时间:2017-05-09 10:04:37 阅读量:2284 标签: 其他  

导读 : 这两三个星期我每天都在写响应式页面,借此累积了不少响应式页面和ajax的经验。我大致的梳理了几个响应式页面的重点,如果想往这方面发展或是对它有些兴趣,希望能给大家一点帮助。

1494295442860929.jpg

这两三个星期我每天都在写响应式页面,借此累积了不少响应式页面和ajax的经验。我大致的梳理了几个响应式页面的重点,如果想往这方面发展或是对它有些兴趣,希望能给大家一点帮助。

控制大小

习惯了PC页面的前端开发者可能更加喜欢用pc来控制大小,但在响应式的页面中出现更多的是em和rem,用它们来控制字体大小甚至是框体大小对整体的效果非常明显。

打个比方,我的字体设置是10px/20px/30px等等不同的,网站上不同的地方自然字体会有大小的差异这是必然的,如果一个页面足够复杂或是文字足够多的话,这些字体的大小设置也是一个量很大的工作,不过在响应式页面中你设计完它们并不是完事:你用手机浏览一下页面会发现字体会撑的很大,甚至有个别标题撑满了手机屏幕,这对移动端用户的体验影响可想而知。因此你要开始写媒体查询,然后发现一个页面有几十个字体需要设置,如果把它们在不同分辨率下一一调整你可能需要写百句以上的css代码,但如果你用em/rem,就能够把工作量大大减小,同时还能够保证字体的统一比例。

关于em/rem的解释大家可以自行搜索,网上这类教程数不胜数,实际上它们就和px一样简单,当我开始用之后也不过只花了几分钟熟悉它们。就像前面说的一样,你也可以用它们来控制框体的大小,然后再响应式的页面下统一缩放,当然这需要足够多的计算。另外值得一提的是字体图标也可以用它们来控制,具体可以参考不同“字体图标”的官方文档。

百分比

解决缩放问题的思路有好几种,最适合新手的无疑是百分比式的布局,在关键的宽度设置下百分比能够起到出乎意料的效果:

box1{ width:100%;}

ul{ margin:0 2%;}

我并不是推崇全部使用百分比来布局,但有时候这可能会大大减少工作量,给box1宽度设置100%之后它会自动以宽度填充满整个浏览器,不管你是手机PC什么分辨率,它总是有很好的表现。这时候你给box1下面的ul设置左右2%的margin也是如此,随着浏览器窗口大小改变时ul的实际margin大小也会随着变化,这么一说大家多少也都理解了百分比布局的概念。

当然有时候也不会有想象中的效果,特别是在较小的分辨率上时,原来看似不错的百分比设定会显得很怪,因为响应式多数时候只约定宽度,长度都是由文档和浏览器来决定的,这时候想要在所有的终端上都有很好的体验就需要Media Query来解决问题。

Media Query

通俗的解释就是CSS的媒体查询功能,它既能够准确的识别设备也能够自己设定分辨率或者宽度,w3cshool里有Media Query的参考文档,如果你嫌文档太多我可以粗略的解释一下它的工作原理。

在有必要的时候你可能会给一个box设置高度,当box拥有500px高度时它可能在PC上看起来不错,但用手机打开时就有些吓人了,整个box充斥了页面,里面的内容排列混乱,严重的影响了用户体验,这时候你就可以使用媒体查询Media Query,用它单独的为不同大小的设置不同的高度,比如640/320打开时box时就分别处于300/200px的高度,这样看起来就不错了。

大家可能会想到import,实际上媒体查询就可以这样理解,它为不同的宽度或设备设定了类似于import的css规则,保证了实际渲染完成页面的效果。

媒体查询也可以为一个页面准备多个不同的CSS,当设备大小不同时使用不同的CSS文件,如果样式文件比较大也可以考虑这种方法。

说说框架

我见到过和实际使用的前端框架中,不少都是富前端类型的设计,并不建议新手前端盲目的使用框架来布局,不管框架看起来多美好。在实际的使用过程中大家可能会发现很多问题,比如类名太多太复杂(在没有很多的css经验时可能对约定的类名所知甚少)、样式冲突。引入资源过多导致页面繁重、偏离设计效果等等。

就拿bootstrap来说,如果你要设计一个类似于google的搜索框就显得很难,google类型的搜索框实际上是将一个input包含在box里面,然后在这个box里面再加上左右图标,如果你用bootstrap来做可能会出现很多莫名奇妙的冲突,但实际上你得到了什么呢?一个圆角一个行高?还是他的百分比宽度呢?这些用css来写只不过是几句代码的事。

还有一些框架过度的依赖AJAX,它们也许想法很好,大量的AJAX在前端看起来的确很酷,对用户的友好性也足够强,但大量的请求对服务器并不友好,可能会使服务器的实际负载大大下降。总之还是一句话,按实际需求来解决问题,框架并不是万能的。


上一篇 下一篇

最近更新

热门文章

热门标签 茅台 市值蒸发 80后 节约2600万 280亿 国宝级国企 ofo人去楼空 Lime成功 互联网本质 ofo公众号 金立没落 Dolce & Gabbana 民进党惨败 刘立荣输钱 ofo创始人戴威 HTC 趣头条 子弹短信 中本聪 陈羽凡 阿里巴巴 蘑菇街 名创优品 滴滴“大象转身” 零售业“祖师爷” 摩拜 大润发创始人 全球手机产业链 创业公司 天音控股 瑞幸咖啡 百度外卖 当当 慧聪网 哈啰上线顺风车 打折卖 iPhone 海外支付大战 瑞幸 便利店 苹果市值蒸发 权健“帝国” 爆红营销事件 华为 小米 顺丰大举扩张 “无人货架”的衰落 酷派“罢免”CEO蒋超 诺基亚 浏览器混战 小罐茶 苹果 好市多 再见摩拜 马化腾 张小龙 华为、三星 三星血战印度 互联网贪腐高管 腾讯产品"死亡"名单 共享汽车途歌 苏宁认怂 王健林卖卖卖 流浪地球 视频网站 爱屋吉屋 华为嘲讽三星 黄怒波 全时谢幕 三大外资便利店 5年盟约 快递员 外卖员 ofo以购代退 魅族 电商办卡 借壳上市 九阳 人人车 大白兔 周黑鸭 绝味 拼多多 黄太吉 陈欧 顺丰“危机” 苹果新品发布 晨光文具 传音 乐友 江小白 努比亚 阿里拼多多 六个核桃 怀旧支付 通信 乐视网 外卖摆渡 全景网络 桥页 正确使用关键词加粗技巧来提升网站页面用户体验 网站是怎样分类 SEO刷排名 网站SEO优化的预期效果 怎么样去理解网站内容更新的重要性 百度熊掌号视频服务 将关键词优化到主页上 页面相似度对网站优化带来的不利影响 网站内容如何更新
官方客服 400-666-3155
友情链接

微信公众号

微信小程序

© 2020 dxm.so 《中华人民共和国增值电信业务经营许可证》编号: 川B2-20170249号 ICP证: 蜀ICP备14008752号 四川省成都市青羊区光华北三路98号光华中心D栋1609