来一发呼应式网页计划和挪动互联网

仓酷云

结构清晰，容易被搜索引擎搜索到，天生优化了seo

破洛洛文章简介：呼应式网页计划被提出以来，争辩就不休，实在中心成绩只要两个个：太多的资本哀求和无限的终端撑持之间的冲突、呼应式的网页计划和挪动终端在用户体验和视觉作风上的差别。
个话题比来很火爆，我也一向在存眷，呼应式网页计划和挪动互联网亲切相干，并因挪动终真个丰厚和提高而昌盛，而且是一个颇具争议的话题，我明天将和人人切磋下。上周写了个复杂的ppt在组内也许先容了下，感乐趣的话能够先看下这个PPT。
挪动互联网的近况和将来

在说到这个话题前，我们先看下网页计划和前端开辟的近况：

• 环球有凌驾53亿手机用户（包含传统手机）
  
• 国际3G用户凌驾1亿
  
• iPhone4手机在2010年出货量凌驾3000万部；
  
• iPhone4S上市前3天卖失落400万部；
  
• Android手机天天激活凌驾50万部；
  
• iPad出货量已凌驾2.5亿部；
  
• 估计到2015年，挪动互联网的数据流量将超出桌面真个流量。
  
• 。。。
  

嗯，人人大概已入手下手注重到，本人和身旁的伴侣也都愈来愈多的用上了iPhone大概android手机或平板——一两年前我们意料的挪动互联网时期行将光降，如今已然完成了——我们正处在挪动互联网疾速开展的时期——已不再是起步阶段了。
那末，甚么是呼应式网页计划？

呼应式网页计划是EthanMarcotte在客岁5月份提出的一个观点，简而言之，就是一个网站可以兼容多个终端——而不是为每一个终端做一个特定的版本。这个观点能够说是是为挪动互联网而生的！
也许人人之前会注重到，有良多出名网站都推出了iPhone或针对只妙手机的专门网站，好比3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。乃至前端察看之前也实验过用wordpress插件完成m.qianduan.net的挪动网站。
那末成绩就来了——我们要为每个设备做一个独自的网站吗？来让网站在每一个设备中失掉响应的视觉作风和操纵体验？
如许必将就要增添良多的事情量，并且良多仍是反复的。
我们在做页面的时分，一样平常很夸大模块化的观点，我们请求一个及格的模块要可以“可扩大、无侵染”，它要可以用在任何中央都可以一般的显现。呼应式网页计划与此相似——网站在任何设备中都可以一般适配，而不必为每一个设备独自做个子网站！
可是，产物司理和计划师大概仍是会请求网站在各个扫瞄器内里体现要千篇一律，乃至要像素复原——WTF！分歧的扫瞄器自己的功效、举动和处置体例都纷歧样，为何要体现完整一样？！
letthebrowserflow…
怎样做？

实在呼应式网页的完成很复杂，都是人人熟习的手艺。
mediaquery(媒体查询)

由于如今支流的智能终端都是基于iOS和Android的，而它们自带的扫瞄器都是基于webkit内核，以是我们能够完整利用viewport属性和mediaquery手艺完成网站的呼应性：

1. <metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1">

复制代码

前面的initial-scale暗示初始缩放，maximum-scale暗示最年夜缩放比例，1意味着不克不及举行缩放。

1. 1234567891011121314151617

复制代码

1. /*for240pxwidthscreen*/@mediaonlyscreenand(max-device-width:240px){selector{}}/*for360pxwidthscreen*/@mediaonlyscreenand(min-device-width:241px)and(max-device-width:360px){selector{}}/*for480pxwidthscreen*/@mediaonlyscreen(min-device-width:361px)and(max-device-width:480px){selector{}}

复制代码

固然依托屏幕宽度来举行适配是最复杂的办法，mediaquery有良多参数可使用好比orientation、aspect-ratio等，不太懂得的能够检察这篇具体的先容。
实在，mediaquery是呼应式网页计划中被用到最多的手艺。
fluidgrid(流体网格)

