vue开发移动端项目环境部署一

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

在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);

}

.border-top::before,

.border-bottom::before,

.border-topbottom::before,

.border-topbottom::after,

.border-topleft::before,

.border-rightbottom::after,

.border-topright::before,

.border-bottomleft::before {

文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。

同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总

JavaScript