移动互联网终端

现在用户对于产品的选择不仅仅是内容的完善，同时也更加注重产品的体验以及交互，因此前端开发工程师的重要作用愈发明显。2019年已经接近一半，很多准备入行前端开发工程师的或者还在犹豫小伙伴们，不知道准备得怎么样了呢？今天来给大家讲讲，在2019年，我们学习前端开发，如何才能高效学会前端开发？ 零基础起步学前端开发 学习任何一门技术，都是从零开始的，前端开发也是一样。从事编程开发工作，必须先从语法基础开始学习，通过掌握语法最终组成产品效果。前端开发的基础语法包括：HTML+CSS+JavaScript，这是前端开发最基本也是最核心的3个语言。 　　1、HTML就是超文本标记语言，组成网页内容的最基本语言。你可以直接说他是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。 　　2、CSS就是层叠样式表。通过样式属性来对标签进行布局规范，在不再使用table布局的时候，只要CSS样式对网页标签进行对应的布局实现才是正确的开发方式了。 　　3、JavaScript是我们学习前端开发中非常重要的一个内容，也是一个大家经常掉坑里的难点。JavaScript现在可以说是互联网时代使用率最高的脚本语言了，在网页中，所有的数据渲染，特效的交互都需要利用JavaScript，来影响浏览器的显示。在JavaScript部分学习，主要还是要去理解好交互的原理，把原理分析清楚，真的理解语法

什么是 BFF BFF 全称是 Backends For Frontends (服务于前端的后端)，起源于 2015 年 Sam Newman 一篇博客文章 《Pattern: Backends For Frontends —— Single-purpose Edge Services for UIs and external parties》 。 微服务和前后端分离的流行，在后端服务边界上通常会有一个 API 层，向下调系统内的多个微服务，经过聚合、适配和裁剪等一些列的处理后，向上为前端提供 HTTP 协议的 API。 然后随着移动端的兴起，出现了 H5、iOS 和 Android 等多端并存的开发场景，由于移动端的屏幕尺寸比较小，所以显示的信息和传统 Web 端会有较大的区别，而且移动端对于访问连接数和数据量也有更高的要求。此时通用 API 层的开发就会碰到一些困境，比如需要为不同的端提供不同的 API。而这些 API 的设计与不同端上的展示逻辑相关性较强，所以不太适合由后端团队或者 API 团队来负责。因为这些 API 的维护人员会夹在前后端之间去做协调和取舍，非常的心累。 Sam Newman 先后在 REA 和 SoundCloud 两家公司实践了为不同的端做独立的 Backend API，称之为 BFF。以解决不同端对 API 的差异化需求的问题。 BFF 的好处

官网：https://www.zoho.com.cn/projects/ 更多实用小功能组件： 计时器功能 计时器功能可以记录工作时间，记录工时； 首先，我们在导航栏点击小闹钟的标记，如下图，输入相关信息；点击放大镜标志，点击“开”即可计时。 红色小标识是结束计时，黄色小标识是暂停计时。 查看我的任务 点击到任务看板，默认显示全部打开的任务，点击下拉栏出现“我的视图”，显示的是自己需要完成的任务及任务开始结束日期、持续时间。 日历安排活动 进入日历界面，点击日期，如下界面，输入活动名称和开始结束时间以及参与人员，即可安排活动。 新建时间记录 新建时间记录可以记录你每天完成任务工作的时间。 进入日历界面，选择需要记录时间的任务，然后输入到日志中，点击添加即可。 复制任务 在任务列表中点击你要复制的任务，如下界面。点击复制任务，输入想要复制的个数完成复制。 移动端打开任务列表 在移动端可以打开部分项目的任务列表，查看“我的任务”“每日任务”及任务期限。 侧滑打开侧面菜单，点击主页，我的任务中显示详细的任务信息，点击菜单栏修改进度。 移动端的客户还可以动态的收到信息和电脑端一样迅速 https://www.zoho.com.cn/projects/ ZOHO Projects 集项目规划，协作，追踪于一体，可以帮助你更清晰的分配任务，实时的进行项目协作并追踪各个任务的完成情况

