151-3895-5886
 

响应式设计之所以叫响应式“设计”而不叫响应

2017-01-03 浏览:
响应式网页不像传统网页只需考虑一种状态,不是交付一套设计稿就完事儿了,它给设计、前端和开发团队之间的协作模式带来新的挑战。在一个复杂产品全面响应式的项目里,交互每个阶段该产出什么?交互与视觉如何协作?前端何时介入?哪些事情让后端开发来做更合理?经历“玩客”第一版后,我们得到了一些答案。
 
响应式设计之所以叫响应式“设计”而不叫响应式“技术”,是因为它是一项设计先行的工作。需要设计先明确好响应方式再实现出来,不能出一套设计稿后等着前端看情况把它变成响应式网页。
 
  一、控制大小
  习惯了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来写只不过是几句代码的事。
  在这个新的端层里,前端的工程师可以根据有现实的决定权,这会使得在不触及后端架构的情况下,让所有设备上的体验更为快速、响应、可用。。
郑州融科网络专注于企业网站建设、网站制作、高端网站设计,郑州荥阳、上街做网站就找融科网络!
本文章网址:http://www.ppssdd.com/website/131.html。转载请保留出处,谢谢合作!
文章标签: 设计 分辨率 搜索 框架 交互 响应式
 
阅读下一篇
专业网站建设对公司的好处、同时也需要了解客
 
 
推荐阅读
织梦常用的几种字段判断输出实例
网站的文章和文章链接有啥优点
在网上发现被人曝光负面信息应该
如何检验文章的页面质量高不高?
网站改版后url要注意哪些问题
web性能测试,用javascript进行IE测试
织梦dedecms首页列表无刷新实现时时
2018年个人网站站长的出路
SEO是一个长期坚持的工作你坚持住
WindowsXP系统停止服务怎么办
郑州网站建设融科网络微信二维码
 
准备开展业务?
郑州建站咨询服务
联系专业的商务顾问,诊查网站现状及关键词、分析竞争对手的流量、一对一咨询、及其报价详情