程序设计 media-queries

8

最好使用更少的CSS样式将CSS样式包装为不同的分辨率。我想做类似的事情： footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } 最后应该是这样的结果： footer { width: 100%; } @media screen and (min-width: 768px) { footer { width: 768px; } } @media screen and (min-width: 992px) { footer { width: …

81 css responsive-design less media-queries

13

如何使用JavaScript检测Internet Explorer（IE）和Microsoft Edge？

我到处走走了很多，我知道有很多方法可以检测Internet Explorer。我的问题是：我的HTML文档上有一个区域，单击该区域时会调用与任何类型的Internet Explorer都不兼容的JavaScript函数。我想检测是否正在使用IE，如果是，请将变量设置为true。问题是，我正在用Notepad ++编写代码，而当我在浏览器中运行HTML代码时，没有一种方法可以检测IE。我认为问题是我用的是Notepad ++。我需要能够检测IE，以便基于变量可以禁用站点的该区域。我已经试过了： var isIE10 = false; if (navigator.userAgent.indexOf("MSIE 10") > -1) { // this is internet explorer 10 isIE10 = true; window.alert(isIE10); } var isIE = (navigator.userAgent.indexOf("MSIE") != -1); if(isIE){ if(!isIE10){ window.location = 'pages/core/ie.htm'; } } 但这不起作用。如何从Notepad ++中检测IE？这就是我正在测试HTML的内容，但是我需要一种可以使用该方法的方法。编辑我注意到有人将其标记为重复，这是可以理解的。我想我不清楚。我无法使用JQuery答案，因此这不是重复的，因为我要使用香草JS答案。编辑＃2 还有检测Microsoft Edge浏览器的方法吗？

81 javascript html internet-explorer media-queries microsoft-edge

2

为什么媒体查询的顺序在CSS中很重要？

最近，我一直在设计响应速度更快的网站，并且经常使用CSS媒体查询。我注意到的一种模式实际上是定义媒体查询的顺序。我没有在每个浏览器中都进行过测试，只是在Chrome上进行了测试。有这种行为的解释吗？有时，当您的网站无法正常工作时，它会令人沮丧，并且您不确定是查询还是编写查询的顺序。这是一个例子：的HTML <body> <div class="one"><h1>Welcome to my website</h1></div> <div class="two"><a href="#">Contact us</a></div> </body> CSS： body{ font-size:1em; /* 16px */ } .two{margin-top:2em;} /* Media Queries */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than …

80 css media-queries responsive-design

5

iPhone X / 8/8 Plus CSS媒体查询

与苹果的新设备相对应的CSS媒体查询是什么？我需要设置body的background-color改变X的安全区域的背景颜色。

76 css media-queries iphone-x iphone-8 iphone-8-plus

7

CSS媒体查询仅定位到iPad和iPad？

嗨，我正在使用多个平板电脑设备，iPad，Galaxy Tab，Acer Iconia，LG 3D Pad等。 iPad-1024 x 768 LG Pad-1280 x 768 Galaxy Tab-1280 x 800 我只想使用CSS3媒体查询来定位iPad。由于LG和iPad的设备宽度是768像素-我在分离每个设备时遇到了麻烦。我曾尝试将以下内容分开，但似乎无法正常工作： @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ @media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) …

73 ipad css webkit media-queries

7

iPhone 6和6 Plus媒体查询

有谁知道特定的屏幕尺寸来针对iPhone 6和6 Plus的媒体查询？另外，图标大小和初始屏幕？

71 ios css media-queries iphone-6 iphone-6-plus

Questions tagged «media-queries»