「移动端」Web页面适配(1)

移动端 Web 页面，就是常说的手机 h5页面、webview页面、公众号开发的网页等。

由于手机机型较多，各个手机的屏幕尺寸不一样，所以做移动端页面，需要考虑在安卓和ios的各种尺寸设备的兼容问题，我们要做的 web 页面适配，就是为了在不同设备上，页面能够保持统一展示效果，或等比缩放。

二、移动适配方案

---

常见的移动适配方案有以下几种：

• viewport

• 盒模型

• flex

• rem

2.1、viewport - 可视区

最初手机端需要照顾 PC 端，如果不设置 viewport，直接访问网页的时候，我们发现网页内容看着很小，这是因为页面按照PC端最小宽度980展示的，也就是我们的网页宽度就是980，而手机屏幕宽度通常375、411、320、414等，没有980那么大，所以页面被缩小了很多。

设置viewport

<meta name=“viewport”

content="width=device-width,

initial-scale=1.0,

user-scalable=no,

minimum-scale=1.0

maximum-scale=1.0"

/>

分别对 meta 的各个属性介绍如下：

• width - 设置viewport的宽度，为一个正整数，或字符串‘device-width’

• initial-scale - 设置页面的初始缩放值，是一个数字，可以是小数

• maximum-sacle - 设置页面最大缩放值，是一个数字，可以是小数

• user-scalable - 是否允许用户进行缩放，值为’yes’或者’no’,yes表示可缩放，no表示禁止缩放

• minimum-scale - 允许用户缩放的最小值，是一个数字，可以是小数

• height - 设置layout viewport的高度，这个属性很少使用

一般情况下禁止用户缩放网页，设置的时候只需要：

<meta name=“viewport”

content=“width=device-width, initial-scale=1.0 , user-scalable=no” >

就可以了，但是由于某些浏览器不能识别 initial-scale，所以添加了最大和最小缩放限制。

viewport 设置可视区之后，就会把网页的宽度设置为移动设备的屏幕宽度。

如想深入学习，可查阅《viewport深入理解和使用 - 前端人 - 博客园》。

2.2、盒模型

CSS3 中新增 box-sizing 属性，可以设置盒模型类型。属性值分别为：

content-box - 标准模型

border-box - IE模型

两者最大区别就是盒子的宽度不同：

标准模型宽 = 内容宽 + padding + border

IE模型宽 = 内容宽（包含padding、border）

这样做的优点就是可以任意设置它的 padding 和 border，不会挤压盒子的排列，但是如果设置一个 margin，会立马改变盒子的排列。

如想深入了解，可查阅《前端面试题中的“盒模型”是什么？》

2.3、flex - 弹性布局

Flex 是 Flex Box 的简写，意为弹性布局，为盒子提供最大的灵活性。任何一个元素都可以指定为弹性布局。

使用语法：

.box{

display:-webkit-flex;

display:flex;

}

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

[外链图片转存中…(img-SnWltAx0-1714494903116)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】