标签: media-queries
CSS媒体查询技巧
我正在使用媒体查询编写一个网站来处理移动版本.是否可以让主css文件输出
<div class="classname">
Item 1<br />
Item 2<br />
Item 3<br />
etc
</div>
然后在手机css文件输出中:
<div class="classname">
Item 1
Item 2
Item 3
etc
</div>
还可以使用媒体查询隐藏文本吗？
推荐指数
解决办法
查看次数
响应式设计css3在小屏幕上显示不大
新的css3媒体查询和响应式设计.
我想知道如何在小屏幕上显示某些内容(例如div),但不能在大屏幕上显示.我尝试过类似的东西:
@media (max-width: 480px) {
.show-on-small-only{ display:block; visibility:visible;}
}
...而更大的东西有:
@media (max-width: 768px) {
.show-on-small-only{ display:hidden; visibility:none;}
}
它似乎没有按预期工作.
可能值得指出我正在使用bootstrap 2.0
推荐指数
解决办法
查看次数
jquery用于if语句,就像CSS媒体查询一样
我有这个jquery代码很好用:
$(document).scroll(function(){
if ($(this).scrollTop()>175){
// animate fixed div to small size:
$('header').stop().animate({ height: 90 },100);
} else {
// animate fixed div to original size
$('header').stop().animate({ height: 175 },100);
}
});
我需要以上所有浏览器/设备随时出现并阅读,但我还需要调整较小标题的高度(当前为90px - 在行下方//将固定div设置为小尺寸:)仅适用于浏览器宽度介于641px和959px之间.对于那些浏览器宽度,我需要标题的高度为120px,否则使用上面的代码.
有点像媒体查询,我希望它在浏览器调整大小时自动更新.
我该怎么做？
推荐指数
解决办法
查看次数
如何在默认情况下打开Twitter Bootstrap Collapsable Navbar？
如果在浏览器窗口中打开Twitter Bootstrap的GitHub页面,该页面的宽度小于980px,则会折叠.
单击右上角的按钮,它会展开以显示选项"Home","Get Started","Scaffolding"等.
有没有办法配置Twitter Bootstrap(或编写一些自定义CSS或JavaScript),使其默认显示这些选项？
我担心的是,有些用户不会知道点击右上角的按钮来查看网站导航选项.
推荐指数
解决办法
查看次数
响应式设计:为什么css不响应移动屏幕尺寸？
我正在使用响应式CSS框架Skeleton,由于某种原因,当屏幕大小是移动宽度时,css没有响应移动媒体查询.
它响应了平板电脑媒体查询,但在屏幕进入移动尺寸后,它又恢复到标准的CSS宽度.
这是我正在使用的实时网站:
http://fine-grain-2.myshopify.com/
这是我正在使用的HTML:
<div class="container">
<div class="one column alpha">One</div>
<div class="eleven columns omega">Eleven</div>
<div class="two columns alpha">Two</div>
<div class="ten columns omega">Ten</div>
</div>
这是移动媒体查询CSS:
/* #Mobile (Portrait)
================================================== */
/* Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {
.container { width: 300px; }
.columns, .column { margin: 0; }
.container .one.column,
.container .one.columns,
.container .two.columns,
.container .three.columns,
.container .four.columns,
.container .five.columns,
.container .six.columns,
.container .seven.columns,
.container .eight.columns,
.container .nine.columns,
.container .ten.columns,
.container …html css media-queries responsive-design skeleton-css-boilerplate
推荐指数
解决办法
查看次数
为什么这个媒体查询不起作用？
码:
@media screen and (min-width: 371px) {
.img_displayer {
display:none;
}
}
如果我没错,上面的代码说如果浏览器的最小宽度变为371px,则不应显示.img_displayer元素.但是现在当我的网站以整页打开时,图像不会显示.我究竟做错了什么？
推荐指数
解决办法
查看次数
仅为桌面设置样式(响应式网站)
好的,我希望这一切都有道理,但我们走了......
我目前正在构建一个响应式网站,但桌面版已经完成.我在div包装器中有一个图像.其中有悬停状态并显示一些测试.这一切都是通过CSS完成的.
现在在平板电脑上,我希望能够为文本而不是悬停状态创建下拉列表.但问题是,当我将鼠标悬停在div上时,我需要点击内容显示的平板电脑版本(最大宽度:1024px).但我只想让它从jquery中显示onClick.
这是在网站上设置的CSS网站:
.textHoverWrapOne:hover div.block-50_textHoverOne, .textHoverWrapTwo:hover div.block-50_textHoverTwo, .textHoverWrapThree:hover div.block-50_textHoverThree,.textHoverWrapFour:hover div.block-50_textHoverFour, .textHoverWrapFive:hover div.block-50_textHoverFive, .textHoverWrapSix:hover div.block-50_textHoverSix{
visibility: visible;
opacity: 1;
-webkit-transition: all 0.4s ease-in-out;
-moz-transition: all 0.4s ease-in-out;
-o-transition: all 0.4s ease-in-out;
transition: all 0.4s ease-in-out;
}
我希望能够删除平板电脑和更小的样式.但我似乎无法清除它们.我能想到的唯一方法就是在移动设备/平板设备上删除带有jQuery的类,但它似乎太过于苛刻了.
有没有办法我可以将样式设置为仅使用媒体查询出现在1024px以上的任何内容？
推荐指数
解决办法
查看次数
媒体查询目标iphone/mobile/ipad
我正在使用媒体查询来定位iphone/ipad/mobile.
我写了以下媒体查询.
但我的问题是,如果我在移动'max-device-width:480px'的媒体查询中写css,它也将适用于iphone.
我做错了吗？
For mobile : like samsung grand(480 * 800):
@media only screen
and (max-device-width : 480px)
{
}
For iphone:
@media only screen
and (max-device-width : 320px)
{
}
For ipad:
@media screen and (min-width:760px)
{
}
还添加了元标记:
<meta name="viewport" content="user-scalable=no,initial-scale=1">
推荐指数
解决办法
查看次数
为什么我的平板电脑媒体查询没有激活？
问题
我有三个媒体查询,一个用于移动,平板电脑和桌面屏幕尺寸.一切正常,直到我必须做了一些阻止平板电脑媒体查询工作/激活的东西？
我知道它不起作用,因为导航菜单设置为与其他两个查询显示不同.
每个都应显示如下图.
电话
片剂
桌面
究竟发生了什么？
在调整浏览器窗口大小后,将跳过平板电脑媒体查询,直接从桌面切换到移动查询.
实例
我的HTML
<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]> <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]> <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet" type="text/css">
<link href="fluid.css" rel="stylesheet" type="text/css">
<!--
To learn more about the conditional comments around the html tags at the top of the file:
paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/
Do …推荐指数
解决办法
查看次数
根据CSS中的浏览器大小更改背景颜色
我不知道这段代码出了什么问题。背景颜色完全不变，只是在整个过程中保持白色。
<style type="text/css">
h1 {
position: absolute;
text-align: center;
width: 100%;
font-size: 6em;
font-family: Roboto;
transition: all 0.5s;
}
@media screen and (min-width: 0px) and (max-width: 400px) {
background-color: red;
}
@media screen and (min-width: 401px) and (max-width: 599px) {
background-color: green;
}
@media screen and (min-width: 600px) {
background-color: blue;
}
</style>
推荐指数
解决办法
查看次数