我爱自学

 找回密码
 会员注册

QQ登录

只需一步,快速开始

css media查询在浏览器窗口调整时生效,移动设备上不生效

网站开发时,使用css media适应移动端。CSS设置好后,变更浏览器窗口时可以生效,但是切换移动端不生效。在此,分享解决方法。
如下图所示,使用css media查询后,变更窗口大小时CSS样式可以生效。但是,切换到移动窗口时,不能生效。在此分享解决方法:

css media查询在浏览器窗口调整时生效,移动设备上不生效

css media查询在浏览器窗口调整时生效,移动设备上不生效



1、Css media查询语法,and和‘(’之间需要一个空格

可以测试一下,没有空格时,media查询的相关css样式均不生效。

  1. @media screen and (min-width: 300px) and (max-width: 450px)
复制代码

2、如果mediac语法中是有空格的,那么就要考虑<head>标签中加入viewport

如下内容:<meta name="viewport" content="width=device-width, initial-scale=1,maxium-scale=1,minimum-scale=1,user-scaleble=no">

以上,就是移动端media查询css样式不生效的解决方法

点击阅读更多内容!
如果您觉得文章内容帮助到了您,不妨点点感兴趣的广告。感谢您的支持!

微信扫一扫打赏

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 会员注册

本版积分规则

手机版|小黑屋|我爱自学 ( 蜀ICP备19015358号-3 )

GMT+8, 2024-4-29 12:36 , Processed in 0.413766 second(s), 31 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

本站大部分教程是网站原创教程,一部分教程为我爱自学(http://www.5izixue.com)编辑收集整理。

如果您需要转载我爱自学网站教程,请注明“资料来源:我爱自学(5izixue)”字样并注明本站网址。

编辑收集整理的教程版权归原作者所有,本站只提供网友交流学习使用,请勿用于商业用途,如果该文章有任何侵犯您权益的地方,请联系我们(569705694@qq.com),我们将在第一时间进行处理!谢谢您的支持!

快速回复 返回顶部 返回列表