良多项目都在利用网格手艺(大概叫栅格)，前几年960.gs很盛行，可是跟着屏幕分辩率的广泛提拔，它已不太合适以后需求了，因而比来几年fluidgrid入手下手渐渐多了起来，这类手艺实在也很复杂，只是将格栅的单元由px酿成%，用百分比来把持页面每列的宽度，从而完成宽度的自顺应。
利用流体网格的网站可以依据屏幕宽度主动调剂页面中每列的宽度，从而包管页面的完全展示和基础功效。这也是一种不错的办法。
flexbox

flexbox是CSS3中的新手艺，它很壮大，能够完成良多我们之前没法设想的自顺应结构。
偶然我们但愿网站可以以webapp的表面出现给手机用户，flexbox是个不贰的选择。
好比，要完成如许的复杂布局：

登录/注册后可看大图

它很像一个app的布局，头部和底部流动，两头高度自顺应，用flexbox能够复杂完成：

1. 12345678910111213141516171819202122232425262728293031

复制代码

1. .flex_wrap{height:100%;display:box;display:-moz-box;display:-webkit-box;-webkit-box-orient:vertical;-moz-box-orient:vertical;box-orient:vertical;}.flex_bd{box-flex:1;-moz-box-flex:1;-webkit-box-flex:1;background:#E7E7E7;overflow-y:auto;}.flex_hd{background:#16364C;height:30px;line-height:30px;text-align:center;color:#FFF;font-weight:700;font-family:14px;}.flex_ft{background:green;height:30px;line-height:30px;text-align:right;}

复制代码

HTML代码：

1. 123456789101112

复制代码

1. <divclass="flex_wrap"><divclass="flex_hd">前端察看</div><divclass="flex_bd"><p>这里是主内容区</p><p>这里是主内容区</p></div><divclass="flex_ft"><ahref="http://www.qianduan.net/about"title="关于我们">关于我们</a><ahref="http://www.qianduan.net/copyright"title="版权声明">版权声明</a><ahref="http://www.qianduan.net/sitemap"title="网站舆图">网站舆图</a></div></div>

复制代码

固然这里还会有点儿成绩，好比主内容地区内容太多会被埋没失落，由于androidwebkit和iOS5之前的mobilesafari均不撑持overflow:scroll属性，可是这个成绩仍是很好办理的，好比在内里嵌套一个子容器，用js来给定个高度并利用定位来完成转动条从而完全展现内容，大概间接利用iscroll等js库来完成。好动静是，iOS5中safari入手下手撑持overflow:scroll了。
不敷的地方

假如你存眷网站功能之类的话，大概已发明了一些成绩：

• 加载良多不必要的资本，好比过剩的图片和款式内容
  
• 带脱期制
  
• 挪动终真个内存和CPU限定
  
• 图片巨细和屏幕巨细不婚配
  

嗯，任何一个计划都不是完善的，但也不会很糟。上面我们会提到一些可行的优化计划：
HTML5当地存储

关于撑持HTML5appcache/manifest特征的扫瞄器，我们能够将一些不常修改的静态资本存储到当地，好比css文件，css顶用到的图片，和一些js文件等：

1. 12345678910

复制代码

1. CACHEMANIFESTNETWORK:/*CACHE:img/bg.jpgimg/days.otfslideshow.jsslideshow.cssclassList.js

复制代码

然后将文件保留为manifest格局，并在HTML标签中引进便可：

1. <htmlmanifest="responsive.manifest">

复制代码

如许，用户在第一次会见的时分会慢一点儿，可是后续会见会很快，3G收集中也能为用户节俭带宽。
挪动设备优先

一种新的计划流程是，先为挪动设备计划界面，然后将PC端作为一个扩大。
如许做的优点是不言而喻的，挪动终端不会加载过剩的资本，也不会由于PC真个款式而重绘页面，同时也不会影响PC真个体现。
流体图片(fluidimage)

页面中的图片偶然会比手机/平板的屏幕（viewport）宽，如许会将页面庞器撑开，可是挪动扫瞄器又不克不及scroll，了局图片被切失落一部分，然后还会有一部份内容被埋没失落，用户看不到。
办理这个成绩的办法很复杂，将img的最年夜宽度设置成100%就能够了：

1. 12345678910111213141516170

复制代码

嗯，这里的条件是，没有给img标签设置宽度和高度，不然显现会有成绩。别的不倡议间接设置width=”100%”，由于会把小图拉年夜，含混显现。
同理，video标签和iframe标签的宽度也能够如许做，并且最好不要利用iframe，宽度是个成绩，功能也是一个方面吧。
CSS3image

这个办法有些冷艳
我们都晓得能够用::before和::after伪元素+content属性来静态显现一些内容大概做别的很酷的事变，并且在CSS2.1中即被撑持。不外content属性在CSS2.1中只能用于这两个伪元素中，而在CSS3中，任何元素都可使用content属性了，这个办法就是分离css3的attr属性和HTML自界说属性的功效：

1. 12345678910111213141516171

复制代码

然后用mediaquery来静态赋值：

1. 12345678910

复制代码

1. 12345678910111213141516173

复制代码

固然，这类办法也有不敷的地方，好比PC端宽屏幕必要加载两个图片文件，然后我们也要为此筹办多张图片文件等。
pre标签

有的网站，好比，像前端察看如许的手艺博客，会用pre来显现源代码，而扫瞄器对pre标签默许设置white-space:pre，如许，代码就不会换行，从而撑开子容器，形成内容被埋没的成绩：

登录/注册后可看大图

右侧的笔墨被埋没失落了。
办理办法很复杂：

1. 12345678910111213141516174

复制代码

固然，不但是pre标签，关头是white-space和word-break属性的值。
嗯，次要的手艺和技能实在就这些，人人不会生疏。上面是一些对照有效的工具甚么的：
呼应式网页计划工具与资本

外洋在呼应式网页计划上已走的很远了，已有良多工具和资本供我们参考和利用：
CSS框架

• 320andUp
  
• MobileBoilerplate
  
• GoldenGridSystem
  
• Gridless
  
• LessFramework
  
• 1140CSSGridSystem
  
• Fluid960GridSystem
  
• SimpleGrid
  
• Skeleton
  

有用工具

• Respond.js，让IE6-8撑持meidiaquery
  
• ResponsiveDesignTesting复杂而便利的测试网站的呼应性的工具，输出网址便可看到网站在分歧分辩率下的体现
  
• ResizeMyBrowser缩放扫瞄器工具，不外不撑持chrome和opera扫瞄器
  
• MediaQueryBookmarklet望文生义，这是一个关于mediaquery的书签工具
  
• ProtoFluid在线检察和调试网站对挪动终端兼容性的工具，很赞
  
• ScreenFly和ProtoFluid相似
  
• responsivepx更直不雅的测试网站对分歧分辩率的适配性
  

争辩和总结

呼应式网页计划被提出以来，争辩就不休，实在中心成绩只要两个个：太多的资本哀求和无限的终端撑持之间的冲突、呼应式的网页计划和挪动终端在用户体验和视觉作风上的差别。前者不克不及容忍在强大的手机/平板上经由过程龟速的3G/2G收集来加载一个粗笨的PC端页面，尔后者纠结呼应式网站不像手机网站。
我的设法是，详细成绩详细剖析，好比，强内容的网站，完整能够实验呼应式网站，而器重觉和功效的网站，则能够实验创建一个自力的挪动网站。
别的，明显，呼应式网页计划的年夜部分手艺，是能够用在WebApp开辟中的。
</p>
目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素.

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

Dreamweaver在所见即所得添加链接，也可以先选中文字或图片然后在属性栏中的链接栏后的一个小圆圈，用鼠标点击小圆圈按住不放拖动出箭头然后指向文件即可。

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。

不管老师做怎样的解释，而我却对它感到很是吃力，诸如里面有许多不知道的功能。