经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » Vue.js » 查看文章
vue中关于@media媒体查询的使用
来源:jb51  时间:2022/8/1 13:08:54  对本文有异议

关于@media媒体查询使用

1.vue需要安装sass-loader和node-sass2个插件来使用

①安装sass:

  1. npm install sass-loader --save-dev

②安装node:

  1. npm install -g cnpm --registry=https://registry.npm.taobao.org

2.直接在每个页面中使用

我这里是:样式写的适配小于750px和大于750px是什么样的

pc是大于750px的,大家可以根据需要去使用

使用@media媒体查询失效问题

vue媒体查询失效原因

网上总结的比较多,因为这是接手的项目,还不够熟悉代码,一一排查得到了一下结果:

  1. // 出错位置
  2. <meta name="viewport" content="user-scalable=0">

这个meta在html页面当中,vue只有一个这一个页面,会把所有模板放里面,我的这个html结构文件是index.html

以下是修改方式:

  1. <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 是指缩放比例

具体内容请自行百度

以上为个人经验,希望能给大家一个参考,也希望大家多多支持w3xue。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号