Vue移动端兼容性处理【使用less】

最新推荐文章于 2024-06-25 02:49:37 发布

云簪轻拨

最新推荐文章于 2024-06-25 02:49:37 发布

阅读量653

点赞数

分类专栏： VUE 文章标签：兼容性处理

本文链接：https://blog.youkuaiyun.com/qq_42600574/article/details/102625090

版权

本文介绍了在Vue移动端项目中如何利用Less进行样式编写，并着重讲解了针对不同设备的兼容性处理策略，确保样式在多种环境中正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建less文件，样式如下，引入main.js

body, div, span, header, footer, nav, section, aside, article, ul, dl, dt, dd, li, a, p, h1, h2, h3, h4,h5, h6, i, b, textarea, button, input, select, figure, figcaption{
  padding: 0;
  margin: 0;
  list-style: none;
  font-style: normal;
  text-decoration: none;
  border: none;
  font-weight: normal;
  font-family: "Microsoft Yahei", serif;
  box-sizing: border-box;
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing: antialiased;
  &:hover{
    outline: none;
  }
}

html,body{
  height: 100%;
  width: 100%;
  background-color: #F5F5F5;
}

/* 根据dpr显示2x图/3x图 */
.bg-image(@url){
  background-image:~"url('@{url}@2x.png')";
  @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
    background-image:~"url('@{url}@3x.png')";
  }
}

input,textarea {
  border: 0;
  -webkit-appearance: none;
}