2024年前端最新18(2)，2024年最新web前端面试自我介绍

基础面试题

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

主要内容包括：HTML，CSS，JavaScript，浏览器，性能优化等等

2. 假设我们把整个屏幕划分为 15 等份（划分标准不一，可以是 20 份，也可以是 10 等份）

3. 每一份作为 html 字体大小，这里就是 750/15 = 50px

4. 那么在 320px 设备的时候，字体大小为 320/15 = 21.33px

5. 用我们页面元素的大小除以不同的 html 字体大小会发现他们比例还是相同的

6. 比如我们以 750px 设计稿

7. 此时便实现了不同屏幕下页面元素盒子等比例缩放的效果

（3）元素大小取值方法

1. 最后的公式：页面元素的 rem 值 = 页面元素值（px） / （屏幕跨度 / 划分份数）

2. 屏幕宽度 / 划分份数 = html font-size 的大小

3. 或者：页面元素的 rem 值 = 页面元素值（px） / html font-size 字体大小

【案例】

五、苏宁网首页案例制作

==============================================================================

【案例：苏宁网移动端首页】

访问地址：https://m.suning.com/

【技术选型】

方案：我们采取单独制作移动页面方案

技术：布局采取 rem 适配布局（less + rem + 媒体查询）

设计图：本设计图采用 750px 设计尺寸

【搭建相关文件夹结构】

【设置视口标签以及引入初始化样式】

<meta name=“viewport” content="width=device-width, user-scalable=no,

initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

【设置公共 common.less 文件】

1. 新建 common.less 设置好最常见的屏幕尺寸，利用媒体查询设置不同的 html 字体大小，因为除了首页其他页面也需要

2. 我们关心的尺寸有 320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px、1080px

3. 划分的份数我们定位 15 等份

4. 因为我们 PC 端也可以打开我们苏宁移动端首页，我们默认 html 字体大小为 50px（注意这句话写到最上面）

【新建 index.less 文件】

1. 新建 index.less，这里面写首页的样式

2. 将刚才设置好的 common.less 引入到 index.less 里面，语法如下：

// 在 index.less 中导入 common.less 文件

@inport “common”;

3. 生成 index.css 引入到 index.html 里面

【body 样式】

body {

min-width: 320px;

width: 15rem;

margin: 0 auto;

line-height: 1.5;

font-family: Arial, Helvetica;

background: #F2F2F2;

}

【案例代码】

• common.less

// 设置常见的屏幕尺寸 修改里面的html文字大小

a {

text-decoration: none;

}

// 一定要写到最上面

html {

font-size: 50px;

}

// 我们此次定义的划分的份数 为 15

@no: 15;

// 320

@media screen and (min-width: 320px) {

html {

font-size: (320px / @no);

}

}

// 360

@media screen and (min-width: 360px) {

html {

font-size: (360px / @no);

}

}

// 375 iphone 678

@media screen and (min-width: 375px) {

html {

font-size: (375px / @no);

}

}

// 384

@media screen and (min-width: 384px) {

html {

font-size: (384px / @no);

}

}

// 400

@media screen and (min-width: 400px) {

html {

font-size: (400px / @no);

}

}

// 414

@media screen and (min-width: 414px) {

html {

font-size: (414px / @no);

}

}

// 424

@media screen and (min-width: 424px) {

html {

font-size: (424px / @no);

}

}

// 480

@media screen and (min-width: 480px) {

html {

font-size: (480px / @no);

}

}

// 540

@media screen and (min-width: 540px) {

html {

font-size: (540px / @no);

}

}

// 720

@media screen and (min-width: 720px) {

html {

font-size: (720px / @no);

}

}

// 750

@media screen and (min-width: 750px) {

html {

font-size: (750px / @no);

}

}

• index.less

// 首页的样式less文件

@import “common”;

// @import 导入的意思 可以把一个样式文件导入到另外一个样式文件里面

// link 是把一个 样式文件引入到 html页面里面

body {

min-width: 320px;

width: 15rem;

margin: 0 auto;

line-height: 1.5;

font-family: Arial, Helvetica;

background: #F2F2F2;

}

// 页面元素rem计算公式： 页面元素的px / html 字体大小 50

// search-content

