前端适配 // 做项目配置

原创已于 2022-03-25 19:32:25 修改 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2021-04-11 16:09:58 首次发布

vue 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了前端适配的原理，如Layout ViewPort、Visual ViewPort和Ideal ViewPort，并提出了通过rem适配和@media screen and在CSS中进行不同尺寸的适配方案。同时，分享了在Vue3项目中引入 vant 库并配置rem，以及减少 build 体积的技巧。

Layout ViewPort:布局视口
手机后面那一块的大小
Vsual ViewPort:可视视口
手机屏幕大小
Ideal ViewPort:理想视口

Layout ViewPort 是手机后面那一块的大小，一般为980px，如果不去设置ViewPort控制的话，它是会被缩小到适应手机屏幕大小的，于是就造成缩放了
在这里插入图片描述
解决方法如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

在这里插入图片描述

rem适配

在这里插入图片描述

第三方库实现方法，详见下面地址
https://www.cnblogs.com/lml2017/p/9953429.html
https://www.cnblogs.com/lcosima/p/9646188.html
https://www.cnblogs.com/slfish/p/14207703.html

做项目配置

用vue3创建一个项目，引进vant，配rem，看上面，配置减少build体积，如果有规定自定义字体，配置好字体
https://www.cnblogs.com/Knowledge-is-infinite/p/12217544.html
这个后续移动端配置写得挺好的

在css通过@media screen and适配不同尺寸

<style scoped>
/*ipad*/
@media screen and (min-width: 415px) {
  /*首页标题*/
  .title {
    padding-top: 370px;
    padding-bottom: 50px;
  }
}
/*高分辨率Plus系列*/
@media screen and (min-width: 376px) and (max-width: 414px) {

}
/*高分辨率系列*/
@media screen and (min-width: 321px) and (max-width: 375px) {
 
}
/*  低分辨率系列 iPhone5 se */
@media screen and (max-width: 320px) {
 
}
</style>