@media screen and 无效问题

最新推荐文章于 2023-06-18 14:29:16 发布
原创 最新推荐文章于 2023-06-18 14:29:16 发布 · 1.8k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #@media #无效 #媒体查询

本文记录了一位初学者在尝试使用CSS媒体查询时遇到的问题及解决过程。文章详细描述了如何正确设置viewport元标签以及CSS语法中and操作符后的空格要求，确保媒体查询能够生效。

很多天以前就想学前端，自己写点儿东西（虽然之前会一点儿，但是时间太久远了。。。）

今天终于动工了！（该死的拖延症！！！）

当我信心十足的在编辑器上敲下@media screen and （max-width:500px）{} 后，效果在浏览器上始终显示不出来。


    <meta name="viewport" content="width=device-width, initial-scale=1" />

 

 想要做媒体查询，viewport是必须要有的。

还有，and后面要有空格，css语法错误也会导致媒体查询无效。

详解关于使用媒体查询@meda失效原因的总结
01-19
@media screen and (min-width:500px) and (max-width:1240px){ p{ color:#666; } } 以上的这段代码div里面的p标签是不会改变颜色的，因为在媒体查询中指定的p标签得文字颜色的优先级要低于div中p指定的颜色。 2...
H5C3的易错点与@media + rem布局，以及动态图电池和旋转.zip
08-02
@media screen and (max-width: 768px) { body { font-size: 16px; /* 在小屏幕上调整字体大小 */ } } ``` `rem`（root em）单位是相对于根元素（通常是`html`元素）的字体大小的单位。通过设置body或html的字体...
[Tip] @media screen and 不起作用原因汇总（转）
zhaoweihao的博客
09-22 1067
@media screen and 不起作用原因汇总 首先确认是不是css本身的问题，而不是媒体查询没有生效；例如 div{display:flex;}/*那么div所有的display效果都将无法生效*/ 错误1、格式书写错误and后面必须有空格例如下面代码: @media screen and (max-width:500px){ } 错误2、样式冲突；@media查询代码的样式被后面的c...
@media screen and 不起作用原因汇总
朽木自雕的博客
10-31 7223
下面的代码除了 @media screen and (max-width: 768px){ body{ background-color: orange; } } 这几行不起作用，其他都能起作用。 <style> b...
CSS的@media与@media screen，媒体查询
jingjing的博客
02-20 3857
在网站自适应设计中，@media与@media screen是经常会用到的css代码，其功能就是为不同的媒体设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。 @media与@media screen区别 @media与@media screen两者在电脑&手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，就用@media；否则，就用@media screen。 不过这只是笼统的做法，其实如
利用 @media screen 实现网页布局的自适应,@media screen and
热门推荐
qq_095的博客
09-05 8万+
利用 @media screen 实现网页布局的自适应,@media screen and 开始研究响应式web设计，CSS3 Media Queries是入门。 Media Queries 其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。 换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 那么，Media Q...
关于CSS3 @media screen and(max-width:760px){}不起作用问题
成遗憾的博客
02-21 1万+
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1,
@media only screen and
易天海
12-24 4060
@media screen and 不起作用原因汇总。 div{display:flex;}/*那么div所有的display效果都将无法生效*/ 第一种错误：格式书写错误and后面必须有空格例如下面代码； @media screen and (max-width:500px){ } 第二种错误：样式冲突；@media查询代码的样式被后面的css所覆盖 注意：建议在书写css的过...
@media only screen and (max-height: 850px)
最新发布
08-20
@media screen and (max-height: 850px) { /* 当设备高度小于或等于850px时应用的样式 */ } 2. 在HTML的link标签中使用（虽然不常用，但也可以）： <link rel="stylesheet" href="style.css" media="screen ...
@media screen and 不起作用原因汇总。（转载）
petterp的博客
08-31 2万+
@media screen and 不起作用原因汇总。 首先确认是不是css本身的问题，而不是媒体查询没有生效；例如 div{display:flex;}/*那么div所有的display效果都将无法生效*/ 第一种错误：格式书写错误and后面必须有空格例如下面代码； @media screen and (max-width:500px){ } 第二种错误：样式冲突；@m...
CSS 1 ，移动端适配，使用媒体查询实现移动端适配，meta标签的使用（min-width和max-width）
NorthCity Smile的博客（NcSmile，博主域名：https://ncmile.blog.youkuaiyun.com）
04-26 5686
⭐移动端适配是指在开发网站或应用时，确保页面能够在各种移动设备上良好显示和操作。随着智能手机和平板电脑的普及，越来越多的用户通过移动设备访问互联网，这使得移动端适配成为前端开发中的核心任务之一。开发者必须考虑不同屏幕尺寸、分辨率以及触摸操作的特点，以提供一致且优化的用户体验。 在移动端适配中，媒体查询（Media Queries）作为一种关键的CSS技术，可以根据设备的屏幕属性（如宽度、高度、方向和分辨率）动态应用特定样式。通过使用媒体查询，开发者可以为不同类型的设备（如手机、平板、桌面）设置不同的布局和样
CSS媒体查询@media and screen指令在部分（360、奇安信等）浏览器不生效的解决方案
PureSky12的博客
11-23 1652
@media and screen指令在chrome、edge等浏览器也生效，但是在360浏览器等其它浏览器进行测试时，发现这段代码的指令没有被执行
响应式web设计之CSS3 Media Queries
橙子9102
05-12 1224
响应式web设计之CSS3 Media Queries 开始研究响应式web设计，CSS3 Media Queries是入门。 Media Queries，其作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适应不同的设备。 那么，Media Queries是如何工作的？ 两种方式，一种是直接在link中判断
响应式布局@media only screen and 解释以及demo
好吗好的~的技术博客
09-26 6015
摘自：https://blog.youkuaiyun.com/qq_34960569/article/details/51775737 only(限定某种设备) screen 是媒体类型里的一种 and 被称为关键字，其他关键字还包括 not(排除某种设备) /* 常用类型 */ 类型 解释 all 所有设备 braille 盲文 embossed 盲文打印 handheld 手持设备 print 文档打...
媒体查询 @media screen
m0_63835647的博客
06-18 5715
上述代码表示，当屏幕的宽度小于或等于 600px 时，背景颜色为 lightblue；规则包含在CSS样式表中，通过添加不同的媒体属性来确定哪个设备上应该应用哪个样式。最常见的媒体查询语法是。这样写表示，当设备的屏幕宽度小于或等于 600 像素，并且设备是横向显示时，背景色为 lightblue。是CSS中的一种语法，用于在不同的媒体设备（如桌面计算机、平板电脑、手机）上应用不同的样式。例如，假设我们想针对不同屏幕宽度设定不同样式，我们可以这样编写。是最常见的媒体查询，用于指定应用于屏幕的样式，你可以在。
响应式布局@media screen and ( max-width: 像素值 ) {}
qq_36560875的博客
07-11 1124
设计思路很简单，首先先定义在标准浏览器下的固定宽度（假如标准浏览器的分辨率为1024px，那么我们设置宽为980px），然后用Media Query来监测浏览器的尺寸变化，当浏览器的分辨率小于1024px的时候，则通过Media Query预设的样式表来将页面的宽度设置为百分比显示，这样子页面的结构元素就会根据浏览器的的尺寸来进行相对应的调整。同理，当浏览器的可视区域改变到某个值（假如为650px）的时候，页面的结构元素根据Media Query预设的层叠样式表来进行相对应的调整。看看我们的例子： /*
奇怪！为什么@media起作用，而@media screen and不起作用
qq_43654065的博客
05-21 439
今天遇到一个贼拉奇怪的事情，就是在做h5适配时，将@media改成@media screen and就怎么都不起作用了。 专门去查了@media和@media screen的区别，搜出来都是关于打印时的区别。哎，我还就奇了怪了。住那么把官网上的示例拿过来，发现可以用。 我去，什么鬼。 仔细对比了一下我的代码和官网代码的区别，发现我少了个空格。。。这。 @media screen and (){ } 如上，就是and和括号中间的空格。我。。。 ...
利用@media screen实现网页布局的自适应
weixin_43846505的博客
02-16 1056
优点:无需插件和手机主题,对移动设备友好,能够适应各种窗口大小。只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值 准备工作1：设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： 这段代码的几个参数解释： width = device-width：宽度等于当前设备的宽度 height = device-heigh...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值