@baseFont: 50;

.search-content {

display: flex;

position: fixed;

top: 0;

left: 50%;

transform: translateX(-50%);

width: 15rem;

height: (88rem / @baseFont);

background-color: #FFC001;

.classify {

width: (44rem / @baseFont);

height: (70rem / @baseFont);

margin: (11rem / @baseFont) (25rem / @baseFont) (7rem / @baseFont) (24rem / @baseFont);

background: url(…/images/classify.png) no-repeat;

// 背景缩放

background-size: (44rem / @baseFont) (70rem / @baseFont);

}

.search {

flex: 1;

input {

outline: none;

width: 100%;

border: 0;

height: (66rem / @baseFont);

border-radius: (33rem / @baseFont);

background-color: #FFF2CC;

margin-top: (12rem / @baseFont);

font-size: (25rem / @baseFont);

padding-left: (55rem / @baseFont);

color: #757575;

}

}

.login {

width: (75rem / @baseFont);

height: (70rem / @baseFont);

line-height: (70rem / @baseFont);

margin: (10rem / @baseFont);

font-size: (25rem / @baseFont);

text-align: center;

color: #fff;

}

}

// banner

.banner {

width: (750rem / @baseFont);

height: (368rem / @baseFont);

img {

width: 100%;

height: 100%;

}

}

// ad

.ad {

display: flex;

a {

flex: 1;

img {

width: 100%;

}

}

}

// nav

nav {

width: (750rem / @baseFont);

a {

float: left;

width: (150rem / @baseFont);

height: (140rem / @baseFont);

text-align: center;

img {

display: block;

width: (82rem / @baseFont);

height: (82rem / @baseFont);

margin: (10rem / @baseFont) auto 0;

}

span {

font-size: (25rem / @baseFont);

color: #333;

}

}

}

• normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/**

• 1. Change the default font family in all browsers (opinionated).
• 2. Correct the line height in all browsers.
• 3. Prevent adjustments of font size after orientation changes in

• IE on Windows Phone and in iOS.

*/

/* Document

========================================================================== */

html {

font-family: sans-serif;

/* 1 */

line-height: 1.15;

/* 2 */

-ms-text-size-adjust: 100%;

/* 3 */

-webkit-text-size-adjust: 100%;

/* 3 */

}

/* Sections

========================================================================== */

/**

• Remove the margin in all browsers (opinionated).

*/

body {

margin: 0;

}

/**

• Add the correct display in IE 9-.

*/

article,

aside,

footer,

header,

nav,

section {

display: block;

}

/**

• Correct the font size and margin on h1 elements within section and

• article contexts in Chrome, Firefox, and Safari.

*/

h1 {

font-size: 2em;

margin: 0.67em 0;

}

/* Grouping content

========================================================================== */

/**

• Add the correct display in IE 9-.

• 1. Add the correct display in IE.

*/

figcaption,

figure,

main {

/* 1 */

display: block;

}

/**

• Add the correct margin in IE 8.

*/

figure {

margin: 1em 40px;

}

/**

• 1. Add the correct box sizing in Firefox.
• 2. Show the overflow in Edge and IE.

*/

hr {

box-sizing: content-box;

/* 1 */

height: 0;

/* 1 */

overflow: visible;

/* 2 */

}

/**

• 1. Correct the inheritance and scaling of font size in all browsers.
• 2. Correct the odd em font sizing in all browsers.

*/

pre {

font-family: monospace, monospace;

/* 1 */

font-size: 1em;

/* 2 */

}

/* Text-level semantics

========================================================================== */

/**

• 1. Remove the gray background on active links in IE 10.
• 2. Remove gaps in links underline in iOS 8+ and Safari 8+.

*/

a {

background-color: transparent;

/* 1 */

-webkit-text-decoration-skip: objects;

/* 2 */

}

/**

• Remove the outline on focused links when they are also active or hovered

• in all browsers (opinionated).

*/

a:active,

a:hover {

outline-width: 0;

}

/**

• 1. Remove the bottom border in Firefox 39-.
• 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.

*/

abbr[title] {

border-bottom: none;

/* 1 */

text-decoration: underline;

/* 2 */

text-decoration: underline dotted;

/* 2 */

}

