移动端web开发的几种方式,web端和移动端
目前主流的移动WEB开发框架有哪些
目前主流的移动WEB开发框架有哪些？Web框架也可以理解为B/S(Brouser/Server)框架，是一种基于浏览器载体的框架，包含前端、后端和数据库三个大的方向，各个方向的工具技术都不一样。现在主流的工具技术包含.NET、SqlServer、Bootstrap等，开发工具也会不一样。
web开发框架
Web前端开发技术框架包括三个要素：HTML、CSS和JavaScript，当然还有很多高级的前端框架，比如bootstrap、Jquery等。
Web后端技术框架也有很多，比如.Net、JAVA、PHP等，各大语言都有其开发架构和工具，像.NET的MVC架构和Visual Studio工具，JAVA的J2EE架构和Eclipse工具。
数据库现在有三种主流的关系型数据库：Mysql\SQLserver\Oracle，还有Nosql非关系型数据库：Redis、Mogodb等。开发工具有SQL Server Management Studio、Navicat等。
最流行的四种移动端布局方式，看这一篇文章就够了
众所周知，pc端呢目前处于一种三家分晋，即三种内核（webkit，blink，gecko），当然算上马上要更换内核的IE那就是四个。而我们的移动端呢，那就是万余基于webkit了，所以各位进行移动端web开发时，只考虑webkit的适配就可以了，怎么样，开不开心 ？
我们先来看看什么是视口，视口就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口，他又可以分成一下四种
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。
为了使网站在移动端有最理想的浏览和阅读宽度而设定
理想视口，对设备来讲，是最理想的视口尺寸
需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
最标准的viewport设置
视口宽度和设备保持一致
视口的默认缩放比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0
ps：注意二倍图或者三倍图问题
流式布局，就是百分比布局，也称非固定像素布局。
通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
流式布局方式是移动web开发使用的比较常见的布局方式。
父盒子开启display：flex后，默认为不换行，所以使用flex-wrap：wrap；使其换行
使用justify-content: space-around; 使其子盒子主轴间距平均分配
使用align-content: space-around; 使其子盒子侧轴间距平均分配
方案1
①假设设计稿是750px
②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）
③每一份作为html字体大小，这里就是50px
④那么在320px设备的时候，字体大小为320/15就是? 21.33px
⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的
⑥比如我们以750为标准设计稿
⑦一个100 100像素的页面元素在? 750屏幕下，? 就是 100/ 50? 转换为rem? 是? 2rem 2rem? 比例是1比1
⑧320屏幕下，? html字体大小为21.33? 则 2rem=? 42.66px? 此时宽和高都是 42.66? 但是宽和高的比例还是 1比1
⑨但是已经能实现不同屏幕下? 页面元素盒子等比例缩放的效果
总结：
①最后的公式：页面元素的rem值 =? 页面元素值（px） /? （屏幕宽度? /? 划分的份数）
②屏幕宽度/划分的份数就是 htmlfont-size 的大小
③或者：页面元素的rem值 =? 页面元素值（px） /? html font-size 字体大小
方案2
1.less+rem+媒体查询
2.lflexible.js+rem
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分
超小屏幕（手机，小于 768px）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
直接拿Bootstrap 预先定义好的样式来使用
修改Bootstrap 原来的样式，注意权重问题
学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
移动开发技术有哪些？
现在有3种开发技术：web，native，hybrid。移动web 开发：使用的语言是 HTML，CSS，JS，简单易学，能够开发移动应用网站，具备跨平台性，但是体验效果不好，而且不能提交到应用市场；
native 原生开发：主流移动平台是iOS 和 Android，所使用的语言是Object-c ， swift，java，能够开发移动 APP，不过学习成本高，还需要开发多套平台应用，比较麻烦。
hybrid 混合开 发：这种模式是将web 和原生技术结合起来，通过简单的web 语言编写前端，原生技术提供各项功能，可以跨平台的，现在有很多支持这种开发模式的平台，国内口碑比较好的就是App Can了，
会web 语言就可以开发移动 APP，它帮你封装好了原生插件，直接调接口就行，又简单又快。