程序设计 media-queries

3

编写CSS媒体查询时，有什么方法可以使用“或”逻辑指定多个条件？我正在尝试做这样的事情： /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { ... }

490 css media-queries

5

媒体查询中的“屏幕”和“仅屏幕”有什么区别？

screen和only screen媒体查询有什么区别？ <link media="screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> <link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="m.css" /> 为什么要求使用only screen？screen本身是否提供的信息不足以仅在屏幕上呈现？我已经看到许多使用以下三种方式之一的响应式网站： @media screen and (max-width:632px) @media (max-width:632px) @media only screen and (max-width:632px)

486 css media-queries

15

媒体查询：如何定位台式机，平板电脑和移动设备？

我一直在做一些关于媒体查询的研究，但我仍然不太了解如何定位某些尺寸的设备。我希望能够定位台式机，平板电脑和移动设备。我知道会有一些差异，但是拥有可用于定位这些设备的通用系统会很好。我发现了一些例子： # Mobile only screen and (min-width: 480px) # Tablet only screen and (min-width: 768px) # Desktop only screen and (min-width: 992px) # Huge only screen and (min-width: 1280px) 要么： # Phone only screen and (max-width:320px) # Tablet only screen and (min-width:321px) and (max-width:768px) # Desktop only screen …

470 css mobile media-queries tablet

18

Twitter Bootstrap 3：如何使用媒体查询？

我正在使用Bootstrap 3构建响应式布局，在该布局中我想根据屏幕尺寸调整一些字体大小。我如何使用媒体查询来进行这种逻辑？

371 css twitter-bootstrap media-queries

11

媒体查询可以基于div元素而不是屏幕来调整大小吗？

我想使用媒体查询根据div其所在元素的大小来调整元素的大小。我不能使用屏幕大小，因为div就像网页中的小部件一样使用，它的大小可以变化。更新资料看来现在正在对此进行处理：https : //github.com/ResponsiveImagesCG/cq-demos

317 css media-queries

12

是否可以将CSS @media规则内联？

我需要将横幅图片动态加载到HTML5应用中，并且需要几个不同的版本以适合屏幕宽度。我无法正确确定手机的屏幕宽度，因此我想到的唯一方法是添加div的背景图像，并使用@media确定屏幕宽度并显示正确的图像。例如： <span style="background-image:particular_ad.png; @media (max-width:300px){background-image:particular_ad_small.png;}"></span> 这可能吗，或者有人有其他建议吗？

293 html css media-queries

9

@media屏幕和（最大宽度：1024像素）在CSS中是什么意思？

我在继承的CSS文件中找到了这段代码，但是我觉得毫无意义： @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } 具体来说，第一行发生了什么？

245 css media-queries

8

移动网络的最大设备宽度和最大宽度之间有什么区别？

我需要为iPhone / Android手机开发一些html页面，但是max-device-width和之间有什么区别max-width？我需要为不同的屏幕尺寸使用不同的CSS。 @media all and (max-device-width: 400px) @media all and (max-width: 400px) 有什么不同？

242 css mobile-website media-queries

5

@Media最小宽度和最大宽度

我有这个@media设置： HTML： <head> <meta name="viewport" content="width=device-width, user-scalable=no" /> </head> CSS： @media screen and (min-width: 769px) { /* STYLES HERE */ } @media screen and (min-device-width: 481px) and (max-device-width: 768px) { /* STYLES HERE */ } @media only screen and (max-device-width: 480px) { /* STYLES HERE */ } 通过此设置，它可以在iPhone上运行，但不能在浏览器中运行。是因为我已经device在meta中，也许已经在max-width:480px？

225 css mobile media-queries

3

@media媒体查询和ASP.NET MVC剃刀语法冲突