/**

• Prevent the duplicate application of bolder by the next rule in Safari 6.

*/

b,

strong {

font-weight: inherit;

}

/**

• Add the correct font weight in Chrome, Edge, and Safari.

*/

b,

strong {

font-weight: bolder;

}

/**

• 1. Correct the inheritance and scaling of font size in all browsers.
• 2. Correct the odd em font sizing in all browsers.

*/

code,

kbd,

samp {

font-family: monospace, monospace;

/* 1 */

font-size: 1em;

/* 2 */

}

/**

• Add the correct font style in Android 4.3-.

*/

dfn {

font-style: italic;

}

/**

• Add the correct background and color in IE 9-.

*/

mark {

background-color: #ff0;

color: #000;

}

/**

• Add the correct font size in all browsers.

*/

small {

font-size: 80%;

}

/**

• Prevent sub and sup elements from affecting the line height in

• all browsers.

*/

sub,

sup {

font-size: 75%;

line-height: 0;

position: relative;

vertical-align: baseline;

}

sub {

bottom: -0.25em;

}

sup {

top: -0.5em;

}

/* Embedded content

========================================================================== */

/**

• Add the correct display in IE 9-.

*/

audio,

video {

display: inline-block;

}

/**

• Add the correct display in iOS 4-7.

*/

audio:not([controls]) {

display: none;

height: 0;

}

/**

• Remove the border on images inside links in IE 10-.

*/

img {

border-style: none;

}

/**

• Hide the overflow in IE.

*/

svg:not(:root) {

overflow: hidden;

}

/* Forms

========================================================================== */

/**

• 1. Change the font styles in all browsers (opinionated).
• 2. Remove the margin in Firefox and Safari.

*/

button,

input,

optgroup,

select,

textarea {

font-family: sans-serif;

/* 1 */

font-size: 100%;

/* 1 */

line-height: 1.15;

/* 1 */

margin: 0;

/* 2 */

}

/**

• Show the overflow in IE.

• 1. Show the overflow in Edge.

*/

button,

input {

/* 1 */

overflow: visible;

}

/**

• Remove the inheritance of text transform in Edge, Firefox, and IE.

• 1. Remove the inheritance of text transform in Firefox.

*/

button,

select {

/* 1 */

text-transform: none;

}

/**

• 1. Prevent a WebKit bug where (2) destroys native audio and video

• controls in Android 4.

• 2. Correct the inability to style clickable types in iOS and Safari.

*/

button,

html type=“button”,

/* 1 */

type=“reset”,

[type=“submit”] {

-webkit-appearance: button;

/* 2 */

}

/**

• Remove the inner border and padding in Firefox.

*/

button::-moz-focus-inner,

[type=“submit”]::-moz-focus-inner {

border-style: none;

padding: 0;

}

/**

• Restore the focus styles unset by the previous rule.

*/

button:-moz-focusring,

[type=“submit”]:-moz-focusring {

outline: 1px dotted ButtonText;

}

/**

• Change the border, margin, and padding in all browsers (opinionated).

*/

fieldset {

border: 1px solid #c0c0c0;

margin: 0 2px;

padding: 0.35em 0.625em 0.75em;

}

/**

• 1. Correct the text wrapping in Edge and IE.
• 2. Correct the color inheritance from fieldset elements in IE.
• 3. Remove the padding so developers are not caught out when they zero out

• fieldset elements in all browsers.

*/

legend {

box-sizing: border-box;

/* 1 */

color: inherit;

/* 2 */

display: table;

/* 1 */

max-width: 100%;

/* 1 */

padding: 0;

/* 3 */

white-space: normal;

/* 1 */

}

/**

• 1. Add the correct display in IE 9-.
• 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.

*/

progress {

display: inline-block;

/* 1 */

vertical-align: baseline;

/* 2 */

}

/**

• Remove the default vertical scrollbar in IE.

*/

textarea {

overflow: auto;

}

/**

• 1. Add the correct box sizing in IE 10-.
• 2. Remove the padding in IE 10-.

*/

[type=“checkbox”],

[type=“radio”] {

box-sizing: border-box;

/* 1 */

padding: 0;

/* 2 */

}

/**

• Correct the cursor style of increment and decrement buttons in Chrome.

*/

