大熊君{{bb}}移动开发之旅（第一季）_html/css_WEB-ITnose
一，开篇概述
Hi，大家好！大熊君又和大家见面了，从这篇文章开始我要和大家聊聊移动开发的话题，这部分文章共8季，分别从不同角度来讲解什么是移动开发？移动开发涉及到什么方面的技术点以及移动开发中的常见问题和疑难杂症。
我们指的移动开发，实际上就是使用web技术------它主要包含“h5，css3，javascript”等技术，通过（Phonegap / Cordova-一个跨平台的并且已经有一整套相关生态系统包括工具，论坛，开发者。你能通过它来利用HTML5的API以及原生API。
开发出一个真正的移动应用。此平台也遵从HTML5规范以协助web应用的转化。）在跨平台性，可移植性方面，具有无可比拟的优势。
背景了解：下面是一张信息图，为我们详细对比了纯web（HTML5），混合App（Hybrid）和原生App（Native）三种移动开发路线的差异。
一些重点差异：
开发难度移动web和混合App开发难度对于web开发者来说相对较低，而且可以充分利用现有的web开发工具和工作流程
发布渠道和更新方式------混合App可以在应用商店App Store发布，但可以自主更新，而原生App的更新必须通过应用商店App
移动设备本地API访问------混合App可以通过JavaScript API访问到移动设备的摄像头，GPS，而原生App可以通过原生编程语言访问设备所有功能。
跨平台和可移植性------基于浏览器的移动web最好的可移植性和跨平台表现；混合App也能节省跨平台的时间和成本，只需编写一次核心代码就可部署到多个平台，而原生App的跨平台性能
搜索引擎友好------只有移动web对搜索引擎友好，可与在线营销
货币化------混合App除广告外，还支持付费下载及程序内购买；原生App的程序内购买金额2012年首次超过
消息推送------只有混合App和原生App支持消息推送，这能增加用户忠诚度。
二，进入移动开发话题
就基于web技术的移动应用开发来说，其实本质是不变的，与PC端开发很类似，所以说换汤不换药，不管什么类型的应用，必须有一个友好的界面交互，首先就是布局的问题，移动布局和传统的基于PC
浏览器布局方式还是有区别的，所以今天就从布局说起，由浅入深逐步提高。好了进入重点部分，先看一个小栗子，如下好比这样：
我们分为三步骤去做这件事：
（1），准备测试虚拟设备，我这里用的是chrome自带的小工具
（2），建立一个html页面，如“bb.html”bb.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /> 6 <meta content="yes"name="apple-mobile-web-app-capable"/> 7 <meta content="black"name="apple-mobile-web-app-status-bar-style"/> 8 <meta name="format-detection"content="telphone=no"/> 9 <title>大熊君移动开发之旅</title>10 <link rel="stylesheet" href="bb.css" media="all">11 </head>12 <body>13 <header class="header">大熊君移动开发之旅</header>14 15 <div class="wrap-page">16 <div class="page">17 <p>哈哈哈，我是大熊君{{bb}} (●'?'●))18 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 19 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 20 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 21 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 22 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 23 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 24 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 25 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 26 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 27 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 28 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 29 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 30 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 31 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 32 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 33 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 34 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 35 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 36 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 37 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 38 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 39 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 40 <p>哈哈哈，我是大熊君{{bb}} (●'?'●)) 41 </div> 42 </div> 43 <footer class="footer">如果大家喜欢，推荐哦~~~</footer> 44 </body> 45 </html>
css代码如下：
1 .header,.footer,.wrap-page{ 2 position:absolute; 3 left:0; 4 right:0; 5 color:#f8f8f8; 6 } 7 .header,.footer{ 8 height:44px; 9 background-color: #fff;10 text-align: center;11 z-index:900;12 line-height:44px;13 background:#C10066;14 }15 .header{16 top: 0;17 border-bottom: 1px solid #f00;18 }19 .footer{20 bottom: 0;21 border-top: 1px solid #f00;22 }23 .wrap-page{24 top: 44px;25 bottom: 44px;26 overflow-y:auto;27 -webkit-overflow-scrolling:touch;28 color:#333;29 }30 .page{31 padding: 10px;32 }33 .page p{34 margin-bottom: 10px;35 }
以下是实际效果，如下：
三，分析一下
1，
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />// 上面的代码依次表示设置宽度为设备的宽度，默认不缩放，不允许用户缩放（即禁止缩放），在网页加载时隐藏地址栏与导航栏（ios7.1新增）。
2，
width ? viewport的宽度height ? viewport的高度initial-scale ? 初始的缩放比例minimum-scale ? 允许用户缩放到的最小比例maximum-scale ? 允许用户缩放到的最大比例user-scalable ? 用户是否可以手动缩放
3，
-webkit-overflow-scrolling:touch 来实现滚动，当然对于不支持的，也可以使用“iscroll”来兼容，而iscroll同样也需要一个固定高度的容器来包裹可滚动的内容。
小结一下：移动端布局很多都采用Css3提供的属性支持，如果不兼容或者性能不好可以通过js做兼容处理，具体布局时遵循三个原则，1------使用百分比方式，不论宽高还是字体大小是一样处理的方式。
2------使用相对布局方式处理。3-------设置meta标签进行移动应用的一些预设处理。
（四），最后总结
（1），使用百分比方式合理布局。
（2），使用相对布局方式处理。
（3），不多练习不断尝试多种布局体验，总之空间有限想法无限。
哈哈哈，本篇结束，未完待续，希望和大家多多交流够沟通，共同进步。。。。。。呼呼呼……(*^__^*)
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
了解HTML，CSS和JavaScript：初学者指南
Apr 12, 2025 am 12:02 AM
WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。
HTML：结构，CSS：样式，JavaScript：行为
Apr 18, 2025 am 12:09 AM
HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。
HTML，CSS和JavaScript的未来：网络开发趋势
Apr 19, 2025 am 12:02 AM
HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。
HTML的未来：网络设计的发展和趋势
Apr 17, 2025 am 12:12 AM
HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。
HTML与CSS vs. JavaScript：比较概述
Apr 16, 2025 am 12:04 AM
HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。
HTML：建立网页的结构
Apr 14, 2025 am 12:14 AM
HTML是构建网页结构的基石。1.HTML定义内容结构和语义，使用、、等标签。2.提供语义化标记，如、、等，提升SEO效果。3.通过标签实现用户交互，需注意表单验证。4.使用、等高级元素结合JavaScript实现动态效果。5.常见错误包括标签未闭合和属性值未加引号，需使用验证工具。6.优化策略包括减少HTTP请求、压缩HTML、使用语义化标签等。
HTML与CSS和JavaScript：比较Web技术
Apr 23, 2025 am 12:05 AM
HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。
HTML：是编程语言还是其他？
Apr 15, 2025 am 12:13 AM
HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。
