微信 | 联系我们 | 服务专线: 151-7613-5601

五月微信

石家庄网站建设_网页设计_seo网络推广_五月网络工作室

您所在位置:首页 > 网站策划设计

什么是响应式网页设计如何制作

点击数:0 更新时间:2015-11-26 22:42:52 来源:www.wuyuespace.com

   概念

  响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先。

  背景

  PC互联网加速向移动端迁移:2012年12月底我国网民规模达到5.64亿,互联网普及率为42.1%,手机用户占网民总数的74.5%。预计到2015年,移动互联网的数据流量将超越PC端的流量。

  移动端入口:当用户希望通过手机来完成PC页的操作时,常见的是商家的运营微博,期文案足够吸引用户点击链接参加活动,如果该活动页没做响应式处理:页面体积大、请求多、体验差、兼容性差,层层阻碍最终导致用户放弃参加。

  优势

  开发成本低,门槛低

  Native APP:Objective-C or Java – 学习成本高

  Hybrid APP: 外壳+Web APP,需安装。

  响应式Web APP:HTML5+JS+CSS – 门槛低,极易上手,迭代快

  跨平台和终端且不需要分配子域

  虽然可通过监测用户UA来判断用户终端后做跳转,但它还是分配了多个域,而响应式无需监测用户UA没有域的切换,只需根据终端类型来适配不同的功能模块与表现样式,它是跨平台和终端的,1页面适配多终端。

  PC – http://qzone.com

  Mobile – http://m.qzone.com

  响应式:PC & Mobile – http://qzone.com 无需跳转

  本地存储

  Web App可以利用本地存储的特性将重要和重复的数据保存在本地,避免页面的重复刷新,减少重要信息在传输过程中被泄露,增量传输修改内容。

  无需安装成本,迭代更新容易

  更灵活、更方便的APP使用及安装方式将成为HTML5在移动平台上大放异彩的保障之一

  实施

  首先我们应该遵循移动优先原则,交互&设计应以移动端为主,PC则作为移动端的一个扩展;

  一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:

  神飞:很多人常常使用initial-scale=1到非响应式网站上,这会让网站以100%宽度渲染而不会自动缩放,用户需要手动移动页面或者缩放。最差的是和initial-scale=1同时使用user-scalable=no或maximum-scale=1,这将使你的网站不能被缩放——用户不能放大/缩小网页来看到全部的内容。所以,请记住:如果你的网站不是响应式的,请不要使用initial-scale或者禁用缩放。

  使用 Media Queries 适配对应样式

上一篇:网站建设前需要进行哪些工作的策划       下一篇:石家庄网站建设网站改版如何处理避免被降权

  • 关于我们
  • 五月文化
  • 工作机遇
  • 联系方式
  • 新闻动态
  • 服务项目
  • 网站建设
  • 移动设备
  • 网络营销
  • 营销案例
  • 客户案例
  • 网站建设
  • 移动设备
  • 网络营销
  • 营销案例
  • 联系我们
  • QQ:2338605598
  • 邮箱:2338605598@qq.com
  • 微信:wuyue2327957673
  • 地址:河北石家庄新华区钟旺路
Copyright@2013-2014 Alright Relserver 五月网络工作室版权所有 冀ICP备15017654号-1 站长统计