type=“number”::-webkit-outer-spin-button {

height: auto;

}

/**

• 1. Correct the odd appearance in Chrome and Safari.
• 2. Correct the outline style in Safari.

*/

type=“search” {

-webkit-appearance: textfield;

/* 1 */

outline-offset: -2px;

/* 2 */

}

/**

• Remove the inner padding and cancel buttons in Chrome and Safari on macOS.

*/

type=“search”::-webkit-search-decoration {

-webkit-appearance: none;

}

/**

• 1. Correct the inability to style clickable types in iOS and Safari.
• 2. Change font properties to inherit in Safari.

*/

::-webkit-file-upload-button {

-webkit-appearance: button;

/* 1 */

font: inherit;

/* 2 */

}

/* Interactive

========================================================================== */

/*

• Add the correct display in IE 9-.

• 1. Add the correct display in Edge, IE, and Firefox.

*/

details,

/* 1 */

menu {

display: block;

}

/*

• Add the correct display in all browsers.

*/

summary {

display: list-item;

}

/* Scripting

========================================================================== */

/**

• Add the correct display in IE 9-.

*/

canvas {

display: inline-block;

}

/**

• Add the correct display in IE.

*/

template {

display: none;

}

/* Hidden

========================================================================== */

/**

• Add the correct display in IE 10-.

*/

[hidden] {

display: none;

}

• index.html

登录

爆款手机

爆款手机

爆款手机

爆款手机

爆款手机

爆款手机

爆款手机

爆款手机

爆款手机

爆款手机

• 效果图

六、rem适配方案2

=============================================================================

6.1 简洁高效的rem适配方案flexible.js

---

手机淘宝团队出的简洁高效的移动端适配库

我们再也不需要在写不同屏幕的媒体查询，因为里面 js 做了处理

它的原理是把当前设备划分为 10 等份，但是不同设备下，比例还是一致的

我们要做的，就是确定好我们当前设备的 html 文字大小就可以了

比如当前设计稿是 750px，那么我们只需要把 html 文字大小设置为 75px（750 / 10）就可以

里面页面元素 rem 值：页面元素的 px 值 / 75

剩余的，让 flexible.js 来去算

github 地址：https://github.com/amfe/lib-flexible/

6.2 使用适配方案2制作苏宁移动端首页

---

【技术选型】

方案：我们采取单独制作移动页面方案

技术：布局采取 rem 适配布局2（flexible.js + rem）

设计图：本设计图采用 750px 设计尺寸

【搭建相关文件夹结构】

【设置视口标签以及引入初始化样式还有 js 文件】

<meta name=“viewport” content="width=device-width, user-scalable=no,

initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

【我们页面需要引入这个 js 文件】

【body 样式】

body {

min-width: 320px;

max-width: 750px;

/* flexible 给我们划分了 10 等份 */

width: 10rem;

margin: 0 auto;

line-height: 1.5;

font-family: Arial,Helvetica;

background: #F2F2F2;

}

【VSCode px 转 rem 插件 cssrem】

cssrem 插件默认的 html 文字大小（cssroot）为 16px，即：16px = 1rem。

所以，我们需要根据具体情况修改 html 字体大小基准值。

比如：750px 分 10 等份时 750px / 10 = 75px，我们就需要将其基准值设置为 75px。

1. 打开插件的设置按钮

2. 找到基准

3. 修改值

4. 重启 VSCode

【案例代码】

• index.css

body {

min-width: 320px;

/* flexible 默认以浏览器窗口为 10 等份的划分区域，所以我们要先设置一个最大宽度 */

max-width: 750px;

/* flexible 给我们划分了 10 等份 */

width: 10rem;

margin: 0 auto;

line-height: 1.5;

font-family: Arial, Helvetica;

background: #f2f2f2;

}

a {

text-decoration: none;

font-size: 0.333333rem;

}

/* cssrem 插件默认的 html 文字大小 cssroot 16px */

/*

img {

width: 5.125rem;

height: 4rem;

width: 1rem;

width: 1.093333rem;

height: 1rem;

} */

/* 如果我们的屏幕超过了 750px 那么我们就按照 750 设计稿来走 不会让我们页面超过 750px */

