vue中关于@media媒体查询的使用
更新时间：2022年08月01日 11:24:42 作者：左手牵♪♡右手
这篇文章主要介绍了vue中关于@media媒体查询的使用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
关于@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 name="viewport" content="user-scalable=0">
这个meta在html页面当中，vue只有一个这一个页面，会把所有模板放里面，我的这个html结构文件是index.html
以下是修改方式：
<meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
width=device-width, initial-scale=1.0 这两个比较重要
width=device-width是指可视化宽度initial-scale=1.0是指缩放比例
具体内容请自行百度
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
PDF文件在线预览的功能相信大家都是有遇到过的,下面这篇文章主要给大家介绍了关于vue3如何实现PDF文件在线预览功能的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-06-06
这篇文章主要介绍了浅谈Vue.js 中的 v-on 事件指令的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
keep-alive是vue中的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM,本文给大家介绍vue中的keep-alive详解与应用场景,感兴趣的朋友一起看看吧2023-11-11
今天小编就为大家分享一篇vue-router动态设置页面title的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
最近写大屏,用到elementplus中的el-table,为了让显示效果好看一点,需要把表格的白色背景调整为透明,与整个背景融为一体,本文给大家介绍ElementPlus表格中的背景透明解决方案,感兴趣的朋友一起看看吧2023-10-10
滚动条能够给用户带来极好的体验效果，今天通过本文给大家分享vue实现一个滚动条样式，代码简单易懂，需要的朋友参考下吧2021-07-07
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。下面这篇文章主要给大家总结了Vue在开发过程中遇到的疑惑知识点,有需要的朋友可以参考借鉴，下面来一起看看吧。2017-01-01
这篇文章主要介绍了详解mpvue实现对苹果X安全区域的适配，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-07-07
这篇文章主要介绍了vue中关于v-for循环key值问题的研究，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了关于vue状态过渡transition不起作用的原因解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-04-04
最新评论