【已解决】media的自适应调整布局失效

最新推荐文章于 2024-06-01 09:39:57 发布
最新推荐文章于 2024-06-01 09:39:57 发布
阅读量627 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dxmgood/article/details/117995569
版权

在vscode中，使用了自动格式化插件后，@media设置的max-width失效了。

经过仔细排查，原来是@media handheld, only screen and(max-width:1024px) 中and与后面括号(没有空格连在一起了，增加空格即可解决。

 

 

我的号，有问题可以问我：

 

键盘叔叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
详解关于使用媒体查询@meda失效原因的总结
01-19
最近在写自己的个人博客时遇到了一个小问题，为了解决响应式设计，便加入了媒体查询@meida来自适应各种大小的终端设备。但是在其中还发现了不少坑，在这里希望通过这篇文章分享给大家。 1、优先级的问题 div p{ color:#333; } @media screen and (min-width:500px) and (max-width:1240px){ p{ color:#666; } } 以上的这段代码div里面的p标签是不会改变颜色的，因为在媒体查询中指定的p标签得文字颜色的优先级要低于div中p指定的颜色。 2、空格符问题 @meida
鸿蒙系统——popupwindow 布局参数失效
JiaoJunfeng
02-08 388
Theme的android:fitsSystemWindows="false"或者删除，默认为false。在popupwindow中 使用 paddingStart paddingBottom 这种参数后，未起作用。经过查看 发现是因为activity的Theme中有以下属性。鸿蒙系统（华为手机 mate20 pro）这个参数的属性，否则会在部分手机中失效。布局中不使用提示添加。
@media使用方法
最新发布
qq505751223的博客
06-01 407
media是 CSS3 中的一个重要特性，它允许我们根据设备的特性（如设备的宽度、高度、方向、分辨率等）来应用不同的样式规则。下面是@media。
link引入media，通用样式失效问题
Heartnottowake的博客
03-10 506
通过media可以对不同分辨率的界面进行响应不同的样式，怎么使用很多文章都有讲解，下面说说引入后通用样式失效的问题： <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="link.css"> 这里设置了一个分辨率小于等于960px的一个样式表` .color { width: 100px; height: 100px; background-color: re
【屏幕自适应页面适配问题】CSS的@media，为了适应1440×900的屏幕，使用@media解决问题
DecorateCC的博客
04-12 2187
为了适应1440×900的屏幕，使用@media解决问题
web响应式布局中iframe自适应的方法
12-14
在Web开发中，响应式布局是一项关键技能，它允许网页根据不同的设备屏幕尺寸和方向自动调整布局，提供良好的用户体验。然而，在响应式布局中处理`iframe`元素时，常常会遇到一些挑战。`iframe`（内联框架）常用于...
利用onresize使得div可以随着屏幕大小而自适应的代码
09-05
相反，百分比宽度可以让元素根据容器的宽度按比例调整，更适合自适应布局。然而，百分比宽度在某些情况下可能会遇到问题，例如当HTML文档类型声明（DOCTYPE）导致CSS规则发生变化时。 在问题描述中提到的问题，就是...
实测禁止百度转码终极解决方法
03-08
标题“实测禁止百度转码终极解决方法”指的是如何避免网站被百度搜索引擎的移动转码服务转码，导致页面布局和功能受损。描述中提到，许多网站遭遇了百度转码，使得原本的JavaScript跳转功能失效，即所谓的“feicai”...
jQuery选项卡形式图片瀑布流布局选项卡切换效果代码
09-01
使用媒体查询（Media Queries）和流式布局（Fluid Layout）技术，可以确保无论屏幕尺寸如何，图片瀑布流和选项卡都能适配并保持良好的可用性。 6. **代码组织**： 为了保持代码的整洁和可维护性，项目可能会采用...
table设置背景图片，不能100%显示解决方法
09-28
- 在现代网页设计中，考虑到不同设备的屏幕尺寸，可以使用媒体查询（media queries）来针对不同分辨率调整表格样式，确保背景图片在所有设备上都能正确显示。 综上所述，解决表格背景图片不能100%显示的问题通常...
css中@media写法在ie 、firefox、Opera、Chrome、Safari 浏览器中的支持
u011927449的博客
06-13 1228
@media only screen and (min-width: 1024px)最小宽度1024 Safari 版本5.1。7（7534.57.2）支持chrome 版本26.0.1410.64 m 支持opera 版本12.15 支持fireFox版本21.0 支持IE10 版本10.0.92000.16580 支持 @media only screen and (max-width: 1024px)最大宽度 同上都支持 @media only screen and(min-width:800p...
html media设置自适应屏幕用法,css使用@media响应式适配各种屏幕的方法示例
weixin_33375038的博客
06-16 6185
定义和使用使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。PC端设备屏幕的宽度页面宽度大于1000px(>=1000)且小于1200px(<=1200)的时候执行下面的CSS(实际...
利用@media与@media screen进行响应式布局
天空一角的梦
07-07 2957
了解Media QueriesMedia Queries，其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。css2里面虽然支持@media属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的CSS，我们不去讨论。css3的@media属性在CSS3里面已经演变成一种 media queries（媒体查询/匹配）了,在CSS3里面，可以用查询语句...
CSS media属性的使用-兼容不同设备不同屏幕宽度的写法
飙歌的博客
11-18 1831
为了兼容不同设备排版问题，使用media属性对不同屏幕宽度的设备赋予不同的css值
媒体查询（-@media）的用法详解
热门推荐
zzh1251994430的博客
11-03 1万+
媒体查询（-@media）的用法详解 媒体查询可以用来干什么？ @media的作用：媒体查询可以在指定的设备上使用对应的样式替代原有的样式。 可以简单理解为：告诉浏览器，当满足某条件时，调用某样式。当满足条件A时，调用A样式； 当满足条件B时，调用B样式。 检测 1.viewport(视窗) 的宽度与高度 2.设备的宽度与高度 3.朝向 (智能手机横屏，竖屏) 。 4.分辨率等等 语法和操作符 语法一：内联@media @media 查询条件表达式｛ CSS样式 ｝ 例： @media not|only m
这可能是最全的总结：css 媒体查询@media 不生效的原因
weixin_57818879的博客
05-16 738
css 媒体查询@media 不生效的原因，不仅介绍了重灾区样式覆盖问题，还介绍了标签，环境匹配，仿真设备等因素
响应式布局（转载）
FalconKkv的博客
06-24 200
响应式布局的要点 当你想要实现一个响应式布局，你需要注意以下几点 设置viewport 我们所做的第一件事就是设置viewport，添加如下代码到你的head标签中 <meta name=‘viewport’ content=‘width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no...
使用@media根据屏宽来选择样式文件
yigeboke的博客
02-12 523
//如果文档宽度小于 300 像素则修改背景颜色(background-color): @media screen and (max-width: 300px) { body { background-color:lightblue; } }
uniapp自适应布局示例
04-18
1. 使用rpx单位：UniApp中可以使用rpx单位来定义布局，rpx是一个相对单位，它会根据屏幕宽度进行自适应调整。例如，如果你想让一个元素的宽度在不同设备上都占据屏幕的一半，可以这样定义样式： ```css width: 50...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值