文档章节

移动端前端开发与PC端比有哪些不同?

名字已被取
 名字已被取
发布于 2016/04/12 23:35
字数 937
阅读 306
收藏 5
1,移动端在布局跟js效果方面,与PC端有什么不同

先说布局方面:
PC端咱们最常用的就是固定宽度980px(也有960,1000,1200),然后水平居中

width:980px;margin:0 auto;

但移动端就不能这么用了,因为很多网页都是可以横屏看,也可以竖屏看;很多屏幕的分辨率不一样;
所以只要牵涉到移动端,就要牵涉到响应式(也叫自适应);如果是只针对移动端的项目,我平时主要想到的是320px宽 到 750px宽的兼容

然后是js方面,这个你应该问的更详细一些,因为有没有canvas对js影响很大;
第一、普通移动端网页(比如手机新浪网,手机淘宝,手机百度等)
这个在js方面和PC端区别不是太大;
主要的区别在于移动端没有了鼠标悬停(onmouseover);点击(onclick)还可以用;
多了触摸、滑动(这里我没自己写过原生的,只会用一些插件)
我常用的移动端插件:
TouchSlide 触屏滑动特效插件 大话主席
Touch.js
Swiper中文网
第二、canvas相关游戏
canvas相关的html5增加了好多js,不过我不做游戏方面,所以就不多废话了;

2,兼容性方面有哪些常见的坑要避免

这个和第一个、第三个都有重复,你再问的详细些吧;

3,如何适配不同的分辨率和屏幕尺寸

我说下我常用的(有任何不对的地方请大神指正)
原来没有iPhone6和iPhone6 plus时,设计图是640px宽的,
切图的时候就按照设计图正常切图;(按照标准的话,这里切图本来应该分成两种,一种是320px宽一倍图,一种是640px宽的二倍图;然后普通屏幕用一倍图,retina视网膜屏幕用 @2x 二倍图,可是我们的设计师太懒了,只给我一个640px宽的二倍图,这里求大神指教该怎样才能符合标准)
不过最后写css的时候,不要按照640px写,要按照320px写;所有图片和所有html标签的尺寸都要减半;如果图片img在设计图上的宽度是80px,css就要

width:40px;

如果一个按钮设计图上宽100px,你的css就要

width:50px;

后来有了iPhone6和iPhone6 plus,设计师给的设计图就变成了750px,按说由“二倍”变成了“三倍”,但是我们的设计师比较懒,不愿费事,所以现在我的解决方案还是按320px宽,img和所有html标签css减半处理;

4,如何测试

我最常用的是chrome的手机模拟器;
右键-审查元素(或F12),developer tools出来后,点击左上角那个手机;

5,哪里有完整项目的开发视频可以学习

完整项目的开发视频我还没有见过,我比较喜欢在慕课网上面看一些html5和css3的知识点;
劝你有时间的话尽量接实战项目吧,别总看视频,做一个项目比看多少视频都有用;


650px也可以的,只要是在640px-750px都可以;
下面是我常用的html和body的css;
至于em和rem,我认为只有在单屏的app上面(不出现滚动条那种);只要是出现滚动条的正常页面,就还是用百分比和像素px吧;

html{height:100%;font-size:62.5%;-webkit-text-size-adjust:none;}body{height:100%;
max-width:750px;min-width:320px;margin:0 auto;color:#6b6b6b;padding:0;font:normal 1.2em/1.6 
Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",
sans-serif;background-color:#f5f5f5;}


本文转载自:

名字已被取
粉丝 3
博文 44
码字总数 4065
作品 0
杭州
网页/平面设计
私信 提问
好程序员web前端分享移动前端开发和web前端开发的区别

好程序员web前端分享移动前端开发和web前端开发的区别,既然都是前端开发,两者肯定有紧密的联系,但是楼主主要询问区别,我就先简单聊一下相同点,之后在着重分析不同点。 移动前端开发和w...

好程序员IT
05/30
37
0
目前流行的前端的开源框架有哪些?

云适配创始人陈本峰如是说: 目前功能相似的能解决同类需求的主要是国外的开源框架,如Bootstrap、Foundation、Semantic UI。Bootstrap是由Twitter在2011年8月推出的开源WEB前端框架,集合C...

云适配
2014/07/17
34.2K
19
移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方
2017/12/26
0
0
全球移动技术大会2017 GMTC

因楼主不能及时查看报名信息,还望各位参会者能移步至活动家官网进行2017 GMTC全球移动技术大会报名,   在线报名地址:https://www.huodongjia.com/event-1270763315.html   点击上面链...

活动家
2017/03/14
78
2
全球移动技术大会2017 GMTC

因楼主不能及时查看报名信息,还望各位参会者能移步至活动家官网进行2017 GMTC全球移动技术大会报名,   在线报名地址:https://www.huodongjia.com/event-1270763315.html   点击上面链...

活动家
2017/03/14
62
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.4K
15
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
41
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部