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

最新推荐文章于 2024-05-16 15:11:52 发布
最新推荐文章于 2024-05-16 15:11:52 发布
阅读量1.4w 收藏 6
点赞数 1
文章标签： Vue @media 媒体查询
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44083426/article/details/97432169
版权

Vue媒体查询失效原因

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

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

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

以下是修改方式：

最低0.47元/天 解锁文章
傻狍子的小跟班
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
@media print颜色样式不起作用
qq_41115103的博客
06-04 3721
预期效果： 原代码： /* 打印样式*/ @media print { #contendmidd tr{ line-height: 13px; } td.tdStyle { color: red !important; } .width100{ font-size: 12px; width: 20%; text-align: center; font-family:cursive; } } 分析： @media print中字体大小，
求助！踩坑css@media print 固定横纵向来回切换无效，到底是什么导致了这个BUG？？
weixin_46420860的博客
09-20 797
问题： 最近在vue开发中遇到了这样一个功能，希望打印的时候采用两种样式，即打印页面可以在横向和纵向之间来回切换，并且打印的内容有所差异，就是下列这样，点击纵向出现一版，点击横向出现另一版 过程： 我的第一想法很简单，就是写两种样式，然后再点击时分别通过@page { size: portrait; }和@page { size: landscape; }给初始化时纸张横纵向定下来就好了，但是在此过程中遇到了一个令我百思不得其解的问题，即当我第一次扥别点击纵向预览(如下列图一)，和横向预览(如下列图二)，
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
蓝胖子的博客
02-24 1万+
【Vue】Vue 使用 Print.js 打印选中区域的html，用到的是Element ui table表格，解决页面样式不出现或者table表格样式错乱问题！！！
这可能是最全的总结：css 媒体查询@media 不生效的原因
最新发布
weixin_57818879的博客
05-16 678
css 媒体查询@media 不生效的原因，不仅介绍了重灾区样式覆盖问题，还介绍了标签，环境匹配，仿真设备等因素
【踩坑】vue中使用媒体查询方法和不生效问题总结
seeeeeeeeeee的博客
07-27 5516
在vue中是不能直接使用@media的，我们必须结合less或者sass来使用它 一、安装依赖项 只要你安装了sass就行。 npm install sass-loader node-sass --save-dev 二、@/assets/scss/media.scss 这一步，自己创建一个scss文件，这路径不用跟我一样，自己改就行。 @media screen and (min-width:1400px) { .time_comparison_wrap{ margin-top:
vue 打印
晓枫
09-05 1048
A4纸的长宽：210mm×297mm，css中支持mm单位，可以直接使用，设置高度为297mm时，有时候会多出空白页，一直没搞明白为啥，于是我写的一页296.8mm，这样显示的比较好。vue-print-nb的打印逻辑是创建一个iframe，将我们要打印的节点加进去，之后再onload的时候触发打印，但是这个时候富文本的插件内容还没有加载出来，导致打印不对。还有一些定位元素的位置靠下也会导致出现空白页，打印时不显示的元素最好删掉。style上不能加scoped;
关于vue-print-nb插件，刷新页面后，@media print样式丢失解决方案
Admin_yws的博客
01-11 3246
把@media print写成单独的scss或css文件，再通过import引入该文件，刷新页面后，样式就不会丢失了
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
10-16
当在Vue组件中使用`@scroll`监听滚动事件时，如果直接在包裹内容的`div`上添加该监听器，如`<div class="body-container" @scroll="scrollEvent">`，可能不会触发`scrollEvent`。这是因为浏览器默认情况下，滚动事件...
vue下的@change事件的实现
10-16
总之，Vue.js中的`@change`事件主要用于响应用户交互，但为了保持代码的可维护性和可扩展性，我们需要根据实际需求选择合适的优化策略，避免过度使用事件监听。在处理多个类似组件时，组件化和状态管理是常见的解决...
解决vue组件中click事件失效的问题
12-13
本文将详细解析如何解决Vue组件中click事件失效的问题，以及涉及到的Vuex中未知mutation类型的错误。 首先，让我们深入理解Vue中的事件绑定。Vue提供了多种方式来绑定事件，例如`v-on:click`、`@click`和`@click....
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
10-15
总结来说，解决Vue中在循环中使用`@mouseenter`和`@mouseleave`事件闪烁问题的关键是将事件绑定到父元素，而不是每个循环的子元素。通过调整事件处理逻辑和状态管理，我们可以有效地防止闪烁，提供更流畅的用户体验...
vue中@change兼容问题详解
01-19
使用vue做移动端时，由于需求需要，需要在页面某处添加一个日期选择的控件。由于不是面向用户，内部使用，因此本着不浪费资源的原则，直接使用h5自带的input： <input type=date> emm…CSS样式不再赘述。然后...
vue中使用less/sass以及使用中遇到无效的问题
热门推荐
xiazeqiang2018的博客
07-17 2万+
在vue官方脚手架中，即vue-lci搭建的项目中，可以轻易的使用less/sass。 先使用npm下载依赖，命令行为’npm install less less-loader –save’,再在webpack.base.conf.js中添加rules对象： { test: /\.less$/, loader: &amp;quot;style-loader!css-loade...
@media使用不生效问题/Ant design of vue修改样式不生效问题
smilling sky的博客
07-28 2983
1.@media使用不生效问题 @media不生效写法：@media screen and(max-width:992px){ } 错误原因： and和(之间应该有空格，没有空格就不生效。 正确写法：@media screen and (max-width:992px){ } @media详细知识点：https://www.runoob.com/cssref/css3-pr-mediaquery.html 2.Ant design of vue修改样式不生效问题 修改Ant design of vue的样式
vue中媒体查询不起效原因总结
一只程序喵
01-06 6851
vue中 用less或scss都可以使用媒体查询不生效无非以下几种错误，若还有，欢迎在下方评论补充 错误一：在html结构文件里必须引入代码 <meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0"> width=device-width 是指可视化宽度 initial-...
vue使用@media screen
07-28
@media screen 是一个CSS中的媒体查询规则，用于根据不同的屏幕宽度或设备类型来应用不同的样式。在Vue中使用@media screen，可以通过以下步骤进行： 1. 在Vue组件的 `<style>` 标签中定义样式，并使用@media screen来添加媒体查询规则。例如： ```css <style> /* 默认样式 */ .my-element { color: blue; } /* 在屏幕宽度小于600px时应用的样式 */ @media screen and (max-width: 600px) { .my-element { color: red; } } </style> ``` 2. 在Vue组件的模板中，将需要应用不同样式的元素添加相应的类名。例如： ```html <template> <div> <p class="my-element">Hello, world!</p> </div> </template> ``` 上述代码中，当屏幕宽度小于600px时，`.my-element` 类将应用红色的颜色样式；否则，将应用蓝色的颜色样式。 通过这种方式，你可以根据不同的屏幕宽度或设备类型来调整Vue组件的样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值