web移动端（四十二、移动端web开发之响应式布局）

本文目录

• 四十二、移动端web开发之响应式布局
• web端与移动端产品设计区别
• Web端测试和移动端APP测试在操作特性上有什么区分
• 详解如何使用原生JS实现移动端web轮播图效果
• 阐述在设计模式中，web端和移动端的共同之处和区别
• 什么是pc端什么是web端

四十二、移动端web开发之响应式布局

就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
设备的划分情况：

响应式需要一个父级作为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小， 再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分

但是我们也可以根据实际情况自己定义划分

bootstrap来自Twitter（推特），是目前最受欢迎的前端框架。bootstrap是基于HTML、CSS和JavaScript的，它简洁灵活，使得web开发更加快捷。
中文网 官网 推荐网站
框架：顾名思义就是一套架构，它有一套比较完整的网页功能解决方案，而且控制权在框架本身，有预制样式库、组件和插件。使用者要按照框架所规定的某种规范进行开发。

在现阶段，我们还没有接触JS相关课程，所以我们只考虑使用它的样式库。
Bootstrap使用四步曲：

bootstrap需要为页面内容和栅格系统包裹一个 .container 或者 .container-fluid 容器，它提供了两个作此用处的类。

.container

.container-fluid

栅格嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成 若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。

列偏移
使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。

列排序
通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。

演示效果

web端与移动端产品设计区别

同一产品不同的终端，在设计上相同却又不相同。（20191008-1009）

一、在功能上web做加法，app做减法

web端更重视功能的齐全，能否直观的查看到或者使用更多的功能，所以一般在同一个页面，在界面设计允许的情况下，以功能齐全为优先，功能做加法。

移动端则重视功能分级，根据功能权重分级，权重最高的功能展示在主页面，次一级的功能可以通过“抽屉”，隐藏在主页面下，每个页面都是功能做减法。抽屉有上下，侧边抽屉方式。

二、交互上

2.1操作不同

web端用鼠标操作，鼠标单机，悬停，滚动等。移动端则是手指操作，点击，长按等

2.2交互形式上

web端数据列表常分页，信息输入多下拉。

移动端数据列表常下拉加载，信息输入多页面。

三、设备需求上

1.设备需求不一样

web端显示器大，窗口可以随意缩放。

移动端窗口小，用户操作多为线性流程，用户使用习惯多为碎片化时间。

2.反馈机制不一样

web端很少有主动反馈，一般也就进某些网站，弹出业务聊天窗口。

移动端则是可以推送消息，主动反馈普遍也明显，所以需要考虑到如何让用户打开推送，再考虑让用户喜欢推送。

3.网络机制

1.web端若要上网，一般是在有网的同一位置。除了极少数停电的情况

2.手机端位置不固定，都有过丢失信号无网络的情况，那就要考虑好无网络时，哪些数据是可看不可看的，而且，手机还要考虑在使用流量与wifi情况下的不同场景，比如电影，若在流量情况下，需要提示是否要连wifi了再看。

4.展示对象不一样

web端需要注意浏览器的适配。

移动端需要注意各手机型号的适配。

四、其他

移动端设计有几种信息架构，层级式、辐射式、套娃式、标签视图式、仪表盘式、筛选视图式。

他要遵循的6个原则有：

mvp原则：当前页面以展示当前核心内容功能为优先。突出重点

易用性：操作简单，上手快。

可扩展性：建立完善的产品信息架构，当迭代优化时能聚焦到功能点附近，不影响其他功能的显示与使用。

手势优先性：移动端不只是点击，手势操作更要优先考虑，提高使用便利性。并且各手势功能应该保持一致。

转换输入方式：移动端应减少文字输入的部分，多加入选择或者语音输入方式。

为中断而设计：移动端多为碎片化时间来处理事情，所以要考虑各个中断的场景

最后要注意，安卓与苹果的各方面也是不一样的，比如说封装性，比如说物理交互，截屏与返回，而且两种系统在设计的时候也有出入，比如字体大小，尺寸，使用单位、控件（导航，弹窗，动画，按钮，键盘，选择控件）等

