vue 移动端 设置 100%

好记性不如烂笔头:

移动端 设置 100% :

image.png

实际截图效果如下:

image.png

rem适配问题:

我们会给HTML设置字体大小的问题:

  html {
    font-size:100px;   // 
}
问: 如果此时要设置字体为16px,需要写成多少rem ??
此时1个rem为100px 
??rem / 1rem = 16px /100px 
需要写成    .16  rem 

image.png

样式清理问题:

1. 安装某块 reset-css

npm i reset-css

下载完成以后 main.js中添加引入:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//清楚样式效果问题,解决清楚边距问题
import "reset-css"
import "@/vantUi/vant.js"

移动端 点击头部搜索框出现的进场动画和离场动画:

这个是vue的原生动画效果

image.png

实际效果：

image.png

解决后端返回的大批量原生HTML标签问题:

截图:

image.png

第一种解决方案:

image.png

第二种解决方案:

image.png