@media screen and (min-width: 750px) {

html {

font-size: 75px !important;

}

}

/* search-content */

.search-content {

display: flex;

position: fixed;

top: 0;

left: 50%;

transform: translateX(-50%);

width: 10rem;

height: 1.173333rem;

background-color: #ffc001;

}

.classify {

width: 0.586667rem;

height: 0.933333rem;

margin: 0.146667rem 0.333333rem 0.133333rem;

background: url(…/images/classify.png) no-repeat;

background-size: 0.586667rem 0.933333rem;

}

.search {

flex: 1;

}

.search input {

outline: none;

border: 0;

width: 100%;

height: 0.88rem;

font-size: 0.333333rem;

background-color: #fff2cc;

margin-top: 0.133333rem;

border-radius: 0.44rem;

color: #757575;

padding-left: 0.733333rem;

}

.login {

width: 1rem;

height: 0.933333rem;

margin: 0.133333rem;

color: #fff;

text-align: center;

line-height: 0.933333rem;

font-size: 0.333333rem;

}

• flexible.js（注意：分为几等份是可以在 js 中修改的）

(function flexible(window, document) {

var docEl = document.documentElement;

var dpr = window.devicePixelRatio || 1;

// adjust body font size

function setBodyFontSize() {

if (document.body) {

document.body.style.fontSize = 12 * dpr + “px”;

} else {

document.addEventListener(“DOMContentLoaded”, setBodyFontSize);

}

}

setBodyFontSize();

// set 1rem = viewWidth / 10

function setRemUnit() {

var rem = docEl.clientWidth / 10;

docEl.style.fontSize = rem + “px”;

}

setRemUnit();

// reset rem unit on page resize

window.addEventListener(“resize”, setRemUnit);

window.addEventListener(“pageshow”, function (e) {

if (e.persisted) {

setRemUnit();

}

});

// detect 0.5px supports

if (dpr >= 2) {

var fakeBody = document.createElement(“body”);

var testElement = document.createElement(“div”);

testElement.style.border = “.5px solid transparent”;

fakeBody.appendChild(testElement);

docEl.appendChild(fakeBody);

if (testElement.offsetHeight === 1) {

docEl.classList.add(“hairlines”);

}

docEl.removeChild(fakeBody);

}

})(window, document);

• index.html

<meta name=“viewport”

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

登录

• 效果图
  

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

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

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。

• flexible.js（注意：分为几等份是可以在 js 中修改的）

(function flexible(window, document) {

var docEl = document.documentElement;

var dpr = window.devicePixelRatio || 1;

// adjust body font size

function setBodyFontSize() {

if (document.body) {

document.body.style.fontSize = 12 * dpr + “px”;

} else {

document.addEventListener(“DOMContentLoaded”, setBodyFontSize);

}

}

setBodyFontSize();

// set 1rem = viewWidth / 10

function setRemUnit() {

var rem = docEl.clientWidth / 10;

docEl.style.fontSize = rem + “px”;

}

setRemUnit();

// reset rem unit on page resize

window.addEventListener(“resize”, setRemUnit);

window.addEventListener(“pageshow”, function (e) {

if (e.persisted) {

setRemUnit();

}

});

// detect 0.5px supports

if (dpr >= 2) {

var fakeBody = document.createElement(“body”);

var testElement = document.createElement(“div”);

testElement.style.border = “.5px solid transparent”;

fakeBody.appendChild(testElement);

docEl.appendChild(fakeBody);

if (testElement.offsetHeight === 1) {

docEl.classList.add(“hairlines”);

}

docEl.removeChild(fakeBody);

}

})(window, document);

• index.html

<meta name=“viewport”

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

登录

• 效果图
  

最后

好了，这就是整理的前端从入门到放弃的学习笔记，还有很多没有整理到，我也算是边学边去整理，后续还会慢慢完善，这些相信够你学一阵子了。

做程序员，做前端工程师，真的是一个学习就会有回报的职业，不看出身高低，不看学历强弱，只要你的技术达到应有的水准，就能够得到对应的回报。

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

学习从来没有一蹴而就，都是持之以恒的，正所谓活到老学到老，真正懂得学习的人，才不会被这个时代的洪流所淘汰。