我有一个使用Razor视图引擎在ASP.NET MVC中运行的大型站点。我有一个基本样式表，其中包含整个网站的所有通用样式。但是，有时我会在页面的中使用特定于页面的样式<head>-通常是一两行。我不特别喜欢将CSS放入其中，<head>因为它不是严格地将关注点分开，但是对于真正针对该页面的一两行而言，我宁愿不必附加另一个文件并增加带宽。我有一个实例，但我想将特定于页面的媒体查询放入<head>，但是由于媒体查询使用@符号和方括号{}，因此与razor语法冲突： @section cphPageHead{ <style> /* PAGE SPECIFIC CSS */ ... @media only screen and (max-width : 960px) <-- the @ symbol here is clashing! { ... } } </style> } 有办法解决这个问题吗？

214 css asp.net-mvc-3 razor media-queries

17

$（window）.width（）与媒体查询不同

我在一个项目上使用Twitter Bootstrap。除了默认的引导样式之外，我还添加了一些自己的样式 //My styles @media (max-width: 767px) { //CSS here } 当视口的宽度小于767px时，我还使用jQuery更改页面上某些元素的顺序。 $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } 我遇到的问题是，$(window).width()由CSS计算的宽度与由CSS计算的宽度似乎并不相同。当$(window).width()返回767时，css将其视口宽度计算为751，因此似乎存在16px的差异。有谁知道是什么原因造成的，以及如何解决这个问题？人们建议不要考虑滚动条的宽度，而应该使用滚动条的宽度$(window).innerWidth() < 751。但是，理想情况下，我想找到一种解决方案，该解决方案可以计算滚动条的宽度，并且与我的媒体查询一致（例如，两种情况都对照值767进行检查）。因为肯定不是所有浏览器的滚动条宽度都为16px？

186 jquery css twitter-bootstrap media-queries

16

为什么我的CSS3媒体查询不起作用？

在styles.css中，我正在使用媒体查询，这两个查询都使用以下变体： /*--[ Normal CSS styles ]----------------------------------*/ @media only screen and (max-width: 767px) { /*--[ Mobile styles go here]---------------------------*/ } 当我缩小窗口时，网站的大小会调整为我希望在常规浏览器（Safari，Firefox）中使用的布局，但是，手机上的移动布局根本无法显示。相反，我只是看到默认的CSS。谁能指出我正确的方向？

182 html css media-queries mobile-website

11

IE8对CSS媒体查询的支持

IE8是否不支持以下CSS媒体查询： @import url("desktop.css") screen and (min-width: 768px); 如果没有，替代的写作方式是什么？在Firefox中也可以正常工作。以下代码有任何问题吗？ @import url("desktop.css") screen; @import url("ipad.css") only screen and (device-width:768px);

178 html css responsive-design internet-explorer-8 media-queries

19

CSS @media打印背景色问题；

我在这家公司是新来的，我们有一款使用CSS的产品。我正在尝试为我们的应用制作可打印的样式表，但是background-colorin 中存在问题@media print。 @media print { #header{display:none;} #adwrapper{display:none;} td { border-bottom: solid; border-right: solid; background-color: #c0c0c0; } } 其他所有内容都可以使用，我可以修改边框等，但background-color不会在打印中出现。现在，我了解到，如果没有更多详细信息，可能所有人都无法回答我的问题。我只是想知道以前是否有人遇到过此问题或类似问题。

176 css media-queries

10

Bootstrap 3断点和媒体查询

在Bootstrap 3媒体查询文档中，该文档显示：我们在Less文件中使用以下媒体查询在网格系统中创建关键断点。超小型设备（电话，小于768px）：无媒体查询，因为这是Bootstrap中的默认设置小型设备（平板电脑，768像素及以上）： @media (min-width: @screen-sm-min) { ... } 中型设备（台式机，992px及以上）： @media (min-width: @screen-md-min) { ... } 大型设备（大型台式机，1200px及以上）： @media (min-width: @screen-lg-min) { ... } 难道我们应该能够使用@screen-sm，@screen-md以及@screen-lg在我们的媒体查询的名字呢？因为它对我不起作用。我必须先使用像素测量，@media (min-width: 768px) {...}然后才能使用。难道我做错了什么？另外，对于超小型设备的480px的引用是否是错字？那不应该说到767px吗？（因为已从文档中删除）

170 twitter-bootstrap twitter-bootstrap-3 media-queries breakpoints

Questions tagged «media-queries»