首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

@我使用的显示器大小的媒体规则(max-width: 1920px)和我的CSS不工作

根据您提供的问答内容,我将尝试给出一个完善且全面的答案。

首先,您提到了一个媒体规则和CSS不工作的问题。根据您提供的规则,我们可以看出这是一个针对显示器大小的媒体查询规则,即当显示器宽度小于等于1920像素时生效。而您提到的CSS不工作可能是由于以下几个原因导致的:

  1. CSS选择器错误:请确保您的CSS选择器正确地应用于目标元素。可以通过检查选择器的拼写和语法来解决此问题。
  2. CSS样式冲突:可能存在其他CSS样式与您的媒体查询规则冲突,导致规则不起作用。您可以通过检查其他CSS样式并进行必要的调整来解决此问题。
  3. 媒体查询规则位置错误:请确保您的媒体查询规则位于其他CSS样式之后,以确保其优先级正确。
  4. 缓存问题:有时浏览器可能会缓存旧的CSS文件,导致新的媒体查询规则不起作用。您可以尝试清除浏览器缓存或使用强制刷新来解决此问题。

综上所述,您可以通过检查CSS选择器、解决样式冲突、调整规则位置以及处理缓存问题来解决CSS不工作的问题。

关于媒体查询和CSS的更多信息,您可以参考以下内容:

  1. 媒体查询概念:媒体查询是一种CSS技术,用于根据设备的特性(如屏幕大小、分辨率、方向等)应用不同的样式。了解更多媒体查询的概念,请参考媒体查询 - MDN Web 文档
  2. CSS选择器:CSS选择器用于选择HTML文档中的元素,并为其应用样式。了解更多CSS选择器的知识,请参考CSS 选择器 - MDN Web 文档
  3. CSS样式冲突解决方法:了解如何解决CSS样式冲突问题,请参考CSS 优先级 - MDN Web 文档

希望以上信息能够帮助您解决问题。如果您有任何进一步的问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

web前端开发时推荐用rem做单位

之前做页面写css样式时候一直用 px 做单位,因为直接看着PC端设计图标注多少像素就写多少像素。...下面说下对 rem 看法,和我怎样使用 rem ,为什么推荐使用 rem 一、rem 单位 rem 是一个相对单位,相对根元素 标签 字体大小单位,一般浏览器默认是 1rem =...是不是一下得出结果了 可能有人就想 (之前是这样想过),直接用px做单位,香吗? 还换算成rem,不是多此一举吗?...下面就谈谈从 px 到 rem 遇到 神奇 事,改变了想法 三、为什么推荐使用 rem 做单位 推荐用rem做单位,还得从一张总宽是 1920px ,内容宽度是 1440px 设计图说起...CSS3 @media 查询 ,浏览器宽度改变时候调整根元素字体大小

1.2K40

【最佳网页宽度及其实现】「建议收藏」

大家好,又见面了,是全栈君。 1. 设计网页时候,确定宽度是一件很苦恼事。 以minifun.cn为例,根据Google Analytics统计,半年多以来,访问者屏幕分辨率一共有81种。...其中,1024px最常见,但是随着大屏幕显示器流行,更高分辨率正变得越来越多。...下文就根据css-tricks上解决方案,讨论如何实现第二种方法,实际上是很简单。 3. 首先,网页缺省宽度,确定为满足1024px宽度显示器。...min-width: 780px; max-width: 1260px; 这二行规定了网页最小和最大宽度。注意,IE6不支持这二行,即它们在IE6中是无效。...通过变动浏览器窗口大小,可以发现网页在780px-1260px范围内会自动伸缩。 5. 最后,建议大家平时使用计算机时候,不要盲目采用高分辨率,意义不大。

83410

最佳网页宽度及其实现

