您现在的位置是:网站首页> 编程资料编程资料
vue中关于@media媒体查询的使用_vue.js_
2023-05-24
295人已围观
简介 vue中关于@media媒体查询的使用_vue.js_
关于@media媒体查询使用
1.vue需要安装sass-loader和node-sass2个插件来使用
①安装sass:
npm install sass-loader --save-dev
②安装node:
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.直接在每个页面中使用

我这里是:样式写的适配小于750px和大于750px是什么样的
pc是大于750px的,大家可以根据需要去使用
使用@media媒体查询失效问题
vue媒体查询失效原因
网上总结的比较多,因为这是接手的项目,还不够熟悉代码,一一排查得到了一下结果:
// 出错位置
这个meta在html页面当中,vue只有一个这一个页面,会把所有模板放里面,我的这个html结构文件是index.html
以下是修改方式:
width=device-width, initial-scale=1.0 这两个比较重要
width=device-width是指可视化宽度initial-scale=1.0是指缩放比例
具体内容请自行百度
以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
相关内容
- 在 React Native 中使用 CSS Modules的配置方法_React_
- 关于vue-tree-chart简单的使用_vue.js_
- element中的el-upload附件上传与附件回显_vue.js_
- 详解Vue3 父组件调用子组件方法($refs 在setup()、<script setup> 中使用)_vue.js_
- Vue + element-ui 背景图片设置方式_vue.js_
- element-ui中页面缩放时table表格内容错位的解决_vue.js_
- vue静态界面之左二级菜单右表单表格的实例代码_vue.js_
- 关于Element-ui中Table表格无法显示的问题及解决_vue.js_
- Dapr+NestJs编写Pub及Sub装饰器实战示例_node.js_
- vue中的rem如何配置_vue.js_
