这个问题出在我的投资组合网站http://www.sierraisadesigner.com上.
媒体查询在Firefox中运行得很好,但在任何其他浏览器或我尝试过的任何移动设备上都没有.我试过iPad第一代,iPod和Kindle Fire(也是第一代).
我的代码是针对各种各样的屏幕尺寸@media only屏幕和(min-width:700px)和(max-width:959px){.wrapper-900 {width:100%; 背景:#CCC;}
@media only screen and (min-width:700px) and (max-width:959px) {
.wrapper-900 { width:100%; background:#ccc;}
#content-bg { padding:20px 0px 0px 0px; }
.width-200 { width:25%; }
.width-550 {width:65%; }
#footer { padding:15px; }
.footer-module { width:25%; }
}
@media only screen and (min-width:550px) and(max-width:699px) {
.wrapper-900 { width:100%; }
#content-bg { padding:20px 0px 0px 0px; }
#content { padding:50px 10px 10px 10px; }
.width-200 { width:25%; }
.width-550 { width:65%; }
TEXTAREA { width:90%; …我有基本CCS的wordpress主题,现在我想让这个设计响应下面提到的大多数使用的设备布局.我想要在横向和纵向模式下定位所有苹果设备: -
blackberry(320x240),
iphone3 (320x480),
iphone4 (640x960),
iphone5 (640x1136),
ipad (1024x768),
large desktop screen above 1280.
如何使用CSS3媒体查询编写CSS样式表来定位响应设备？
我正在使用此媒体查询目标视口最大宽度800px设备mininmum与400px
@media screen and (max-width: 800px) and (min-device-width: 400px)
{
body {background:#fff;}
}
我需要更改横向的颜色,我使用此代码
@media screen and (orientation:landscape)
{
body {background:red;}
}
它在设备上运行良好,但背景红色适用于PC浏览器,如何仅在设备横向方向上应用背景红色？
谢谢.
我想改变我的视口:
<meta name="viewport" content="user-scalable=no">
至:
<meta name="viewport" content="width=device-width, initial-scale=1">
基于设备屏幕.第一个示例适用于iPad,但在iPhone上我有一个响应式样式表,我想要启动.
我已经尝试过这段代码,我已经从这个问题进行了修改.根据设备分辨率更改视口
// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
// Change viewport for smaller devices
$('meta[name=viewport]').attr('content','width=device-width, initial-scale=1');
}
我有两个媒体查询,现在正在做同样的事情.如何将这些组合成一个查找两个宽度的查询？
@media (max-width : 480px) {...}
@media (max-width : 320px) {...}
我好几次遇到这个,但我现在不知道究竟是什么？我认为它会覆盖一些东西,但我不确定.
.GridWrapper>* {
font-size: 14px
}
@media screen and (min-width:601px) {
.GridWrapper>* {
font-size: 17px
}
}
我的媒体查询未正确更新.这是测试html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
<title>Test </title>
</head>
<body>
<div class="row">
<div id="verde" class="col-5">
<h2>Lorem Site</h2>
<h3>Test Site</h3>
</div>
</div>
<div class="row">
<div class="col-12">
<p>Bacon ipsum dolor sit amet pastrami ribeye sausage, sirloin short ribs pork belly strip steak tenderloin boudin. Landjaeger beef ham hock, doner bacon pork belly filet mignon tenderloin short loin beef ribs tongue. Bresaola salami short ribs venison, pastrami jerky landjaeger. Hamburger meatball cow pork loin ham. Sirloin tail venison jerky kevin. …<button id='123' type="button" class="btn btn-xs btn-danger">
<i class="fa fa-trash"></i>
</button>
@media only screen and (min-width: 600px) { .... }
我希望在最小宽度:600px,更改Button id ='123'class ="btn btn-lg btn-danger"
请帮我 !
在我的响应式Opencart网站上,当我们的页面在宽度为768px和992px之间调整大小时,我们的徽标会向下推并且不对齐.
我可以通过使上边距-23px来解决这个问题.这当然会超出这个范围.
您可以在CSS中设置媒体屏幕范围,以便仅在768px和992px之间应用设置吗？
我们的默认CSS代码#logo {margin:-30px 0 -2px -30px;