移动端前端开发概述

2019阿里云全部产品优惠券(好东东,强烈推荐)
领取地址 https://promotion.aliyun.com/ntms/yunparter/invite.html

推荐:关于移动端前端开发和PC端前端开发的一点总结

[最近纠结与移动端前端开发和PC端前端开发的一些不同,上网找了些资料都不是很全面 现在来总结一下]

1 移动端开发的背景

    1.全球移动端设备将会超过人口总数;     2.移动端上网时间超过pc端上网时间;     3.平板电脑、电子阅读器、智能电视和手机等设备每天下载数以百万计的应用 。

    总结:
    面对这样的挑战,让头脑与目光保持一定的前瞻性是很重要的。      要想使自己的产品在占有率及收入等方面取得持续性的成功,产品设计与开发的策略必须符合移动应用的未来发展趋势。


2 移动端开发和pc端开发的异同

2.1 性能差异

    这是最显著的一个差异。对移动开发影响最大的,就是性能问题,特别是功耗和流畅性问题。  

2.2 操控方式

    与PC机普遍采用鼠标操控不同,移动设备普遍采用触控技术,操控方式的不同,在页面交互的时候就要 利用好触控的事件增加用户体验。

2.3 屏幕尺寸

    移动设备的屏幕尺寸 一般比较小,而且分辨率多种多样。 这样就需要在页面展示上面做 好兼容同时要 注意点击区域的大小,尺寸过小的按键以及毫无间隔空间的布局极易引发误操作。

2.4 交互方式

    为了移动设备屏幕的屏幕尺寸的限制,为了给用户提供更大的阅读空间和沉浸式的体验, 越来越多的应用采用抽屉式导航,推崇“隐藏的艺术” 。

2.5 流量

     移动客户端本身的特性,决定了用户比较关注流量的消耗。       所以 在页面布局和制作上,要尽量精简,加快页面加载速度,优化用户体验。 


3 移动端开发要注意的技巧

3.1 保持一个简单的布局

 屏弃冗余的结构,保持页面的简单干净,内容一目了然。   见例子:vsco.co/     

3.2 使用Medial Queries

    简单的说Medial Queries是一个媒体查询,可以根据设置的尺寸,查询出适配的样式。好处就是可以根据用户的使用设备的当前宽度,让Web页面加载一个备用的样式,实现特定的页面风格。     @media screen and (max-width:300px) { /*Tiny styles*/ }     @media screen and (max-width: 600px) { /*small styles*/ } 
    @media screen and (max-width:900) { /*big styles*/ } 

推荐:javascript - 求推荐移动端开发的书籍(web前端)

[求推荐移动端开发的书籍!或者有这方面的资料也行,谢谢!]

3.3 定义断点

    定义断点,那么 断点是什么?简单的描述就是,设备宽度的临界点, 那么在移动开发设计中,常见的断点有六种, 我们今后的Medial Queries条件判断就可以根据这几个断点来定。

    (1). 第一个断点群体就是针对于智能手机设置,他的宽度是小于480px;     (2). 第二个断点是高智能移动设备,比如说Ipads设备,他的宽度是小于768px;     (3). 添加一个小于320px的断点,针对于小型的移动设备;     (4). 还可以添加适用于平板设备的断点,大于768px,小于1024px。 


3.4让你的布局更灵活

    页面设计可以适当地使用流体布局(也就是大家常说的自适应布局、液体布局、百分比布局)最适合各种类弄屏幕大小,结合正确的medial Queries,你可以制作出适应于任何可能出现的设备页面布局。   

3.5图片的自适应

    一张图片,有什么方法可以让他在不同的设备上显示能根据屏幕大小自适应?     处理这种效果有一个方法,如果你的web页面不会受到带宽的影响(不考虑性 能),你可以先制作一图片让其适合最大屏幕,然后通过样式来控制不同设备下显示的大小;另外一种办法就是你可以为每个断点准备不同的图片。

3.6检查你的viewport

    玩过移动端的同学可能都知道,许多移动端的浏览器模拟了桌面PC机下浏览器,     你的web页面在移动端的浏览器浏览时,整个页面会直接压缩显示在一个屏幕下。


     参数:     Viewport:可视区域     Width:viewport的宽度,取值device-width     Initial-scale:初始缩放比例,取值1.0     Minimum-scale:允许用户缩放最小比例,取值1.0     Maximum-scale:允许用户放大最大比例,取值1.0     User-scalable:是否允许用户缩放     MobileOptimized浏览器不会自动调整文件大小,无法拉伸缩放     <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">     <meta name=“format-detection” content=“telephone=no”>     <meta name="format-detection" content="email=no">     <meta name="format-detection" content="address=no">

4 移动端涉及的前端技术

4.1 html5

    语义更好, 设备兼容特性更好,支持网页端的Audio、Video等多媒体功能, 能通过简单的代码实现更炫的效果,可以进行跨平台的使用,等等……

4.2 css3

    强大的层叠样式表加强版,能通过简单的代码实现圆角,阴影,颜色渐变等等效果,减少图片的应用,增加用户体验。

4.3 js

    Zepto.js。移动页面中的jquery,轻量级的手机js框架,Gzip压缩后9.7k,能完成各种dom结构操作,ajax请求,触屏事件,等等。     

4.4 响应式布局搭建利器

      foundation  , Ink,grumby,Maxmertkit,Bootstrap等等     利用这些利器,能够快速搭建适应各种屏幕分辨率的自适应布局。

4.5测试工具

                                         远程调试工具weinre
    www.(csdn放太多网址竟然保存不了,晕死,www.开头)     npmjs.org/package/weinre(csdn放太多网址竟然保存不了,晕死,www.开头)

五.移动端的兼容和处理

    总结了一些:

   1.分辨率兼容(包括布局,断点设置)    2.图片兼容(主要体现在页面设计和css处理)    3.导航的设置



Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败,只有没到的成功。 

推荐:浅谈前端移动端页面开发(布局篇)

[前言的一些碎碎念:最近一直在写移动端的页面,不过一直是用的别人造好的轮子,很多时候并没有想那是为什么,那是怎么样要那么写,就跟着别人的文档去了。本以为自己对移

相关推荐