Tag: 媒体查询
iPhone 5的CSS媒体查询
iPhone 5有更长的屏幕，并没有捕捉到我的网站的移动视图。 什么是新的响应式devise查询的iPhone 5，我可以结合现有的iPhone查询？ 我目前的媒体查询是这样的： @media only screen and (max-device-width: 480px) {}
常见的CSS媒体查询断点
我正在与CSS媒体查询响应式网站。 以下是一个很好的设备组织吗？ 手机，Ipad（风景和人像），桌面和笔记本电脑，大屏幕 什么是常见的媒体查询断点值？ 我打算使用以下断点： 320：智能手机的肖像 481：智能手机景观 641或768 ???：iPad的肖像??? 961：iPad的风景/小笔记本电脑？ 1025：桌面和笔记本电脑 1281：宽屏幕 你怎么看？ 我有几个疑问？ 点。
CSS @media用背景色打印问题;
我在这家公司是新来的，我们有一个使用css数英里的产品。 我正在尝试为我们的应用程序制作可打印的样式表，但是我在@media print中遇到了背景色的问题… @media print { #header{display:none;} #adwrapper{display:none;} td {border-bottom: solid; border-right: solid; background-color: #c0c0c0;}} 一切工作，我可以修改边界，但这样的背景颜色不会通过打印。 现在我明白你们可能无法用更多的细节来回答我的问题，我只是好奇以前有没有人有这个问题，或者类似的问题。
@media媒体查询和ASP.NET MVC剃刀语法冲突
我有一个使用Razor视图引擎在ASP.NET MVC中运行的大型网站。 我有一个基本的样式表，其中包含整个网站的所有通用样式。 然而有时候，我在页面的<head>中有页面特定的样式 – 通常这是一两行。 我不特别喜欢把CSS放在<head>因为它不是严格区分顾虑，而是对于一两行，这个页面确实是特定的，所以我不需要附加另一个文件并添加到带宽中。 我已经有了一个实例，但是我想把页面特定的媒体查询放到<head> ，但是因为媒体查询使用@符号和括号{}，所以它与剃刀语法冲突： @section cphPageHead{ <style> /* PAGE SPECIFIC CSS */ … @media only screen and (max-width : 960px) <– the @ symbol here is clashing! { … } } </style> } 有没有办法解决这个问题？
@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 ，也许有max-width:480px而不是？
@media screen和（max-width：1024px）在CSS中是什么意思？
我在inheritance的CSS文件中find了这段代码，但我无法理解它： @media screen and (max-width: 1024px){ img.bg { left: 50%; margin-left: -512px; } } 具体来说，第一行发生了什么？
CSS媒体查询：最大宽度或最大高度
当写一个CSS媒体查询，有没有什么办法可以用“OR”逻辑指定多个条件？ 我试图做这样的事情： /* This doesn't work */ @media screen and (max-width: 995px OR max-height: 700px) { … }
CSS媒体查询重叠的规则是什么？
我们如何精确隔离媒体查询以避免重叠？ 例如，如果我们考虑代码： @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } 在所有支持的浏览器中，恰好20em和45em会发生什么？ 我已经看到人们使用：像799px，然后800px的东西，但屏幕宽度为799.5像素？ （显然不是一般的显示，而是一个视网膜？） 考虑到这个规范，我对这个答案最好奇。
CSS媒体查询屏幕尺寸
我目前正试图devise一个可以兼容多种屏幕尺寸的布局。 下面列出了我正在devise的屏幕尺寸： 屏幕尺寸： 640×480 800×600 1024×768 1280×1024（及更大） 我遇到的麻烦是创buildcss3媒体查询，以便在窗口宽度达到这些宽度之一时更改我的布局。 下面是我正在使用的媒体查询的一个例子，但它不适合我，所以我想知道如果有人可以帮我修复它。 <link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/devices/screen/layout-modify1.css"> <link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 900px)" href="css/devices/screen/layout-modify2.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 901px)" href="css/devices/screen/layout-modify3.css"> 我尝试了一套新的媒体查询，但他们仍然没有为我工作。 有人能帮我解释一下我的错误吗？ 你们中有几个已经尝试解释，但我没有得到它。 新媒体查询显示如下： <link rel="stylesheet" type="text/css" media="screen and (max-width: 640px)" href="css/devices/screen/layout-modify1.css"> <link rel="stylesheet" type="text/css" media="screen and (max-width: 800px)" […]
在javascript中获取设备宽度
有没有办法获得用户设备的宽度，而不是视口的宽度，使用JavaScript？ 正如我所能说的，CSS媒体查询提供了这个function @media screen and (max-width:640px) { /* … */ } 和 @media screen and (max-device-width:960px) { /* … */ } 如果我以横向为目标定位智能手机，这很有用。 例如，在iOS上，即使在iPhone 4上， max-width:640px的声明也将同时针对横向和纵向模式。就我所知，Android不是这种情况，所以在此实例中使用device-width成功地针对这两个方向，而不针对桌面设备。 但是 ，如果我调用基于设备宽度的JavaScript绑定，我似乎仅限于testing视口宽度，这意味着一个额外的testing，如下所示， if ($(window).width() <= 960 && $(window).height <= 640) { /* … */ } 这似乎并不优雅，给出了设备宽度可用于CSS的提示。
