2024年最全vue开发移动端项目环境部署一(2)，2024前端精选面试实战总结整理

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

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

---

一、开发环境统一

在index.html中，meta标签添加，优化各移动端设备显示效果。

统一样式：消除所有标签的默认样式，保证页面在所有浏览器下显示效果一致

在main.js中导入reset.css： import ‘@/assets/reset.css’

reset.css 内容如下：

html, body, div, span, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

abbr, address, cite, code,

del, dfn, em, img, ins, kbd, q, samp,

small, strong, sub, sup, var,

b, i,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, summary,

time, mark, audio, video {

margin:0;

padding:0;

border:0;

outline:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

body {

line-height:1;

}

:focus {

outline: 1;

}

article,aside,canvas,details,figcaption,figure,

footer,header,hgroup,menu,nav,section,summary {

display:block;

}

nav ul {

list-style:none;

}

blockquote, q {

quotes:none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content:‘’;

content:none;

}

a {

margin:0;

padding:0;

border:0;

font-size:100%;

vertical-align:baseline;

background:transparent;

}

ins {

background-color:#ff9;

color:#000;

text-decoration:none;

}

mark {

background-color:#ff9;

color:#000;

font-style:italic;

font-weight:bold;

}

del {

text-decoration: line-through;

}

abbr[title], dfn[title] {

border-bottom:1px dotted #000;

cursor:help;

}

table {

border-collapse:collapse;

border-spacing:0;

}

hr {

display:block;

height:1px;

border:0;

border-top:1px solid #cccccc;

margin:1em 0;

padding:0;

}

input, select {

vertical-align:middle;

}

1px边框像素问题： 手机像素都比较高 如果是2倍 3倍屏 虽然设置border:1px 实际上有 2px 3px

border.css 解决方案 使用css3 的 scale属性

main.js中导入border.css

import “./assets/styles/border.css”

border.css如下：

@charset “utf-8”;

.border,

.border-top,

.border-right,

.border-bottom,

.border-left,

.border-topbottom,

.border-rightleft,

.border-topleft,

.border-rightbottom,

.border-topright,

.border-bottomleft {

position: relative;

}

.border::before,

.border-top::before,

.border-right::before,

.border-bottom::before,

.border-left::before,

.border-topbottom::before,

.border-topbottom::after,

.border-rightleft::before,

.border-rightleft::after,

.border-topleft::before,

.border-topleft::after,

.border-rightbottom::before,

.border-rightbottom::after,

.border-topright::before,

.border-topright::after,

.border-bottomleft::before,

.border-bottomleft::after {

content: “\0020”;

overflow: hidden;

position: absolute;

}

/* border

• 因，边框是由伪元素区域遮盖在父级

• 故，子级若有交互，需要对子级设置

• 定位 及 z轴

*/

.border::before {

box-sizing: border-box;

top: 0;

left: 0;

height: 100%;

width: 100%;

border: 1px solid #eaeaea;

transform-origin: 0 0;

}

.border-top::before,

.border-bottom::before,

.border-topbottom::before,

.border-topbottom::after,

.border-topleft::before,

.border-rightbottom::after,

.border-topright::before,

.border-bottomleft::before {

left: 0;

width: 100%;

height: 1px;

}

.border-right::before,

.border-left::before,

.border-rightleft::before,

.border-rightleft::after,

.border-topleft::after,

.border-rightbottom::before,

.border-topright::after,

.border-bottomleft::after {

top: 0;

width: 1px;

height: 100%;

}

.border-top::before,

.border-topbottom::before,

.border-topleft::before,

.border-topright::before {

border-top: 1px solid #eaeaea;

transform-origin: 0 0;

}

.border-right::before,

.border-rightbottom::before,

.border-rightleft::before,

.border-topright::after {

border-right: 1px solid #eaeaea;

transform-origin: 100% 0;

}

.border-bottom::before,

.border-topbottom::after,

.border-rightbottom::after,

.border-bottomleft::before {

border-bottom: 1px solid #eaeaea;

transform-origin: 0 100%;

}

.border-left::before,

.border-topleft::after,

.border-rightleft::after,

.border-bottomleft::after {

border-left: 1px solid #eaeaea;

transform-origin: 0 0;

}

.border-top::before,

.border-topbottom::before,

.border-topleft::before,

.border-topright::before {

top: 0;

}

.border-right::before,

.border-rightleft::after,

.border-rightbottom::before,

.border-topright::after {

right: 0;

}

.border-bottom::before,

.border-topbottom::after,

.border-rightbottom::after,

.border-bottomleft::after {

bottom: 0;

}

.border-left::before,

.border-rightleft::before,

.border-topleft::after,

.border-bottomleft::before {

left: 0;

}

@media (max–moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {

/* 默认值，无需重置 */

}

@media (min–moz-device-pixel-ratio: 1.5) and (max–moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {

.border::before {

width: 200%;

height: 200%;

transform: scale(.5);

最后

为了帮助大家更好的了解前端，特别整理了《前端工程师面试手册》电子稿文件。

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