java前后端是怎么交互的_前后端交互与Node：移动端布局

大好，我来了，本期为大家带来的Web前端知识是”前后端交互与Node：移动端布局“，有兴趣做前端的朋友，和我一起来看看吧！

主要内容

1. 什么是移动端
2. 移动端视口
3. rem em px区别
4. 移动端适配
5. 移动端布局
6. 马蜂窝案例

学习目标

第一节 移动端介绍

通过手机预览的网页，就是手机端网页

网页分为：

pc端网页 移动端网页 小程序

ios工程师 安卓工程师

1.1早期移动端适配

比如：手机端切换的百度首页的状态，视口大小是980 缩放网页

点击新闻，进入手机端状态

1.2移动端视口

三个视口

1.布局视口

2.视觉视口

3.理想视口

布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。理想视口仍是为移动端设备准备的。只有手动添加meta视口标签方才生效。如果没有meta视口标签，那么布局将会维持它的默认宽度。

如下代码，告诉浏览器，布局视口的宽度应该与理想视口的宽度一致。（一般来讲我们都会将布局视口的宽度设为设备宽度一样，然后使用css媒体查询编写一套针对移动端的展示方案。）

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

meta viewport 标签首先是由苹果在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。

在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：

• width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
• initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
• minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
• maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
• user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许

1.3 视口添加代码区别

代码演示

加上视口

本章作业

了解移动端视口布局

第二节 移动端适配

2.1 移动端像素介绍

2.1.1物理像素

1) 屏幕的分辨率/设备像素

2) 设备能控制显示的最小单元，可以把物理像素看成是对应的像素点

2.1.2 设备独立像素 & css像素

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。

2.1.3 dpr比 & DPI & PPI

1) dpr: 设备像素比，物理像素/设备独立像素 = dpr， 一般以Iphon6的dpr为准 dpr = 2

Ipon6:750设计稿大小 分辨率/375手机的css=2

2) PPI: 一英寸显示屏上的像素点个数

3) DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

2.1.4 扩展内容

视网膜屏幕是分辨率超过人眼识别极限的高分辨率屏幕，由苹果公司

在2010年在iPhone 4发布会上首次推出营销术语。

Iphone的dpr = 2; 人类肉眼分辨的极限

2.2 px rem em区别？

rem em px区别：

px:像素点 相对于屏幕分辨率 固定的

rem:相对大小 受根源元素影响 html

em：相对大小 受父元素的影响

默认：1rem=1em=16px

如何自适应字体大小改变？

因为rem受根元素大小的影响，所以不同的手机分辨率下修改html大小实现控制页面字体大小

2.3 移动端适配

适配的目标

引用一文章的描述：

在不同尺寸的手机设备上，页面“相对性的达到合理的展示（自适应）”或者“保持统一效果的等比缩
放（看起来差不多）”

1.

2.js 动态设置根元素fontSize

3. 最简单的移动端适配方案(rem+vw)

在很早以前,vw 这个单位就已经被列入w3c规范了,如果基本都支持了,vw 表示屏幕的1%,可能有人会问到那跟百分比有什么区别呢? 通常,很多情况确实可以被百分比替代,但是要知道百分比如果要子n代元素都生效,那得所有父级元素都得相对html,body 100%宽才能有作用,而vw则永远相对 屏幕1%.说了vw的含义来说说怎么结合rem适配吧.
这里直接给出结果,只需一行代码即可

html{font-size:13.33333333vw}

然后我们即可根据设计稿(前提设计稿是750px的),这样我们写1rem即为设计稿上的100px

,效果如上图所示,注意:应设置meta为移动端

<

, 是不感觉很诧异,写的width:1rem,heigth:1rem的div 就是50px* 50px (iphone6为2倍屏,即对应750px设计稿上的100px*100px) 怎么搞定的,1句代码就能实现,太神奇.不信可以看看上图或者自己试一下.恩,就是这么简单,1句css代码就搞定,无需任何的js代码.

方案只能兼容手机,甚至连ipad兼容都不好,当然,此处的兼容不是兼容问题,是效果问题,只要兼容vw的设备都能用这个方案,但是由于适配的根本是vw这个, 这个会随着设备的宽度越来越大,那么用rem做单位的元素也会越来越大,以至于如果这个在pc上,那么没法预览了,效果会很差,字太大了.这样我们可以设置一下当屏幕过大的时候的情况,我们可以加一句代码

 @media (min-width: 560px) {
      html {
        font-size: 54px;
      }
    }

第三节 马蜂窝案例

3.1 移动端设计稿测量和实现

3.2 还原设计稿

3.3 马蜂窝移动端布局

https://m.mafengwo.cn/

代码

css代码

本章作业

1.移动端设计稿还原

2.马蜂窝网站仿写

第四节马蜂窝动态数据

4.1 马蜂窝数据布局

进入页面获取第一屏幕数据

接口地址：https://m.mafengwo.cn/?category=get_info_flow_list&page=1

4.2 滚动页面底部加载更多

4.3 移动端事件

click 300ms延迟

touch 可以解决 touchstart touchmove touchend click

fastclick.js

FastClick 是 FT Labs 专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。

简而言之，FastClick 在检测到touchend事件的时候，会通过 DOM 自定义事件立即触发一个模拟click事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。使用方法如下。

原理: 在检测到touchend事件的时候，会通过DOM自定义事件立即出发模拟一个click事件，并把浏览器在300ms之后真正的click事件阻止掉

第一步：在页面中引入fastclick.js文件。

下载：faskclick https://github.com/ftlabs/fastclick

第二步：在js文件中添加以下代码

在 window load 事件之后，在body上调用FastClick.attach()即可

window.addEventListener(function(){

FastClick.attach( document.body );

},false );

如果你项目使用了JQuery，就将上面的代码改写成：

$(function() {

FastClick.attach(document.body);

});

本章作业

1.马蜂窝首页

2.网易云音乐

好了，本期的前端知识”前后端交互与Node：移动端布局“到此结束了，对前端开发有兴趣的朋友关注我，更多内容等你来看，我们下期再见！