经典案例
  • 妙视界
  • 广州市坊森室内装饰有限公司
  • ArtsRouge
  • 香港·维西·创意设计机构
  • 阳春冠军联盟
  • Management
  • 爱艺术咖啡会所

干货贴:手把手教您如何做一个响应式网站

发布于:2017-12-06 10:00来源:网络整理 作者:jimmoo 点击:

干货贴:手把手教您如何做一个响应式网站

 

  随着Html5、CSS3等建站技术的发展,使用手机访问网站的用户也越来越多,响应式网站设计在这样的大环境下应运而生。但它一出生仿佛就自带光环,以其同时适应多种设备的属性迅速"走红",受到不少公司和企业的青睐。前面小飞也在一些文章中讨论过什么是响应式设计,响应式设计中的一些常见误区和认识盲点,响应式设计的潮流趋势等。但不少读者反映虽然对响应式网站设计有了一定的了解,但自己做网站时还是有些不知如何下手,所以小飞今天就带大家一起看看响应式网站究竟应该怎么做。不用小飞多说,大家都知道响应式设计最大的一个特点,就是灵活性,不管是网站布局、图片视频还是文本信息都可以轻松适应不同大小的设备,下面几点可都是围绕这个特点展开的。快来看看吧!

  设置关键断点 320 - 720 - 1024

  首先将网站的整体布局设置成响应式的。响应式网站的布局一般是通过 @media query 的方式改变的,在哪种宽度下改变布局,这就是我们常说的断点或响应点。由于响应式网站需要同时适应PC、Pad、手机等,我们可以先设置3个关键断点,分别针对不同类型的设备。不过前面我们在《真实的谎言--关于响应式设计的六个认识误区》也聊过,响应式网站是面向所有用户的,而不是只针对某一个设备的用户,不同设备的屏幕大小常有出入,在设置关键断点时,我们还应该结合站点的内容,注重网站内容信息的有效传递。一般来说,设置这3个断点就足够了。但小飞也见过设置了10个断点的大神卖弄站。其实,高端响应式网站中,断点的设置没有一定的规则,需要我们可以根据自身的需求(如希望网站兼顾哪些平台)以及用户群体的情况(真实需求、规模、浏览器分辨率分布等),因站制宜, 合理的进行设规划和实现。

  

干货贴:手把手教您如何做一个响应式网站

 

  建议: 根据各个不同的设备尺寸一个个的设置断点,这项工程简直太耗时了。小飞教你一招,其实我们查看大家平时常用的一些前端框架的源代码,了解它们的断点值并借鉴。但如果你在建站技术、写代码这方面完全是个小白,起飞页自助建站平台就是一个很好的选择,无需任何专业技术轻松做网站,网站代建或是专业定制等服务应有尽有。

  优先设计手机端

  在构建好网站的信息框架、准备好各项元素和决定好设计风格后,我们最好先根据手机端进行设计,这是因为手机等移动端屏幕更小,更能有效筛选出网站最重要的元素。一旦移动端的问题解决了,其他设备上的设计问题也会简单的多。先建立好手机端的框架,设置好断点值,也可以给后续更大屏幕做一个参考。再说,首先面向PC端,再向手机端优化,这个由繁入简的过程是比较困难的,很多站长觉得这个元素也重要,那个元素也不能缺,常常会在筛减元素的过程中会摇摆不定。

  

干货贴:手把手教您如何做一个响应式网站

 

  建议: 避免使用大图。对于移动用户来说,能够在触屏设备良好的显示的图片是最佳选择。不要忽视网站上的各项细节,网站的导航菜单也要记得设置成智能、可缩放的。在做好面向手机端的响应式网站之后,也要记得在真实的设备上进行测试,确认无问题之后再进行其他设备的设计。

  扩大目标点击区域(按钮或超链接)

  与PC端上经常使用鼠标不同,在手机等触屏设备上用户更习惯于手势操作,直接用手进行点击。研究表明成人食指的平均宽度是1.6-2.0cm,这相当于45-57px。大约57px宽的点击区域才能够满足用户点击时的舒适度需求,所以记得扩大行为引导按钮或超链接的点击区域,让它们对手指更加友好,优化用户体验。著名的费茨定律也指出,使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离和目标大小有关。简单点来说,在网站中,如果点击区域越小,用户在浏览获取页面时花费的时间就越长,这会大大降低用户的转化率。

  

干货贴:手把手教您如何做一个响应式网站

 

  建议: 虽然小飞建议按钮或超链接的点击区域尽量扩大,最好超过57px,但是这还要结合网站的实际情况。点击区域也是越大越好,我们可以测量整个屏幕的大小,合理布局按钮或超链接的点击区域大小。另外,让按钮更有特色也能引发用户的互动,进而可以提高用户的转化率,就像下图中蓝色按钮的波浪效果就能充分吸引用户的注意力。

  

undefined

 

  使用响应式图片或视频

  图片在网站中举足轻重。在响应式网站中应用图片的核心问题在于如何确保图片灵活适应不同屏幕的设备,还不会出现失真、模糊不清等情况。因此千万不要使用固定宽度的图片,固定宽度的图片在适应不同大小的屏幕时常会出现显示不全等问题。如何做好图片的响应式?我们可以给图片设置相关属性,或者使用支持响应式的框架(比如Bootstrap、CSS Sprites等), 用响应式图片class名来控制(例如class="img-responsive")。

  视频也是网站中重要的营销工具之一,不少站长越来越频繁地在网页中使用视频。在响应式网站中运用视频要比图片更加复杂。这不仅仅关乎视频尺寸、大小的问题,如果没有合理设置,视频的播放按钮等元素还会出现拉伸或不对称的问题。如何让视频根据屏幕宽度自动缩放?我们可以插入插件如FitVids(jQuery插件),或使用容器来嵌入代码,并指定子元素的绝对位置。

  

干货贴:手把手教您如何做一个响应式网站

 

  建议 :如果服务器上有足够的空间,网站上的图片和视频最好以原始的尺寸呈现。但在小屏幕上,如果空间实在不够或是图片或视频极大影响了网站的加载速度,我们对它们进行适当的剪裁,保证原本的效果。还有,在网站中使用SVG矢量图也是一个不错的选择。与位图不同,SVG矢量图根据不同的屏幕分辨率只改变图片的路径而不会影响像素,因此它们可以任意缩放显示,不破坏任何清晰度或细节。

  注重文本排版

------分隔线----------------------------
------分隔线----------------------------