×

打开微信“扫一扫”,打开网页后点击屏幕右上角分享按钮

×

打开微信“扫一扫”,关注我们官方微信^_^

梦创义官方微信

首页 > 新闻 > 网页设计 > 浅谈响应式网站前端设计

浅谈响应式网站前端设计

2015-06-011022分享

虽然在国内搜索引擎技术还不是很成熟,百度建议移动站和PC分开来做;不过随着技术的发展未来也将会像google一样识别响应式网站。毕竟更方便,节省资源和时间成本。下面给大家说说我的一些经验:

  1.使用em和rem控制大小

  习惯了PC页面的前端开发者可能更加喜欢用pc来控制大小,但在响应式的页面中出现更多的是em和rem,用它们来控制字体大小甚至是框体大小对整体的效果非常明显。能够把工作量大大减小,同时还能够保证字体的统一比例。

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

响应式网站前端设计

  2.关于百分比缩放问题

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

  box1{ width:100%;}

  ul{ margin:0 2%;}

  有时候这可能会大大减少工作量,给box1宽度设置100%之后它会自动以宽度填充满整个浏览器,不管你是手机PC什么分辨率,它总是有很好的表现。这时候你给box1下面的ul设置左右2%的margin也是如此,随着浏览器窗口大小改变时ul的实际margin大小也会随着变化。

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

  3.Media Query

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

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

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

  4.响应式布局里的框架

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

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


相关文章:

啥是响应式网站设计?

复杂产品的响应式设计

本文由梦创义网站建设(www.mcykj.com)收集于网络或网友投稿,对于内容系文章作者个人观点,不代表本站观点.我们每日更新最新网站建设教程,网站制作教程,网站建设方案报价等,如果你想了解更多建站知识,请收藏并持续关注我们网站.

本文地址:https://www.mcykj.com/show-19-215-1.html转载请注明出处!

  • 基于用户创新

    界面设计日新月异,梦创义坚持基于用户需求的界面创新设计……

  • 服务设计思维

    互联网的格局发生的改变,在我们进行设计服务时更是考虑不同用户、不同……

  • 洞察用户心理

    洞察用户有意识和无意识的行为以及心理特征通过构造一系列的服务来促进……

  • 查看更多 >>

最新新闻Latest News

社交电商开发 社交电商制作 一站式平台
微信是熟人社交工具,社交电商开发 社交电商制作 社交电商就是依……
社交小程序 APP开发制作 社交类APP定制开发,小程序制作
微信对小程序的功能有约束的,只能实现APP的部分功能,可以认为是轻……
视频直播App开发解决方案
视频直播App让全民做主播成为现实。相较于电脑直播来说,视频直播App更便利
app原型设计 app原型制作 app开发
我在选择app原型设计软件这个过程中纠结了很久,也是用过在领悟真正的……
网站制作 设计网站 网站开发
以“为设计师及爱好者提供最便捷、最贴心的服务”为宗旨,是一个以“设……
  

ABOUT US

北京梦创义科技有限公司成立于2012年
创始人以及初创团队成员均来自各大互联网公司
目前公司拥有员工近百人  平均3年以上从业经验
核心团队成员均有10年以上互联网从业经验

Contact information

手机:13910811300
电话:010-52661970
传真:010-82694569

网址:www.mcykj.com
邮箱:13910811300@126.com
朝阳一部:朝阳区紫芳路九号院广顺园2号楼2605A
海淀二部:回龙观黄平路19号院泰华龙旗广场E座1212室(距西三旗桥2公里,8号线育新站海淀昌平交界)

北京梦创义网站建设logo

Copyright 2008 ASAweb company. All rights reserved.