前言 这次想聊聊移动开发相关的事。是的，你没有看错，一句话就可以开始你的移动前端开发。 你心里一定在想，什么话这么酷，能够瞬间带入到移动前端开发的世界。 但其实它一点也不新奇，不复杂。 viewport简介 没错，就是viewport特性，一个移动专属的Meta值，用于定义视口的各种行为。 该特性最先由Apple引入，用于解决移动端的页面展示问题，后续被越来越多的厂商跟进。 举个简单的例子来讲为什么会需要它： 我们知道用户大规模使用手机等移动设备来进行网页浏览器，其实得益于智能手持设备的兴起，也就是近几年的事。（还记得不久前的几年，满大街都还是诺基亚的天下么？） 这时有一个很现实的问题摆在了厂商面前，用户并不能很好地通过手机等设备访问网页，因为屏幕太小。 layout viewport Apple也发现了这个问题，并且适时的出现，它提出了一个方案用来解决这个问题。在iOS Safari中定义了一个viewport meta标签，用来创建一个虚拟的布局视口（layout viewport），而这个视口的分辨率接近于PC显示器，Apple将其定义为980px（其他厂商各有不同①）。 这就很好的解决了早期的页面在手机上显示的问题，由于两者之间的宽度趋近，CSS只需要像在PC上那样渲染页面就行，原有的页面结构不会被破坏。 ①的描述大致如下，数值不一定持续准确，厂商可能更改

什么是 BFF BFF 全称是 Backends For Frontends (服务于前端的后端)，起源于 2015 年 Sam Newman 一篇博客文章 《Pattern: Backends For Frontends —— Single-purpose Edge Services for UIs and external parties》 。 微服务和前后端分离的流行，在后端服务边界上通常会有一个 API 层，向下调系统内的多个微服务，经过聚合、适配和裁剪等一些列的处理后，向上为前端提供 HTTP 协议的 API。 然后随着移动端的兴起，出现了 H5、iOS 和 Android 等多端并存的开发场景，由于移动端的屏幕尺寸比较小，所以显示的信息和传统 Web 端会有较大的区别，而且移动端对于访问连接数和数据量也有更高的要求。此时通用 API 层的开发就会碰到一些困境，比如需要为不同的端提供不同的 API。而这些 API 的设计与不同端上的展示逻辑相关性较强，所以不太适合由后端团队或者 API 团队来负责。因为这些 API 的维护人员会夹在前后端之间去做协调和取舍，非常的心累。 Sam Newman 先后在 REA 和 SoundCloud 两家公司实践了为不同的端做独立的 Backend API，称之为 BFF。以解决不同端对 API 的差异化需求的问题。 BFF 的好处

准备工作： 两个像素：设备像素+css像素 设备像素： 绝对单位，设备像素即设备的物理像素，对于每个设备来说，其设备像素是固定的，它是每个设备能控制显示的最小单位。通常我们所说的1920x1080像素分别率就用的是设备像素。 css像素： 适用于web编程，是前端开发在描述css样式时经常用到的像素单位。比如，设置某个div的宽度为width：200px，这个就是css像素，是一种抽象概念，实际上并不存在。 页面的缩放： 当用户放大或者缩小页面时，改变的是css像素，而设备像素不会发生改变 如：页面中一个div，它的宽度是200px，当用户操作页面，放大两倍，此时一个css像素的面变成了4个设备像素的面积：宽放大2倍x高放大两倍 页面缩放比例（zoom level）= screen.width / window.innerWidth (一般情况下可以这么计算) 设备像素比（DPR）： 在页面缩放比为1的情况下，设备像素比（DPR） = 设备像素个数 / 视觉视口css像素个数(device-width) 对于不同的设备来说设备像素比是不一样的。在早期iphone的DPR值是等于1的，但是后来引入了高密度屏幕，即为了更清晰的展示画面，在有限的设备空间内引入了更多的设备像素。所以后来iphone设备的DPR就改变了，值一般为2 场景再现： 移动端需求：给你一个750px的设计稿

