common.less制作（移动端适配）

最新推荐文章于 2024-05-16 14:56:41 发布

Krlin_

最新推荐文章于 2024-05-16 14:56:41 发布

阅读量482

点赞数

分类专栏：学习文章标签： less css vscode

本文链接：https://blog.csdn.net/weixin_46353030/article/details/122181809

版权

本文介绍了在win10环境下，使用VSCode和Vue2.x进行移动端适配的方法。通过安装Easy Less插件，在src/css目录下创建包含不同手机尺寸的less文件，设定根元素大小，根据830px设计稿计算rem值。生成的css文件会自动完成计算，可在Vue项目中导入使用。

摘要由CSDN通过智能技术生成

环境

win10
vscode
vue2.x

步骤

安装easy less 插件
src下新建css文件夹，创建common.less文件，这里将页面划分为10等份后写入手机常见的尺寸（320px、360px、375px、384px、400px、414px、424px、480px、540px、720px、750px）并为其设置根元素大小，这里假设设计稿的宽度为830px，后面的计算参见rem计算公式，内容如下：

html {
   
  font-size: 83px;
}
@no:10;
// 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
@media screen and (min-width:375px){
   
  html{
   
    font-size:(375px / @no);
  }
}
// 384
@media screen and (min-width:<