建站学习网,专业提供各类建站教程,网页素材,SEO资讯等建站资源!
当前位置:建站学习网 > DIV+CSS教程 > DIV CSS教程 >

移动互联网之响应式设计

整理编辑:建站学习网 更新时间:2017-01-08 阅读:0

  在公司的做的关于“移动互联网之响应式设计“分享,以下简要内容,记录如下

  1.移动互联网的现状

  2.Web App和Native App 之争

  Web App

  优点

  开发成本低,周期短

  零部署,方便更新和升级

  缺点

  性能、用户体验受制于浏览器的实现

  难以应用手机的高级功能,如照相、重力感应等

  Native App

  优点

  能最大化挖掘性能潜力

  能够运用手机的所有开放特性

  能够不断改善用户体验

  缺点

  平台差异大,开发难度大,成本高、周期长

  让用户安装客户端是个不低的门槛(我不会为了看你的网站而下个App吧,)

  解决办法:[Hybird App] Web App 开发框架 JQTouch、jQuery Mobile 和PhoneGap(GeoLocation,Camera)

  3.什么是响应式设计(Responsive Web Design)?

  简单来说是由Ethan Marcotte在2010年提出的名词,指可以自动识别屏幕宽度、并做出相应调整的网页设计,也是为用户体验的考虑)

  4.怎样去响应式设计

  我们最先想到的应该是宽度使用百分比%,如果只有这样他并不能解决实际问题

  首先

  a .在头部加一个viewport的标签

  width=device-width:当前网页的宽度是用户手机屏幕的宽度

  initial-scale=1.0 : 原始缩放比例,1表示不缩放

  user-scalable=no : 禁止用户缩放屏幕尺寸

  b.media query(媒体查询)

  @media screen and (max-width: 320px) {

  #fixedInput{

  width:57%;

  }

  }

  当浏览器的屏幕尺寸最大不超过320px,单独执行的代码

  如果这样的代码比较多的话,可以这样写,选择性加载CSS样式

  c.图片的自适应

  img{

  max-width: 100%;

  height: auto;

  width: auto9; /* ie8 */

  }

  d.流动布局和定位

  页面中使用float浮动,这样会随着屏幕的大小浮动。

  有时候使用定位position:abosulte;效果会更佳

  5.响应式设计的不足

  a.加载过多的资源,比如 自适应的图片都比较大,小屏幕手机仍是加载同样的图片,浪费流量

  b.增加开发成本 有的代码至少写两遍 css的

  c.不同屏幕的手机视觉体验归根到底还是有差别的

  解决办法:

  技术上

  使用离线存储,缓存不经常更新的资源比如js、css logo图片等;

  根据不同的屏幕加载不同尺寸的图片

  策划上

  设计时是以手机界面为主,pc端为辅

转载请注明出处:https://www.dedexuexi.com/divcss/jc/2354.html

关键词:技巧