从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了。希望这能给你帮助，同时也能给我帮助，有不合理的地方，欢迎评论支持，必将改正。 这里是基础，你了解否？ 一、像素 - 什么是像素 像素是web页面布局的基础，那么到底什么才是一个像素呢？ 像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义： 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。 CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。 如下图，是在缩放比例为1，即scale = 1的情况下，设备像素和CSS像素示意图 设备像素和CSS像素 图示 现在你已经了解了，原来像素对于web前端开发来讲有这样的两层含义，那么你有没有再深入的考虑这样一个问题，当我给一个元素设置了 width: 200px; 这条样式的时候，到底放生了什么事情？ 你可能会说：“废话！元素的宽度是200px呗。”；对，并没有什么问题，但是这个200px指的是什么呢？因为我们知道

从我工作以来，开发的一直都是移动端的页面，只有偶尔去开发几个PC端的页面，现在是一个移动端的时代，移动先行已经深入骨髓，作为一个web前端开发，如果你还在为如何开发移动端页面而迷茫，或者你还在为开发出了一个在你手机上“完美”的移动页面而沾沾自喜却不知移动的世界有多“残酷”的时候，那你应该看看这篇文章了。希望这能给你帮助，同时也能给我帮助，有不合理的地方，欢迎评论支持，必将改正。 这里是基础，你了解否？ 一、像素 - 什么是像素 像素是web页面布局的基础，那么到底什么才是一个像素呢？ 像素：一个像素就是计算机屏幕所能显示一种特定颜色的最小区域。 这是像素的概念，实际上，在web前端开发领域，像素有以下两层含义： 设备像素：设备屏幕的物理像素，对于任何设备来讲物理像素的数量是固定的。 CSS像素：这是一个抽象的像素概念，它是为web开发者创造的。 如下图，是在缩放比例为1，即scale = 1的情况下，设备像素和CSS像素示意图 设备像素和CSS像素 现在你已经了解了，原来像素对于web前端开发来讲有这样的两层含义，那么你有没有再深入的考虑这样一个问题，当我给一个元素设置了 width: 200px; 这条样式的时候，到底放生了什么事情？ 你可能会说：“废话！元素的宽度是200px呗。”；对，并没有什么问题，但是这个200px指的是什么呢？因为我们知道

什么是 BFF BFF 全称是 Backends For Frontends (服务于前端的后端)，起源于 2015 年 Sam Newman 一篇博客文章 《Pattern: Backends For Frontends —— Single-purpose Edge Services for UIs and external parties》 。 微服务和前后端分离的流行，在后端服务边界上通常会有一个 API 层，向下调系统内的多个微服务，经过聚合、适配和裁剪等一些列的处理后，向上为前端提供 HTTP 协议的 API。 然后随着移动端的兴起，出现了 H5、iOS 和 Android 等多端并存的开发场景，由于移动端的屏幕尺寸比较小，所以显示的信息和传统 Web 端会有较大的区别，而且移动端对于访问连接数和数据量也有更高的要求。此时通用 API 层的开发就会碰到一些困境，比如需要为不同的端提供不同的 API。而这些 API 的设计与不同端上的展示逻辑相关性较强，所以不太适合由后端团队或者 API 团队来负责。因为这些 API 的维护人员会夹在前后端之间去做协调和取舍，非常的心累。 Sam Newman 先后在 REA 和 SoundCloud 两家公司实践了为不同的端做独立的 Backend API，称之为 BFF。以解决不同端对 API 的差异化需求的问题。 BFF 的好处

一、为什么需要响应式设计（responsible web design） 1. 响应式发展背景 1、屏幕尺寸的快速变化，iphone为320x480，分辨率在未来可以继续发展。 2、网速对于用户的web使用体验有着巨大的影响。 3、对于标准的支持。浏览器对于标准的支持也很有限。 4、输入的方式。触屏设备，各种手势操作。 5、使用的环境。设备在物理上和架构上的特性，并不是我们在针对设备进行设计时需要考虑的唯一因素。了解使用环境是从相应设备的Web到响应人的Web的关键。 响应式设计的提出是由 Ethan Marcotte提出的概念， 2. 响应式设计的定义： 根据Ethan Marcotte的定义： Fluid grids, flexible images, and media queries are the three technical ingredients for responsive web design, but it also requires a different way of thinking. Rather than quarantining our content into disparate, device-specific experiences, we can use media queries to progressively enhance our