HTML/CSS @media查询:这条线一直在消失
HTML/CSS @media查询是一种用于响应式网页设计的技术。它允许开发人员根据设备的特性和屏幕尺寸来应用不同的样式和布局。通过使用@media查询，开发人员可以根据不同的媒体类型（如屏幕、打印机等）和媒体特性（如宽度、高度、方向等）来自定义样式。
@media查询的优势在于它可以提供更好的用户体验和可访问性。通过根据设备特性和屏幕尺寸调整网页布局和样式，可以确保网页在不同设备上都能良好显示和操作。这可以提高用户的满意度，并使网站更易于使用。
应用场景方面，@media查询常用于响应式网页设计中。通过使用不同的媒体查询规则，开发人员可以为不同的设备和屏幕尺寸提供不同的布局和样式。例如，可以根据屏幕宽度调整导航栏的显示方式，或者根据设备方向调整图片的大小和位置。
对于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的品牌商，无法给出具体的链接。但是腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以满足开发人员在云计算领域的需求。可以通过访问腾讯云官方网站，了解更多关于腾讯云的产品和服务信息。
相关·内容
2回答
在HTML5中使用Viewport元元素设置网页宽度的意义是什么
html、css、responsive-design
换句话说:在HTML5中，viewport元素的用途是什么？
因为使用媒体查询可以根据设备的屏幕尺寸应用适当的CSS样式。为什么我们需要带有"width=device-width“这部分的viewport元素。
我正在浏览这个w3学校教程()。
它给出了一个没有viewport meta标签的网页的例子，以及一个带有viewport meta标签的网页。这是如何工作的？
本教程介绍了meta viewport元素将页面宽度设置为设备的宽度。这项工作如何限制页面不能水平滚动和向下滚动？
我认为以上的影响是由于媒体的质疑。为什么响应式设计需要viewport元素的width属性？
浏览 0提问于2016-02-20得票数 1
2回答
如何有效地使用CSS3媒体查询？
css、responsive-design、media-queries
在使用Media query进行响应式网页设计时，我有点困惑。实际上，我是个新手，我也想问一下:当你在缩小浏览器时遇到CSS错误时，有必要每次都添加媒体查询吗？我曾经这样做过，我的css中有很多媒体查询！
浏览 2提问于2016-03-06得票数 0
2回答
CSS媒体查询:使用比较
css、mobile、media-queries
我想尝试找出一种自适应网页设计的方法，以便与移动浏览器和桌面浏览器共存。
一开始，我觉得在CSS中使用媒体查询是我所需要的，所以我同意了，但谷歌Chrome似乎把我想做的事情搞砸了。
与大多数浏览器相比，大多数情况下只有移动浏览器才能响应定向媒体查询，这似乎是一种针对移动浏览器的好方法，不管屏幕大小如何。然而，出于某种原因，谷歌Chrome不仅会对此做出回应，而且实际上会根据视口的尺寸(窗口本身)来选择景物和肖像，而与屏幕本身的位置无关。
这让我想到了另一个潜在的想法。我注意到，在我的移动设备上，设备宽度和设备高度将根据景观和纵向模式交换位置，而桌面上的谷歌Chrome总是报告显示器的适当尺寸
浏览 6提问于2015-10-29得票数 1
回答已采纳
1回答
React.js CSS窗口宽度
javascript、css、reactjs、google-chrome
我正在开发一个响应网站使用react。对于样式设计，我使用CSS样式表。响应部分是使用@media查询在CSS中实现的。
问题是，当我使用铬时，元素看起来更大，布局就像我从一个更小的屏幕(平板电脑)访问网站一样。我所理解的是，chrome“认为”视图端口更小，并使用相应的信息来响应媒体查询。
这一问题出现在开发过程中，经过一段时间的正确工作。
我做错了什么，我怎么解决这个问题？
注意:在Firefox中打开网站时，一切都正常工作。此外，当我打开开发工具的铬(检查F12)和‘切换设备工具栏’为真(Ctrl + Shift + M)，尺寸设置正确。问题只出现在使用“常规铬”。
浏览 6提问于2022-11-20得票数 0
3回答
我是否必须为我的站点可以查看的每种屏幕大小编写媒体查询，或者是否有替代方案？
jquery、html、css、responsive-design
我是一个初级前端开发人员，刚刚开始研究响应式设计。虽然媒体查询的想法让我兴奋，但当你没有足够的断点时会发生什么？
在很大程度上，你可以假设某人拥有iPhone或iPad，但其他平板电脑和手机以及不同尺寸的Mac/PC屏幕怎么办？为每种屏幕尺寸编写媒体查询将是一项疯狂的任务。
那么，有没有其他方法可以在没有媒体查询的情况下完成响应式设计呢？或者我误解了如何使用媒体查询？
浏览 0提问于2013-07-20得票数 4
2回答
可以让一个页面在不同的屏幕上查看吗？
css、screen-resolution
我需要一个代码，可以改变我的网页布局，以便在不同的PC显示器上查看。我已经尝试过“响应式Webdesign"，但我不知道是否有一种方法可以让它不仅在不同的设备上显示，而且在不同的PC屏幕尺寸上显示？提前谢谢。
浏览 10提问于2020-08-14得票数 0
5回答
当网页浏览器屏幕大小改变时，我如何改变我的html输入栏？
html、css
我有搜索字段在我的网页，现在我需要改变大小，当网页浏览器的屏幕尺寸改变。
假设最初我的web浏览器屏幕是全尺寸的，所以它将基于最大宽度显示，现在当我减小web浏览器屏幕尺寸时，它也会减少搜索字段的大小，最高可达最小宽度。你知道我该怎么做吗?这是我尝试过的。
.navbar-search input[type="text"]{
font-size: 15px;
height: auto;
margin-bottom: 05px;
max-width: 565px;
min-width: 50px;
}
这里我发现了一个例子，如果你减小屏幕尺
浏览 0提问于2013-03-07得票数 1
回答已采纳
3回答
Android WebView和CSS媒体查询
android、css、webview
我有一个基本的网页，它可以正确响应屏幕尺寸和方向的变化(使用CSS媒体查询)，当在Android平板电脑(Nexus 7)上显示在Chrome中时。当我在WebView中显示同一页时，基于屏幕宽度的媒体查询不起作用。下面是我如何设置WebView的：
WebView webView = (WebView) findViewById(R.id.webView);
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setLoadWithOverviewMode(true);
webView.getSett
浏览 6提问于2013-04-05得票数 7
1回答
如何将逻辑运算符NOT与定向媒体特性结合起来
css、orientation、media-queries、logical-operators
我需要以css属性为目标的任何设备，这不是iPad和基于设备的方向。
嵌套媒体查询在我的模拟器上不起作用。示例
@media not screen and (device-width: 768px) and (device-height: 1024px) {
@media screen and (orientation: portrait) {
DIV { border: solid 1px yellow; }
}
@media screen and (orientation: landscape) {
DIV { border: s
浏览 0提问于2013-07-31得票数 0
4回答
使用jquery/javascript使按钮可根据屏幕大小调整大小
javascript、jquery、ipad、css、mobile-website
我想让我的按钮控件可以根据屏幕尺寸调整大小，就像它们在其他移动设备(iPhones和iPads)上也应该自动调整一样。.How可以吗？
浏览 0提问于2013-08-23得票数 0
1回答
媒体查询和屏幕定向
css、media-queries、landscape-portrait
我正在创建一个响应式的设计网页，我想确保我对不同设备和方向的所有媒体查询都是正确的。 这篇文章建议尝试使用最小宽度和最小高度的媒体查询。并为不同的分辨率设置不同的断点。 screen orientation for multiple tablets with fluid design 尽管如此，我还是用方向找到了这个方法(见下文)。我应该使用这种方法还是上面的方法？我应该使用@media screen，还是应该考虑所有的vs screen？ @media screen and (min-width: 700px) and (orientation: landscape) { ...
浏览 31提问于2019-10-19得票数 0
回答已采纳
2回答
响应装置类型瞄准
html、css、responsive-design
全,
我正试图开发一个响应能力强的站点，但出于某种原因，我为ipad/tablet使用的媒体查询也在影响iphone/mobile。我的尺寸错了吗？
针对所有三种设备类型的最佳方法是什么？
谢谢
/桌面/@媒体(最小宽度:1100 min)
/ipad/ @media屏幕和(最大宽度:1115 max)
/iphone/ @media屏幕和(最大宽度:767 max)
浏览 6提问于2016-02-16得票数 0
回答已采纳
2回答
流体网格和媒体查询的区别
html、css、responsive-design、media-queries、fluid-layout
我对响应性网页设计非常陌生，所以请原谅我这个愚蠢的问题。我必须建立一个现有的桌面网站，以响应设计。在谷歌搜索之后，我发现了两种方法--流体网格和媒体查询。然而，我搞不懂我应该遵循哪种方法，或者我需要使用这两种方法来开发响应性站点。据我所知，流体网格用于根据不同的视图显示网页，而媒体查询用于根据不同大小的浏览器(使浏览器更小或从移动/平板/桌面浏览器)中可用的房间放置不同的内容(图像、文本)。如果我在这里遗漏了什么，请纠正我。
谢谢你的帮助！
浏览 4提问于2014-04-13得票数 2
回答已采纳
1回答
@媒体查询设备-如何描绘一个css，另一个景观？
html、css、ipad、responsive-design、media-queries
如何为设备添加两个不同的@media查询css样式表。
所以当你把它放在肖像上时，它会激活其中一个，而在景观中，它会激活另一个。
我的案子：
我正在尝试创建一个只在景观(1024 it )中工作的页面，所以当您的设备(在我的例子中是Ipad)在肖像(768 It)中运行时，它会激活一个css，它告诉您将屏幕横向/横向旋转。
我试过这个：
<link rel="stylesheet" media="@media only screen and (max-device-width : 1024px) and (orientation : landscape)"
浏览 2提问于2013-12-15得票数 2
回答已采纳
4回答
在响应式设计中使用%单位有什么意义？
css、responsive-design、media-queries
我正在重新设计我的网站，因为在不同的分辨率(不同的设备)上看起来很糟糕，大多数指南和教程都依赖于%和em而不是固定值。我还在学习这个，所以我在阅读周围的一切。
我认为这将解决不同显示尺寸的问题，但又一次:我们必须制作更多的CSS来解决一些特定的问题。
如果我需要添加额外的显示尺寸的媒体查询，为什么使用% then？真的使用% reduce编码吗？是否需要为某些尺寸添加一些额外的css，还是我做错了什么？
谢谢你的建议！
浏览 0提问于2012-07-26得票数 5
回答已采纳
4回答
如何在大屏幕上显示移动屏幕设计？
javascript、html、css、media-queries
在设备之间切换设计时，我遇到了问题。我知道css3 @media查询是用来根据设备宽度、方向等来处理的。
就设备大小而言，css媒体查询在大屏幕或移动屏幕上非常正常。
e.g
这是移动屏幕大小的设计。
这是大屏幕的设计
媒体查询可以很好地切换设计。但是我想在桌面屏幕上显示移动屏幕的设计，当父div大小很小时，例如等于移动屏幕大小？
在以下情况下，我需要显示移动屏幕的设计桌面屏幕的大小。
我在谷歌上搜索过，但没有找到任何运气。我还尝试使用不同的媒体查询选项。有没有办法解决这个问题？
对不起，我忘记提到我正在使用框架进行响应性设计。
浏览 8提问于2015-02-12得票数 3
回答已采纳
2回答
如何缩小增加屏幕宽度？
css、media-queries
我笔记本电脑屏幕分辨率为1366*768像素，平均屏幕宽度为1366像素，高度为768像素，如果我有一个具有css属性的网页，当我将屏幕分辨率设置为1366*768时，这是固定的
@media screen and (max-width:1366px){
//css1
}
@media screen and (min-width:1361px) and (max-width:1500px){
//css2
}
这意味着如果设备屏幕的width为1366px或更小的css1将应用于页面，如果屏幕大于1366px，则将应用css2。因此，对于我的笔记本电脑屏幕，应该应用css
浏览 1提问于2016-11-10得票数 0
4回答
CSS媒体查询将影响所有移动设备
css、mobile、media-queries
在web开发方面完全是新手，并试图在这里自学，至少可以说这是相当令人望而生畏的，但我仍然很开心。
无论如何，我知道媒体查询会影响移动设备在不同屏幕尺寸上呈现页面的方式，但我想知道是否只有一种媒体查询可以影响所有移动设备，而不管屏幕大小？
我只想确保它不会影响桌面。
例如，我想要调整所有移动设备上的导航菜单，但我不想在style.css中仔细更改与屏幕大小相关的每个媒体查询。
我只想创建一个媒体查询，使此调整将影响所有移动屏幕的大小。
希望这是有意义的。
一如既往，你们都很棒！
谢谢你的帮忙!
浏览 2提问于2020-11-11得票数 0
3回答
web开发入门-如何使javascript响应不同大小的浏览器
javascript、jquery、html、css
我对网页开发的投入越来越大，以前也制作过网页，但从来没有真正担心过屏幕尺寸的不同。我想创建的新站点有很多javascript和jquery元素，但我一直认为让站点响应媒体查询是在HTML/CSS3方面，但我只是想了解一下JS在这一切中如何发挥作用，这样我就可以找到额外的资源。
简而言之，javacsript/jquery代码是否必须根据检测到的正在使用应用程序的设备大小进行调整？
浏览 3提问于2015-12-11得票数 0
2回答
wp_list_pages -有没有办法缩短标题，以便在特定页面的较小屏幕上以页脚显示
wordpress、media-queries、footer、sitemap、page-title
我有一个wordpress站点，我在我的页脚中使用wp_list_pages (作为一个自动化的站点地图列表)，如下所示：
<ul style="list-style-type: none;"><?php wp_list_pages('exclude=143,1040,1045,1048&title_li='); ?></ul>
在几页上，我有更长的标题。这适用于较大尺寸的屏幕，但不适用于较小的屏幕尺寸(过多换行)。
有没有办法编写代码来检查特定的页面Is，以利用@media Media查询，并为较小的屏幕尺寸更改标题
浏览 17提问于2016-02-16得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
