整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
超文本标记语言移动站(HTML MOVEL STATION)是指根据你使用的移动终端，适合你的网站类型。你可以把它理解为你电脑网站的移动版本。
你为什么想成为一个移动电话站？
客户经常会问，他们的手机可以访问哪些计算机网站，为什么他们需要成为手机网站？智能手机访问该网站的电脑版没有问题，但目前仍有大量用户使用非智能手机。虽然火狐、chrome等浏览器也能达到访问的效果，但呈现的网页非常凌乱，不能给用户带来好的体验。智能手机也很难通过浏览器缩放功能获得良好的浏览体验，智能手机访问计算机网页的速度远低于访问移动网页的速度。在手机互联网流量昂贵的环境中，手机版本为用户节省了流量。
HTML5移动站建设的优势:
1、手机网站拥有良好的移动体验
当用户使用移动浏览器访问您的网站时，他不会出现在您的电脑网站上，但会自动检测到使用该设备后显示的html移动台。该网站更加符合移动终端的操作习惯，使用起来更加流畅。
2、手机网站的推广成本低
推广一个html移动电话站只需要很少的成本。用户只要连接到互联网，就可以扫描代码或输入网址来直接访问体验。与应用程序相比，应用程序也需要复杂的操作，如下载应用程序，用户更愿意拥有html的初始试用体验。
3、手机网站建设速度很快。
超文本标记语言已经存在多年，其发展技术已经成熟，这也为超文本标记语言手机站的发展速度提供了一定的保证。如果开发一个应用需要至少2个月的时间，那么html手机站需要的时间不到一半。
4、手机网站建设成本低
由于成熟的html网站建设技术，这种类型的网站建设成本通常比今年才开始的APP开发成本更便宜、更实惠。
文笔者从实际工作经验出发，结合参考相关文章，对移动端产品（APP、小程序、H5）从13个方面进行了比较分析，与大家分享。
移动端产品包括小程序（本文特指微信小程序）、APP（安卓、IOS）、H5页面。其中：
基于工作实际体验以及参考相关文章（文末有备注参考文章地址），下面将分别从运行环境、系统权限、推广方式（拉新）、运营手段、支付能力、登录方式、用户体验、抗风险能力（防止被封禁）、访问入口、开发成本、迭代周期、外部限制、适用情形这13个方面来比较总结移动端产品之间的不同特点。
（1）APP
Android：
转发推广海报（嵌套二维码）到微信好友、朋友圈、QQ空间、QQ好友->二维码扫码->打开网页到应用市场下载；或者生成推广链接发送给好友或朋友圈分享 ->用户点击推广链接打开浏览器到应用市场下载 。
IOS：
（2）小程序：
（3）H5
（1）APP
（2）小程序：微信内推送服务通知；
（3）H5：邮件、给用户发送短信。
（1）APP：
（2）小程序：
（3）H5：和APP类似，是在网页内进行登录的。
（1）APP
（2）小程序：多上线几个小程序；
（3）H5：多准备几个域名。
（1）APP
（2）小程序
（3）H5
（1）APP：需要分别上架安卓应用市场和苹果APP store，同时需要提交许多审核资料，流程繁琐，审核时间也很长。
附二者应用市场审核区别：
附IOS上线APP方式： IOS上线需要拥有苹果公司的开发者帐号，分成两类：
其中，个人开发者帐号开发的APP，需经苹果商店，才能下载安装；而企业开发者帐号开发的APP，只能自建发布网站，用户到网站上下载。
（2）小程序：小程序上线需要提交微信审核，第一次审核（小程序审核官方给的时间期限为7个工作日以内给出审核结果）会慢些。
（3）H5：随时上线，线上可以实时看到修改情况，因此比较灵活迭代，不受审核的限制。
（1）APP：依赖安卓和IOS系统提供的能力，不过这些操作系统大多稳定，外部限制较少。
（2）小程序：
（3）H5：限制最小，基本上只要生成个可以用的链接，就可以在各种平台上查看了。
（1）APP：
（2）小程序
（3）H5
如文章有欠妥之处，欢迎各位方家批评指正。
http://www.woshipm.com/pd/1315132.html
本文由 @初出茅庐 原创发布于人人都是产品经理，未经作者许可，禁止转载。
题图来自Unsplash，基于CC0协议。
解移动端页面与PC端页面开发的区别，学习移动端页面的开发流程。
视口
视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看，可以用 meta 标签，name=“viewport ” 来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。
设置方法如下( 快捷方式：meta:vp + tab )：
<head> ...... <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> ...... </head>
pc端与移动端渲染网页过程：
视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，物理像素可以理解为屏幕上的一个发光点，无数发光的点组成的屏幕，视网膜屏幕比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9。
图像在视网膜屏幕上显示的大小和在一般屏幕上显示的大小一样，但是由于视网膜屏幕的物理像素点比一般的屏幕小，图像在上面好像是被放大了，图像会变得模糊，为了解决这个问题，可以使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小，就可以解决模糊的问题。
清晰度解决过程示意图：
背景图强制改变大小，可以使用background新属性
background新属性
background-size:
length：用长度值指定背景图像大小。不允许负值。
percentage：用百分比指定背景图像大小。不允许负值。
auto：背景图像的真实大小。
cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
PC及移动端页面适配方法
设备屏幕有多种不同的分辨率，页面适配方案有如下几种：
1、全适配：响应式布局+流体布局
2、移动端适配：
流体布局+少量响应式
基于rem的布局
流体布局
流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线无法用百分比，可以使用样式中的计算函数 calc() 来设置宽度，或者使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸。
calc()
可以通过计算的方式给元素加尺寸，比如： width：calc(25% - 4px);
box-sizing
1、content-box 默认的盒子尺寸计算方式
2、border-box 置盒子的尺寸计算方式为从边框开始，盒子的尺寸，边框和内填充算在盒子尺寸内
响应式布局
响应式布局就是使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局。响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。
相应布局的伪代码如下：
@media (max-width:960px){
.left_con{width:58%;}
.right_con{width:38%;}
}
@media (max-width:768px){
.left_con{width:100%;}
.right_con{width:100%;}
}
基于rem的布局
首先了解em单位，em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。
cssrem安装
cssrem插件可以动态地将px尺寸换算成rem尺寸
下载本项目，比如：git clone https://github.com/flashlizi/cssrem 进入packages目录：Sublime Text -> Preferences -> Browse Packages… 复制下载的cssrem目录到刚才的packges目录里。 重启Sublime Text。
配置参数 参数配置文件：Sublime Text -> Preferences -> Package Settings -> cssrem px_to_rem - px转rem的单位比例，默认为40。 max_rem_fraction_length - px转rem的小数部分的最大长度。默认为6。 available_file_types - 启用此插件的文件类型。默认为：[".css", “.less”, “.sass”]。
1、结合流体布局和响应式布局制作天天生鲜移动端首页页面
2、使用基于rem的布局方式制作天天生鲜移动端首页页面
天天生鲜首页效果图如下：
*请认真填写需求信息，我们会在24小时内与您取得联系。