Web端测试和移动端APP测试在操作特性上有什么区分

区分方法汇总：

1、记录bug

• 在Web端可以通过系统自带的截图和QQ截图等方式来截取bug的图片，对于错误的地方可以用工具自带的标识来重点标记。

• 对于移动端设备可以用手机自带的截图工具来截图然后传到电脑上，个人一般习惯安装微信的windows版本，通过文件传输助手发送到PC端。

2、测试环境

• Web端的测试环境很多时候是通过hosts进行切换，switchhosts工具可以方便的切换需要的host。

• 移动端设置起来比较复杂，比较简单的方式是电脑端设置代理，手机端直接连接代理。

3、兼容性

• web端的测试一般都是主要使用一种浏览器，待系统基本稳定的时候，再去专门测试浏览器的兼容性。

• 移动端主要分为安卓和IOS，而这两端出现的问题一般是不一致的，一致的问题主要是数据问题，这时候是需要后台处理的。

移动端与web端相比较来说，移动端有很多自己的特性，无线网络、2G、3G、4G等，断网、网速较差及网络之间的切换时页面的显示等，这些对于移动端来说很重要。此外，在非wifi下，还需要注意网络使用量问题。

详解如何使用原生JS实现移动端web轮播图效果

在做移动端开发的时候，必不可少的是轮播图，下面这篇文章主要给大家介绍了关于利用纯JS实现移动端web轮播图的相关资料，重要的是结合Tween算法造轮子，文中通过示例代码介绍的非常详细，需要的朋友可以参考借鉴，下面来一起看看吧。
前言
相信大家应该都知道，移动端的轮播图是我们比较常见的需求, 我们最快的实现方式往往是 使用第三方的代码, 例如 swiper , 但当遇到一些比较复杂的轮播图需求时, 往往是束手无策,不知道怎么改.
所以我们要尝试去自己造一些轮子, 以适应各种复杂多变的需求; 另外一点, 自己写的代码如果有bug是很容易修复的, 对自身的提高也很大.
在没有阅读swiper源码的过程下,我尝试自己实现一个简易而不失实用的移动端轮播图, 经过几个小时的思考和实践终于还是实现了(如图):
实现移动端的轮播图要比pc复杂一些,主要表现在以下几个方面:
1.轮播图要适应不同宽度/dpr的屏幕
2.需要使用 touch相关的事件
3.不同机型对 touch事件支持的不太一样,可能会有一些兼容性问题
4.手指移动图片一部分距离,剩下的距离需要自动完成
5.自动完成距离需要有 ease 时间曲线
但编程解决问题的思路都是差不多的,
我们在使用轮播图的时候可以仔细观察,通过现象看到本质:
我们在使用轮播图的时候可以仔细观察,通过现象看到本质:
手指放在图片上, 手指向左或者向右移动, 图片也随之移动;
手指移动的距离少时,图片自动复原位置;手指移动的距离多时,自动切换到下一张;
手指向左或者向右移动的快时,会切换到下一张;
图片轮播是无限循环的, 我们需要采用 3 1 2 3 1的方式来实现, 即 N+2张图来实现N张图的无限循环轮播
我们通过分析现象,可以提出一个基本实现方案:
1. 手指触摸事件可以通过 touchstart touchmove touchend 3个事件来实现
2.在手指 touchstart的时候我们需要记录 手指的x坐标, 可以使用 touch的pageX属性; 还有 这个时间点,
3.手指touchmove的时候我们也需要记录pageX,并且记录累计移动的距离 moveX
4.手指离开的时候,记录时间点, 根据前两步计算的 x方向移动的距离,时间点之差
5.通过比较x方向移动距离来判断移动方向, 以及是否应该切换到下一张图; 根据时间判断用户是否进行了左右扫动的操作
6.移动图片可以使用 translate3d来实现,开启硬件加速
7.移动一段距离需要 easeOut效果,我们可以使用 Tween算法中的easeOut来实现我们每次移动的距离; 当然也可以使用 js设置 transition动画
实现源码(仅供参考):
head头部样式
《head》
《meta charset="UTF-8"》
《meta name="viewport" content="width=device-width,initial-scale=.5,maximum-scale=.5"》
《title》移动端轮播图《/title》
《style》
* {
box-sizing: border-box;
margin: 0;
padding: 0
}
.banner {
overflow: hidden;
width: 100%;
height: 300px
}
.banner .img-wrap {
position: relative;
height: 100%
}
.banner img {
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%
}
《/style》
《/head》HTML结构
《p class="banner"》
《p class="img-wrap" id="imgWrap"》
《img src="images/banner_3.jpg" data-index="-1"》
《img src="images/banner_1.jpg" data-index="0"》
《img src="images/banner_2.jpg" data-index="1"》
《img src="images/banner_3.jpg" data-index="2"》
《img src="images/banner_1.jpg" data-index="3"》
《/p》
《/p》JS代码1, easeOut动画式移动,
这里的 HTMLElement.prototype.tweenTranslateXAnimate ,是给所有的HTML元素类扩展的tweenTranslateXAnimate方法
移动一段距离我们需要使用定时器来帮助我们完成,这个重复的操作
《script》
HTMLElement.prototype.tweenTranslateXAnimate = function (start, end, callback) {
var duration = 50;
var t = 0;
var vv = end - start;
var Tween = {
Quad: {
easeOut: function (t, b, c, d) {
return -c * (t /= d) * (t - 2) + b;
}
}
};

this.timer = setInterval(function () {
var dis = start + Tween.Quad.easeOut(++t, 0, vv, duration);
this.style.transform = ’translate3d(’ + dis + ’px, 0, 0)’;
if (vv 》 0 && parseInt(this.style.transform.slice(12)) 》= end) {
this.style.transform = ’translate3d(’ + parseInt(dis) + ’px, 0, 0)’;
clearInterval(this.timer);
callback && callback();
}
if (vv 《 0 && parseInt(this.style.transform.slice(12)) 《= end) {
this.style.transform = ’translate3d(’ + parseInt(dis) + ’px, 0, 0)’;
clearInterval(this.timer);
callback && callback();
}
}.bind(this), 4);
}
《/script》touch事件部分
《script》
~function () {
var lastPX = 0; // 上一次触摸的位置x坐标, 需要计算出手指每次移动的一点点距离
var movex = 0; // 记录手指move的x方向值
var imgWrap = document.getElementById(’imgWrap’);
var startX = 0; // 开始触摸时手指所在x坐标
var endX = 0; // 触摸结束时手指所在的x坐标位置
var imgSize = imgWrap.children.length - 2; // 图片个数
var t1 = 0; // 记录开始触摸的时刻
var t2 = 0; // 记录结束触摸的时刻
var width = window.innerWidth; // 当前窗口宽度
var nodeList = document.querySelectorAll(’#imgWrap img’); // 所有轮播图节点数组 NodeList

// 给图片设置合适的left值, 注意 querySelectorAll返回 NodeList, 具有 forEach方法
nodeList.forEach(function (node, index) {
node.style.left = (index - 1) * width + ’px’;
});

/**
* 移动图片到当前的 tIndex索引所在位置
* @param {number} tIndex 要显示的图片的索引
* */
function toIndex(tIndex) {
var dis = -(tIndex * width);
var start = parseInt(imgWrap.style.transform.slice(12));
// 动画移动
imgWrap.tweenTranslateXAnimate(start, dis, function () {
setTimeout(function () {
movex = dis;
if (tIndex === imgSize) {
imgWrap.style.transform = ’translate3d(0, 0, 0)’;
movex = 0;
}
if (tIndex === -1) {
imgWrap.style.transform = ’translate3d(’ + width * (1 - imgSize) + ’px, 0, 0)’;
movex = -width * (imgSize - 1);
}
}, 0);
});
}

/**
* 处理各种触摸事件 ,包括 touchstart, touchend, touchmove, touchcancel
* @param {Event} evt 回调函数中系统传回的 js 事件对象
* */
function touch(evt) {
var touch = evt.targetTouches;
var tar = evt.target;
var index = parseInt(tar.getAttribute(’data-index’));
if (evt.type === ’touchmove’) {
var di = parseInt(touch.pageX - lastPX);
endX = touch.pageX;
movex += di;
imgWrap.style.webkitTransform = ’translate3d(’ + movex + ’px, 0, 0)’;
lastPX = touch.pageX;
}
if (evt.type === ’touchend’) {
var minus = endX - startX;
t2 = new Date().getTime() - t1;
if (Math.abs(minus) 》 0) { // 有拖动操作
if (Math.abs(minus) 《 width * 0.4 && t2 》 500) { // 拖动距离不够,返回!
toIndex(index);
} else { // 超过一半,看方向
console.log(minus);
if (Math.abs(minus) 《 20) {
console.log(’距离很短’ + minus);
toIndex(index);
return;
}
if (minus 《 0) { // endX 《 startX,向左滑动,是下一张
toIndex(index + 1)
} else { // endX 》 startX ,向右滑动, 是上一张
toIndex(index - 1)
}
}
} else { //没有拖动操作

}
}
if (evt.type === ’touchstart’) {
lastPX = touch.pageX;
startX = lastPX;
endX = startX;
t1 = new Date().getTime();
}
return false;
}

imgWrap.addEventListener(’touchstart’, touch, false);
imgWrap.addEventListener(’touchmove’, touch, false);
imgWrap.addEventListener(’touchend’, touch, false);
imgWrap.addEventListener(’touchcancel’, touch, false);

}();

《/script》在触摸事件中最关键的参数是 pageX参数, 记录x的位置.
当然这只是一个demo,还需要进一步的优化和封装, 以便于我们用在真实的项目.
本demo仅仅是提供了一个解决问题的思路, 有了这个思路,相信各种复杂的需求也得以解决...

阐述在设计模式中，web端和移动端的共同之处和区别

从两个角度来说
从用户角度。pc端主要使用鼠标，而移动端主要是触屏。
从开发人员角度。UI（网页用户界面）设计师要考虑到移动端特点，便于触屏操作。至于代码实现效果时基本差不多。
-----------------------华丽的分割线-----------------
如果我的回答对您有帮助希望您可以采纳，谢谢!
-----------------------豪华的分割线-----------------
以上是软硬谦施团队为你带来的回答。
如果有什么不懂的可以追问，以后有什么问题可以向我提问或者向我的团队提问。
赠人玫瑰，手有余香！帮助别人，快乐自己！“软硬谦施”欢迎您加入我们的团队帮助更多的人！

什么是pc端什么是web端

pc端和web端不是一回事。
PC端是和移动终端相对应的名词，就是指网络世界里可以连接到电脑主机的那个端口，是基于电脑的界面体系，它有别于移动端的手机界面体系。
PC端和Web端的区别：
1、PC端是指基于计算机硬件设备的应用程序，需要在本地安装后才能使用。
而Web端是指基于互联网的应用程序，用户只需要通过浏览器访问即可使用。
2、PC端的应用程序一般功能更加强大，可以离线使用，但是需要占用大量的硬盘空间。
而Web端的应用程序则更加灵活，可以随时随地在任何设备上使用，但需要网络连接。
3、除此之外，PC端和Web端在界面设计、交互方式、安全性等方面也有很大的差异。
4、操作方式，PC端的操作方式与移动端已经有了明显的差别，PC端使用鼠标操作，操作包含滑动、左击、右击、双击操作，操作相对来说单一，交互效果相对较少，而对于手机端来说，包含手指操作点击、滑动、双击、双指放大、双指缩小、五指收缩和苹果最新的3Dtouch按压力度，除了手指操作外还可以配合传感器完成摇一摇、陀悬仪感应灯操作方式，操作方式更加的丰富，通过这些丰富的操作可设计不同新颖吸引人的交互互动设计。