做后台实际开发项目中遇到的屏幕适配和标签初始化

项目的技术栈是vue+typescript+elementUi

在app.vue

初始化

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
dl, dt, dd, ul, ol, li,
pre,
fieldset, lengend, button, input, textarea,
th, td {
    margin: 0;
    padding: 0;
}
 
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1.3 "Microsoft YaHei",Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */
    color: #333;
}
 
 
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
 
address, cite, dfn, em, var, i{ font-style: normal; } /* 将斜体扶正 */
b, strong{ font-weight: normal; } /* 将粗体扶细 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
 
/* 重置列表元素 */
ul, ol { list-style: none; }
 
/* 重置文本格式元素 */
a { text-decoration: none; color: #666;}
 
 
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; }
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
 
/* 重置表格元素 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/* 重置 hr */
hr {
    border: none;
    height: 1px;
}
.clearFix::after{
    content:"";
    display: block;
    clear:both;
}
/* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }
 
a:link:hover{
    color : rgb(79, 76, 212) !important;
    text-decoration: underline;
}
 
/* 清除浮动 */
.clearfix::after {
    display: block;
    height: 0;
    content: "";
    clear: both;
    visibility: hidden;
}

 

屏幕适配问题

 由于接收项目的时候，

方法一：

function bodyScale() {
    var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度
    // var devicewidth = window.screen.width; //获取当前分辨率宽度
    var deviceheight = document.documentElement.clientHeight; //获取当前分辨率下的可是区域高度
    //var deviceheight = window.screen.height; //获取当前分辨率下的高度
    var scalex = devicewidth / 1920; // 分母——设计稿分辨率宽度的尺寸
    var scaley = deviceheight / 1080; // 分母——设计稿分辨率高度的尺寸
    //按照宽高比例小的来进行缩放
    scalex <= scaley ? document.body.style.zoom = scalex : document.body.style.zoom = scaley;
    //放大缩小相应倍数
}
bodyScale();

 

 方法二：

第一步：先设置header里面的meta标签和script标签

<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 1920*100 + 'px';
//document.documentElement.style.fontSize = window.screen.width / 1920 * 100 + 'px';
</script>

第二步：把页面里所有的px都除以100转换成rem

移动端的屏幕自适应

/* 页面字体设置 自适应*/
html {
  font-size: 100px;
  font-size: 13.33333vw;
}
@media screen and (max-width: 320px) {
  html {
    font-size: 42.667px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 321px) and (max-width: 360px) {
  html {
    font-size: 48px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 361px) and (max-width: 375px) {
  html {
    font-size: 50px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 376px) and (max-width: 393px) {
  html {
    font-size: 52.4px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 394px) and (max-width: 412px) {
  html {
    font-size: 54.93px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 413px) and (max-width: 414px) {
  html {
    font-size: 55.2px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 415px) and (max-width: 480px) {
  html {
    font-size: 64px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 481px) and (max-width: 540px) {
  html {
    font-size: 72px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 541px) and (max-width: 640px) {
  html {
    font-size: 85.33px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 641px) and (max-width: 720px) {
  html {
    font-size: 96px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 721px) and (max-width: 750px) {
  html {
    font-size: 100px;
    font-size: 13.33333vw;
  }
}
@media screen and (min-width: 751px) {
  html {
    font-size: 100px;
  }
  body {
    width: 750px;
    margin: 0 auto;
  }
}