目前,常见屏幕分辨率宽度大概有6种:800px,1024px,1280px,1440px,1680px和1920px。...其中,1024px最常见,但是随着大屏幕显示器流行,更高分辨率正变得越来越多。...下文就根据css-tricks上解决方案,讨论如何实现第二种方法,实际上是很简单。 ? 3. 首先,网页缺省宽度,确定为满足1024px宽度显示器。...min-width: 780px; max-width: 1260px; 这二行规定了网页最小和最大宽度。注意,IE6不支持这二行,即它们在IE6中是无效。...通过变动浏览器窗口大小,可以发现网页在780px-1260px范围内会自动伸缩。 5. 最后,建议大家平时使用计算机时候,不要盲目采用高分辨率,意义不大。 (完)

1.3K30

响应式布局入门

最近研究响应式设计框架时候,发现网上很多相关属性介绍,却很少有系统入门级使用文章,自己整理了一篇入门知识,并没有什么高深理论,也牵扯到框架。...css2时期有一个不是很常用media type,他拥有比如aural(声音)braille(触摸)print(打印)handheld(移动设备)等等十种媒体类型,(附加媒体类型详细http://www.w3....org/TR/CSS2/media.html#media-types)利用@media规则可以在同一样式表里为不同终端使用不同样式。...在判断终端分辨率大小之后,赋予不同样式进去,就像我们例子里 @media screen and (max-width : 320px){ body{...} } @media screen and...自己为自己所面对终端定制样式。 一般大于960显示器都可以用默认样式而不必在媒体查询里判断了。

1.7K50

Web网页响应式布局

Media Queries模块中允许添加媒体查询表达式,用以指定媒体类型,然后根据媒体类型来选择应该使用样式; Web自适应网页在线查看工具:Responsivator(开源直接在https://github.com.../johnpolacek/Responsivator下载) ​ 2) 响应式布局Media Queries模块 @media 语法结构及用法 功能:通过不同媒体类型和条件定义样式表规则媒体查询让CSS...如:width会有min-width和max-width媒体查询可以被用在CSS@media和@import规则使用方式:在CSS样式中内嵌“@media”,使用外部样式表引用在@import...选取条件) and (设备特性参数),设备二 { 样式代码 } @media screen and (max-width:640px) { css样式代码 } //在彩色电脑显示器屏幕和最大宽度在...如果是背景图片,我们可以准备多张不同尺寸图片,然后在各自媒体查询样式中结合结合一些“min-width,min-height,max-width,max-height等样式属性使用对应图片背景即可

1.8K30

Web网页响应式布局.md

Media Queries模块中允许添加媒体查询表达式,用以指定媒体类型,然后根据媒体类型来选择应该使用样式; Web自适应网页在线查看工具:Responsivator(开源直接在https://github.com.../johnpolacek/Responsivator下载) ​ 2) 响应式布局Media Queries模块 @media 语法结构及用法 功能:通过不同媒体类型和条件定义样式表规则媒体查询让CSS...如:width会有min-width和max-width媒体查询可以被用在CSS@media和@import规则使用方式:在CSS样式中内嵌“@media”,使用外部样式表引用在@import...选取条件) and (设备特性参数),设备二 { 样式代码 } @media screen and (max-width:640px) { css样式代码 } //在彩色电脑显示器屏幕和最大宽度在...如果是背景图片,我们可以准备多张不同尺寸图片,然后在各自媒体查询样式中结合结合一些“min-width,min-height,max-width,max-height等样式属性使用对应图片背景即可

1.5K20

【学习图片】1.图片简史

响应式布局中图像 除了灵活布局和使用CSS媒体查询之外,"灵活图像和媒体"是响应式网页设计三个重要方面之一。...为了使图像变得灵活,开发人员开始使用CSSmax-width:100%设置在图像上(或所有图像,整个站点),告诉浏览器渲染引擎通过缩放图像来防止图像超出其父容器。...你通常希望放大图像,也就是说,把 显示为比源图像固有大小更大大小。显示图像会显得模糊和有点像颗粒样子。...使用 img { max-width: 100% } 意味着,当灵活容器调整大小时,图像将根据需要缩小。与设置更严格 width: 100% 不同,这也确保图像不会超过其固有大小而被缩放。...很长一段时间以来,这就是处理图像规则使用浏览器能理解格式,使用合理压缩级别,永远不要向上缩放图像。 事例地址:https://codepen.io/web-dot-de...

1.1K40

Echarts5.3.2可视化案例-布局篇

/p/109817032 大屏设计尺寸规范指南 https://www.shejidaren.com/da-ping-sheji-chicun-guifan-zhinan.html 查看自己电脑显示器...: 个性化-显示设置-分辨率 19寸显示器:1440x900(16:10) 其它常见尺寸屏幕对应最佳分辨率如下: 19寸显示器:1440x900(16:10) 20寸显示器:1600x900...02 大屏设计 00 项目目录 01-使用技术 完成该项目需要具备以下知识: div + css 布局 flex 布局 Less 原生js + jquery 使用 rem适配 echarts基础 02...- 案例适配方案 设计稿是1920px flexible.js 把屏幕分为 24 等份 cssrem 插件基准值是 80px 插件-配置按钮—配置扩展设置–Root Font Size 里面...{ min-width: 1024px; max-width: 1920px; padding: .125rem .125rem 0; display: flex;

78720

响应式网页bootstrap

响应式网页设计 根据设备尺寸,自动调整布局,有bootstrap和foundation等 bootstrap没有自定义标签,主要通过css扩展class foundation兼容旧版本ie 网格系统...相当于C#UI里面的容器系统,bootstrap对css进行扩展,使用了类似less文件中变量定义,sacc不仅增加了变量还多了继承、混合、嵌套等功能 布局中必须row包含col,不能单独col...css属性上封装了三种布局方式,使用控件嵌套方式布局,设置宽度最大值和最小值 .container, which sets a max-width at each responsive breakpoint...@3(使用时候需要css) npm install jquery(node导入jquery) import from ‘jquery’ window. = window.jQuery =...视口大小估计 媒体类型描述all用于所有多媒体类型设备print用于打印机screen用于电脑屏幕,平板,智能手机等。

6.8K30

前端响应式布局为什么是个坑?

在head中添加meta标签,设置设备宽度作为视图大小,禁止缩放。...媒体查询:Media Queries,是响应式布局核心,浏览器会根据条件选择需要渲染html和css内容。...写媒体查询时候要按照屏幕从小到大设置。 外层包裹元素宽度处理要使用百分比。 图片缩放处理时候容易失真,所以尝试给图片添加最大最小宽度。...bootstrap框架用就是媒体查询原理,我们做响应式布局时候,基本都会借用bootstrap框架提高工作效率。 四、响应式优缺点 4.1、优点: 面对不同分辨率设备灵活性强。...响应式布局使用移动端窄屏时,隐藏内容依然会加载,低分辨率加载高质量图片或视频,不同屏幕尺寸都提供相同网页,加载内容多,浪费流量,速度慢,容易造成用户流失。 兼容所有终端,工作量大,效率低下。

1.7K10

前端响应式布局为什么是个坑?

在head中添加meta标签,设置设备宽度作为视图大小,禁止缩放。...媒体查询:Media Queries,是响应式布局核心,浏览器会根据条件选择需要渲染html和css内容。...写媒体查询时候要按照屏幕从小到大设置。 外层包裹元素宽度处理要使用百分比。 图片缩放处理时候容易失真,所以尝试给图片添加最大最小宽度。...bootstrap框架用就是媒体查询原理,我们做响应式布局时候,基本都会借用bootstrap框架提高工作效率。 四、响应式优缺点 4.1、优点: 面对不同分辨率设备灵活性强。...响应式布局使用移动端窄屏时,隐藏内容依然会加载,低分辨率加载高质量图片或视频,不同屏幕尺寸都提供相同网页,加载内容多,浪费流量,速度慢,容易造成用户流失。 兼容所有终端,工作量大,效率低下。

90020

前端响应式布局为什么是个坑?

在head中添加meta标签,设置设备宽度作为视图大小,禁止缩放。...媒体查询:Media Queries,是响应式布局核心,浏览器会根据条件选择需要渲染html和css内容。...写媒体查询时候要按照屏幕从小到大设置。 外层包裹元素宽度处理要使用百分比。 图片缩放处理时候容易失真,所以尝试给图片添加最大最小宽度。...bootstrap框架用就是媒体查询原理,我们做响应式布局时候,基本都会借用bootstrap框架提高工作效率。 四、响应式优缺点 4.1、优点: 面对不同分辨率设备灵活性强。...响应式布局使用移动端窄屏时,隐藏内容依然会加载,低分辨率加载高质量图片或视频,不同屏幕尺寸都提供相同网页,加载内容多,浪费流量,速度慢,容易造成用户流失。 兼容所有终端,工作量大,效率低下。

95640

《vue3+TS+element-plus 后端管理系统系列》之响应式设计

具体实践方式由多方面组成,包括弹性网格和布局、图片、CSS media query使用等。...媒体查询 ---- css3 媒体查询更加完善,不管用什么UI框架媒体查询也是逃不掉,可以做一些细节适配。...具体使用不说了,查看文档即可: CSS3 @media 查询 响应式 Web 设计 - 媒体查询 Sass和媒体查询 LESS @media内部作用域/扩展 sass 和 less 可以支持嵌套媒体查询...,使用起来复用度更高 项目实例: @media (max-width:550px) { .card-panel-description { display: none; } .card-panel-icon-wrapper...important; } } } 步骤解析:宽度为550px时候,css样式发生改变,隐藏面板文字和icon居中 window 监听 resize变化 ---- window提供一些监听媒体方法和大小方法

3.6K40

H5移动端适配原理及方案

移动端页面需要具备响应式设计,以适应不同大小和分辨率移动设备屏幕。使用流体网格布局、弹性图片和媒体查询等技术,确保页面在各种设备上都能良好显示。...响应式布局,通过媒体查询 @media 实现一套 HTML 配合多套 CSS 实现适配;比如,小米商城移动端使用 rem 布局,第二种,采用就是响应式布局,窗口在不同大小时候,内容排列方式是不同...媒体查询媒体查询可以让我们根据设备显示器特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定 CSS 样式,媒体查询由媒体类型和一个或多个检测媒体特性条件表达式组成。...-- link元素中 CSS 媒体查询 -->使用 Media...正在参与2024腾讯技术创作特训营最新征文,快来和我瓜分大奖!

15310

必应首页平铺背景图片实现方案

必应实现方案其实很简单,总结一句话就是:使用background-size: cover;覆盖背景区域,使用JavaScript根据屏幕尺寸动态计算背景图片偏移量。...: 1920px; max-height: 1080px; } } 背景图片原始尺寸为1920×1080,css中一些宽高尺寸以及宽高限制在下一节中讲解。...另外,媒体查询中两个边界值min-height:806px和min-width:1433px,本人还未弄清楚为何这两个边界值如此奇怪,但是必应这样做目的是很清楚。...标准13寸屏幕分辨率为1366×768,媒体查询两个边界值最接近标准14寸屏幕分辨率1440×900,也就是说,在14寸以下屏幕保持背景图片宽度显示超过1366px。...媒体查询超出边界值屏幕下,背景图片宽高限制在图片原始尺寸,这是为了拉伸图片造成失真,超过1920×1080屏幕始终居中显示原始图片尺寸。

1.8K50

CSS媒体查询_css网页

前言 媒体查询可以让我们根据设备显示器特性(如视口宽度、屏幕比例、设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性条件表达式组成。...: landscape) { ... } 如果使用设备屏幕宽度大于700px,媒体查询将返回true,样式将被运用。...如果使用是横向便捷式设备,第一个媒体查询返回false,但第二个媒体查询将返回true,样式仍将被使用。...:701px) and (max-width:900px)" href="mediu.css" /> 在样式中,还可以使用多条语句来将同一个样式应用于不同媒体类型和媒体特性中,指定方式如下所示 <link...本站仅提供信息存储空间服务,拥有所有权,承担相关法律责任。如发现本站有涉嫌侵权/违法违规内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

1.6K30
领券