江苏龙网

  1. 首页 > 生活 > >

怎样使用HTML5开发移动web

针对题主的问题，笔者从以下几个方面给予分析：
一、移动web开发现状：
当下人们使用频率最高的设备就是手机，伴随着时代的更迭，也逐步加深了人们对网站的认知。企业宣传与营销早已把网站建设归入重要途径之一。因此，移动端网站建设也成趋势。
（图片来源于网络）
移动web 开发是指需要适配移动设备的网页开发，本质上与pc端web开发没有什么太大的区别，也都使用的是HTML/CSS/JavaScript技术。
二、移动端与pc端 web开发二者的区别
1、浏览器不同
移动端的浏览器与pc端不同
怎样使用HTML5开发移动web

（pc端浏览器 图片来源于网络）
怎样使用HTML5开发移动web

（移动端浏览器 图片来源于网络）
谷歌浏览器、UC浏览器、QQ浏览器、百度手机浏览器、360安全浏览器、搜狗浏览器、猎豹浏览器等国内的手机浏览器没有自主研发的内核，都是根据webkit内核修改而来的，国内的操作系统也是基于Android系统修改的。因此在移动端，css3属性只需要加webkit前缀即可。
2、屏幕尺寸
移动端设备尺寸不一样，不同手机屏幕与页面进行适配，调整自适应宽度。了解viewport即视口，适用于移动端开发时，而PC端开发需要基于版心进行布局。
移动端设备屏幕尺寸有以下这些：
Android：320*480 480*800 540*960 720*1280 1080*1920 2k屏 4k屏
iPhone：640*960 640*1136 750*1334 1242*2208
3、布局方式
移动端的特点:
1.手机端的浏览器版本较新，对H5的支持比较好，所以手机端的兼容性问题比PC端小很多。
2.手机端屏幕较小，能够摆放的内容较少。
由此问题来了：布局的时候怎么解决屏幕大小不同的问题？
PC端需要固定版心，版心在所有分辨率的电脑中都是一样的，如新浪等等。
移动端无法设置版心，因为移动端的设备屏幕本身就小，设置版心就显得不太合适。因此移动端大多会采用流式布局。这种布局方式又称为百分比布局，在移动端开发布局方式中非常常见。流式布局的特征之一是，不会完全还原设计图，但是固定高度和自适应宽度。这种布局方式使移动端操作起来比较简单，也是非常常用的一种布局方式。
另外，建议如果你要学习移动端开发，需要学习一下flex布局和响应式布局，第一种布局方式也是移动端的常见布局方式之一。
三、移动端调试问题
手机设备有各式各样的，屏幕尺寸也各自不同，尤其是安卓端，在页面预览时总有一些麻烦。事实上，在实际工作中，除了测试部，开发者们是没有足够的设备去测试的，就算能测，效率极其低下，所以开发者们通常都用浏览器的手机模拟器来模拟设备进行测试。
以下以chrome浏览器为例，介绍手机模拟器的使用：
第1步：打开浏览器，按下F12键，点击下面第二个图标：
怎样使用HTML5开发移动web

第2步：以下就是手机模拟器界面：
怎样使用HTML5开发移动web

在这个界面里可以选择各种手机设备进行调试。
【怎样使用HTML5开发移动web】 四、移动web开发的框架
用于移动web开发的框架比较多，在此列举几个：
1.Vue框架
Vue是一套渐进式框架，用于构建用户界面。就目前来说，国内最火的一个前端框架就是vue.js。Vue是一种可以自底向上逐层应用的框架，视图层是其核心库唯一的关注，不仅简单易上手，也便于整合既有项目或第三方库；另一方面，当与各种支持类库以及现代化的工具链结合使用时，它也完全能为复杂的单页应用提供驱动。


推荐阅读


上一篇：洛杉矶有哪些特色的民宿

下一篇：据说爱奇艺用了 迅雷的星域CDN 来支持视频加速，效果怎样 稳定性好吗