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是指缩放比例
具体内容请自行百度
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
项目中需要制作一个双击编辑单击选中可删除Tag标签,本文就来介绍一下如何实现,具有一定的参考价值,感兴趣的可以了解一下2023-09-09
这篇文章主要给大家介绍了关于Vue项目打包为exe可安装程序操作步骤的相关资料,Vue是一种流行的JavaScript框架,用于构建单页面应用程序(SPA),需要的朋友可以参考下2023-12-12
大家在做前端项目的时候,大部分页面, 游客都可以直接访问 , 如遇到 需要登录才能进行的操作,页面将提示并跳转到登录界面,那么如何才能实现页面拦截并跳转到对应的登录界面呢,本文小编就来给大家介绍一下Vue实现页面访问拦截的方法,需要的朋友可以参考下2023-08-08
Vuejs 实现简易 todoList 功能 与 组件实例代码
本文通过实例代码给大家介绍了Vuejs 实现简易 todoList 功能 与 组件，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
下面小编就为大家分享一篇vue中实现methods一个方法调用另外一个方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
Vuex是一个专为Vue.js应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化,下面这篇文章主要给大家介绍了关于vuex模块获取数据及方法的相关资料,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了Vue组件全局注册实现警告框的实例,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
这篇文章主要介绍了使用vue cli4.x搭建vue项目的过程，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2020-05-05
第一次用Vue+MySQL实现注册登录功能,就已经踩了很多坑,下面这篇文章主要给大家介绍了关于使用Vue+MySQL实现登录注册案例的相关资料,需要的朋友可以参考下2022-05-05
这篇文章主要为大家详细介绍了vue递归组件实现树形结构，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
最新评论