移动前端开发与web前端开发

最新推荐文章于 2022-07-15 20:52:08 发布

田品吕口-方

最新推荐文章于 2022-07-15 20:52:08 发布

阅读量569

点赞数

文章标签：移动端开发 web开发 hybrid web app

基础准备

首先我们要有HTML/HTML5、CSS/CSS3基础知识（会简单的切图就可以了），如果能懂点JS那就更好啦。

其次我们要清楚一些基本概念，不然出去吹牛逼听不懂别人说的东西或者自己说出来是非常明显的错误就很尴尬啦，为了能自信满满的吹水，我们来了解下面几个基本概念吧。

移动端网页开发
在移动端表现良好的页面，如新浪网，腾讯新闻网，手机凤凰这些网站页面在移动端也有不错的表现。

移动端web app开发
简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。或者更多的是如手机taobao，手机美团，手机微博等类似web app，他们没有很明显的使用一些native功能，但是交互、设计的和app类似的网页，它是要依托浏览器来查看的。当然近期行业内还推出了多种形式的类app/webapp应用技术，比如大家熟知的微信小程序、谷歌推出的PWA（获得与安卓原生应用同等权限）、DCloud公司推出的流应用（获得W3C及国内手机厂商支持）等。

hybrid app开发
也叫【套壳开发】，简单来说就是通过写特定的代码生成跨平台的web app，类似react native，phonegap，cocos2d等。可以用一些前端native开发框架或者是在移动端网页的基础上打包生成app。

web前端开发

用最简单粗暴的方式来讲，就是用html + css + javascript来构建一个供人浏览的网页，其中又包括两个主要的分类：pc端网页开发以及移动端网页开发（很多时候被称为h5开发）。

那么这两者有什么区别呢，依据本人的经验来看，pc端的网页开发要考虑更多样式兼容性的问题，ie，火狐，chrome等各大浏览器内核不一，使用到新特性的时候需要给样式加上最基础的兼容前缀，所以最好的做法还是尽量避免使用新样式属性来完成预期的效果。在移动端开发网页就基本不用考虑这种浏览器间的兼容问题了，手机上的浏览器绝大部分是webkit内核的，所以在移动端网页开发的时候能用到很多新的特性，像是极大简便了页面布局的flex布局，还有各种语义化的标签等。但是由于移动端手机的尺寸种类繁多，所以在这方面要下点功夫，举个最简单的例子就是一行本来是能显示3个目标的item但是在某些小尺寸的手机上只能显示2个。其他还有一些细微的区别例如js库的选择（pc上用jQuery，移动端用zepto，PC+移动+安卓+IOS用TUOCH UI等）。

在这里插入图片描述
　
　像一个官方网站肯定是需要在pc上以及移动端都能有较好的显示效果，为了解决这个问题的方案主要有2种。一是使用像是bootstrap这种自适应的网页UI框架，根据设备的宽度不同显示不同的效果。但是现在主流还是做2套UI再根据UserAgent等来分别显示不同的页面，这样在移动端的显示能更灵活一点。

移动前端开发

主流的移动前端开发指的是Android一级iOS的原生开发，什么是原生开发，最简单来讲就是Android用java写iOS用ObjectC（swift）写。这样做出来的app在浏览体验上肯定是优于网页的。

由于原生开发需要两个端开发，开发周期长（原生开发难度比web开发要大），所以最近很多公司都会把产品的一些页面抽出来用webview来实现，甚至还可以使用phonegap将你的网页打包成app（可以理解为纯webview的一个app）。这样的app称为hybrid app，可以说是在开发效率以及用户体验上各有取舍得出来的产物吧。

移动前端开发可分为：

手机网页开发
这部分跟web前端开发差别不大，使用的技术都是html+css+js。区别为手机浏览器是webkit的天下，pc端是IE的天下。

App前端开发
使用的技术也是html+css+js，但它需要基于PhoneGap，React Native等开发平台调用手机核心功能接口（包括地理定位，加速器，联系人，声音和振动等）模拟native app，这部分跟web前端开发完全不同。最终代码发布要分别编译成各系统平台的app。

1、流式布局，即百分比自适应布局

将body下的div容器的样式设置如下：

div{
width:100%;
}

2、viewport视口

在head标签中，添加如下：

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0"/>

设置宽度width，设置成和设备一样的宽度device-width设备宽度

设置默认的缩放比initial-scale 1.0

设置是否运行用户自行缩放user-scalable 0 1 no yes

还有其他的，如：

maximum-scale：最大缩放比，大于0的数字

minimum-scale：最小缩放比，大于0的数字

可以将width不写么？

可以，仅仅固定字体的大小，viewport的width即使设置了固定值 ,但是设置了initial-scale这个属性后，会自动把width变成device-width(即使width不设置，也会默认设置width=device-width).

针对移动WEB端的基础样式：

*,::before,::after{
/*选择所有的标签*/
margin:0;
padding:0;
/*清楚移动端默认的 点击高亮效果*/
-webkit-tap-highlight-color:transparent;
/*设置所有的都是以边框开始计算宽度 百分比*/
-webkit-box-sizing:border-box;/*兼容*/
box-sizing:border-box;
}
body{
font-size:14px;
font-family:"Microsoft YaHei",sans-serif;/*设备默认字体*/
color:333;
}
a{
color:333;
}
a:hover{
text-decoration:none;/*不显示下划线*/
}
ul,ol{
list-style:none;
}
input{
border:none;
outline:none;
/*清除移动端默认的表单样式*/
-webkit-appearance:none;
}
/*公共样式*/
.f_left{
float:left;
}
.f_right{
float:right;
}
.clearfix::before,.clearfix::after{
content:"";
height:0;
line-height:0;
display:block;
visibility:hidden;
clear:both;
}

 text-decoration解释

<html>
<head>
<style type="text/css">
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
a {text-decoration: none}
</style>
</head>

<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<p><a href="http://www.w3school.com.cn/index.html">这是一个链接</a></p>
</body>
</html>

田品吕口-方

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动前端开发与web前端开发

基础准备首先我们要有HTML/HTML5、CSS/CSS3基础知识（会简单的切图就可以了），如果能懂点JS那就更好啦。其次我们要清楚一些基本概念，不然出去吹牛逼听不懂别人说的东西或者自己说出来是非常明显的错误就很尴尬啦，为了能自信满满的吹水，我们来了解下面几个基本概念吧。移动端网页开发在移动端表现良好的页面，如新浪网，腾讯新闻网，手机凤凰这些网站页面在移动端也有不错的表现。移动端web...
复制链接

扫一扫