服务支持
服务支持
您的位置是:首页 > 新闻资讯 > 响应式网页设计WEPAPP
响应式网站设计的原则及经验
2014-11-18 

  在 QA TechWeek 2014 期间,QA公司首席技术专家David Walker在 使用Foundation进行响应式设计的会议上,提出了响应式网站设计的原则。Walker提到从现有桌面网站创建移动应用网站的多种方式:原生应用,为每种移动操作系统开发一个应用;嵌入式 HTML5,使用PhoneGap或者类似的工具;在服务端过滤,分别为桌面和移动设备建立网站,在两者间进行重定向。

  
  分析完每种方法的优缺点后,Walker提出了响应式设计(RWD),使用HTM L5、JavaScript和CSS创建响应式网站,根据设备即时调整布局、格式和内容。RWD的主要好处是避免内容剃重复,使网站能够适应所有设备,包括未来设备的尺寸。缺点是需要优秀的CSS和JavaScript技能,有些资源在移动网络中太大,针对旧版本的浏览器需要Polyfill。
  
  要做到响应式设计,Walker建议遵循以下原则:
  
  建立流动布局(Fluid layout) 。所有容器的宽度必须定义成浏览器Viewport的百分比。
  使用 CSS3 Media Query。针对不同的媒体类型如屏幕、打印机、电视等等,以及不同的媒体参数,如宽度、高度、颜色、分辨率等等,使用不同的样式。
使用自适应图片(Fluid image) 。图片尺寸可以自适应,不超过最大显示宽度。
  
  要决定样式适用于哪种媒体类型,你需要确定有哪些不同的显示宽度。例如,www.time.com 使用了Media Query相关的40多种样式。可以通过Chrome扩展    Responsive Inspector 查看。通过这些样式,time.com的内容将在浏览器层面自动布局,因此即使在不同宽度的设备上显示,页面也不需要水平滚动。
  
  Walker表示,响应式网站设计还需要考虑:
  
  为不同的设备和网络速度优化图片; 
  为移动UI/UX改变导航模式;
  改变链接和按钮的样式,使其适于触摸;
  动态调整字体大小,以适应不同的屏幕分辨率;
  按需加载内容,而不是隐藏起来;
  提供图形的Retina版本。
  
  Walker还演示了如何使用 Foundation 创建响应式网站,Foundation是一个开源的响应式前端框架。另一个类似的解决方案是Bootstrap ,它最初由Twitter开发。

新闻资讯
  • 联系我们 contact us
  • 您可以拨打以下电话联系我们

  • 电话
    86 - 010 - 6412 7586
    86 - 18601235528
  • 也可以发邮件或QQ联系我们

  • 电话
    chinahome158@163.com
北京网站设计-顶级网站建设服务,升级品牌网站形象,提升品牌竞争力! 北京网页设计| 北京网站制作 | 网站建设知识库 | 联系我们
我们是一家网站设计网站建设公司 | 我们能做网页设计网站改版和网站建设开发 | 我们做过集团公司教育培训医疗机构单位网站建设改版
为每一家企业提供最专业的品牌服务 | 我们的网站设计价格很优惠 | 联系网站设计公司 | 网站设计建设常见问题 | 网站设计网站导航地图
Copyright©2006-2030 HOME158.CN BestViewby1024*768 Email:chinahome158@163.com 京公网安备110105018368
地址:北京市朝阳区汤立路218号明天STUDIO(明天生活馆)537室 北京网站建设直线:010-64127586 24小时咨询热线:13241795859
优秀网页设计公司|北京做网站专业公司
京ICP备09023403号