标签: media-queries
Chrome设备模式仿真媒体查询无效
由于某种原因,设备仿真模式不会读取我的媒体查询.它适用于其他网站,包括我自己使用bootstrap制作的网站,但它不能处理我从头开始使用的媒体查询(单击媒体查询按钮会将按钮变为蓝色但不显示媒体查询).测试文件如下.这是Chrome中的错误还是我需要在文件中更改内容？
<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
<title>MQ Example 1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: sans-serif; }
h1 { color: red; }
h2 { color:blue; }
p { color:green; }
@media (max-width: 768px) and (min-width: 481px) {
h1 { color: green; }
h2 { color:red; }
p { color:blue; }
}
@media (max-width:479px), print {
h1,h2,p { color:black; }
}
@media print {
body { font-family: serif; …推荐指数
解决办法
查看次数
CSS媒体查询 - 软键盘打破了CSS定位规则 - 替代解决方案？
我正在使用多个平板电脑设备 - 都是Android 和iOS.目前我对所有平板电脑都有以下分辨率变化.
- 1280 x 800
- 1280 x 768
1024 x 768(iPad显然)- iPad没有这个问题
应用基于设备方向的样式的最简单方法是使用以下语法使用媒体查询的方向.
@media all and (orientation:portrait)
{
/* My portrait based CSS here */
}
@media all and (orientation:landscape)
{
/* My landscape based CSS here */
}
这适用于所有平板电脑设备.但是,问题是,当设备处于纵向模式并且用户点击任何输入字段(例如搜索)时,弹出软键盘 - 这会减少网页的可见区域并迫使其在基于景观的CSS中呈现.在Android平板电脑设备上,它取决于键盘的高度.因此,最终网页看起来很糟糕.因此,我不能使用CSS3的方向媒体查询来根据方向应用样式(除非有更好的媒体查询到目标方向).这是一个小提琴http://jsfiddle.net/hossain/S5nYP/5/模仿这个 - 用于设备测试使用完整的测试页面 - http://jsfiddle.net/S5nYP/embedded/result/
以下是从演示页面获取的行为的屏幕截图.
那么,有没有替代方案来解决这个问题,如果基于CSS的原生解决方案不起作用,我对基于JavaScript的解决方案持开放态度.
我在http://davidbcalhoun.com/2010/dealing-with-device-orientation上找到了一个片段,建议在此基础上添加课程和目标.例如:
<html class="landscape">
<body>
<h1 class="landscape-only">Element Heading - Landscape</h1>
<h1 class="portrait-only">Element Heading - Portrait</h1>
<!-- .... more... ->
# CSS
.landscape .landscape-only …推荐指数
解决办法
查看次数
使用Sass扩展媒体查询中的选择器
我有一个item类和一个紧凑的"修饰符"类:
.item { ... }
.item.compact { /* styles to make .item smaller */ }
这可以.但是,我想添加一个@media查询,.item当屏幕足够小时强制类紧凑.
首先想到的是,这就是我试图做的事情:
.item { ... }
.item.compact { ... }
@media (max-width: 600px) {
.item { @extend .item.compact; }
}
但是这会产生以下错误:
你可能不会在@media中扩展外部选择器.您只能在同一指令中@extend选择器.
如何使用SASS完成此操作而无需使用复制/粘贴样式？
推荐指数
解决办法
查看次数
iPhone 6和6 Plus媒体查询
有没有人知道特定的屏幕尺寸来定位iPhone 6和6 Plus的媒体查询？
此外,图标大小和闪屏？
推荐指数
解决办法
查看次数
如何使用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答案,所以这不是重复,因为我要求一个vanilla JS答案.
编辑#2
还有办法检测Microsoft Edge浏览器吗？
html javascript internet-explorer media-queries microsoft-edge
推荐指数
解决办法
查看次数
为什么媒体查询的顺序在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 1280x800*/
@media (min-width: 1200px) {
.two{margin-top:8em;}
}
/*1024x600*/
@media (max-height: 600px) {
.two{margin-top:4em;}
}
/*1920x1024*/
@media (min-height: 1020px) {
.two{margin-top:9em;}
}
/*1366x768*/
@media (min-height: 750px) and (max-height: 770px) {
.two{margin-top:7em;} …推荐指数
解决办法
查看次数
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的设备宽度相同768px - 我在分离每个设备时遇到问题.
我试过跟随分离,但似乎没有工作:
@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) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad …推荐指数
解决办法
查看次数
iPhone X/8/8 Plus CSS媒体查询
与Apple的新设备相对应的CSS媒体查询是什么？我需要设置body's background-color来改变X的安全区域背景颜色.
推荐指数
解决办法
查看次数
切换到基于Em的媒体查询
推荐指数
解决办法
查看次数
在CSS中嵌套@media规则
各种浏览器的支持似乎有所不同.
检查链接
Firefox:黑色,带白色文字.
Opera,Chrome,IE9:蓝色与黑色文本.
哪个是正确的,我将如何使其保持一致？
代码
@media screen and (min-width: 480px) {
body{
background-color:#6aa6cc;
color:#000;
}
@media screen and (min-width: 768px) {
body{
background-color:#000;
color:#fff;
}
}
}
有趣的是,似乎在条件内嵌套媒体查询@import似乎有效.
例如:
的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Media test</title>
<link rel="stylesheet" type="text/css" href="importer.css" />
</head>
<body>
<h1>Why is this not consistent.</h1>
</body>
</html>
importer.css
@import url(media.css) screen and (min-width: 480px);
media.css
body {
background-color: #6aa6cc;
color: #000;
}
@media screen and (min-width:768px) {
body …推荐指数
解决办法
查看次数