Web前端最全「移动端」Web页面适配，附赠复习资料

总结

阿里十分注重你对源码的理解，对你所学，所用东西的理解，对项目的理解。

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

• 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;

}

采用 flex 布局的，也称 flex 容器，对应的属性有：

• flex-direction 设置排列方向(向下、向上、向左、向右)的

• flex-wrap 内容放置不下时换行方式

• flex-flow 是flex-direction和flex-wrap属性简写默认值row nowrap

• justify-content 定义在主轴上的对齐方式。

• align-items 定义项目在交叉轴上如何对齐。

• align-content 定义多根轴线的对齐方式

容器内的子元素增加，布局所占的系数：如：

//其样式为

.box{

display:-webkit-flex;

display:flex;

}

.child{

flex:1;

background:#eee;

height:100px;

border:solid 1px red;

}

此时我们给 child 不论如何设置边框、内边距，还有外边距，三个 child 始终排列在一行。

flex 布局优点：

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-TAGsqIM1-1715180743527)]