好吧,所以我设计了一个响应式布局,不使用媒体查询和显示非常小屏幕尺寸的图像display: none;.
到现在为止还挺好.但是这些图像仍然会在这些设备上下载,从而导致带宽增加.
使这些图像不能在指定设备上下载的正确方法是什么？
任何回应将不胜感激!
我想知道为什么我的一些媒体查询没有覆盖它们被调用的视口的本机样式.我正在尝试响应一个菜单,堆叠,并在WP主题中使导航区域的高度更长.但是我通过在Safari或FF检查元素中编辑Live CSS来添加我创建的规格以获得此效果的每一种方式 - 我在目标的特定视口下插入的样式都没有被读取.我知道我正在使用媒体查询,因为它读取新样式,只是不覆盖原生？我在这里错过了一些东西？这是我想要添加的不会阅读的内容.
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
#access li {
float: none; // To translate to not to float to the left stack
position: relative;
}
#access {
background: url("http://testsite.com/wp-content/uploads/2012/01/menu_bg.gif") repeat scroll 0 0 transparent;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
clear: both;
display: block;
float: left;
height: 240px; //Changed the height to allow stack
width: 100%;
}
编辑:这里是全组的响应风格我打电话,如果事情.
/* =Responsive Structure
----------------------------------------------- */
@media (max-width: 800px) { …我很迷惑.我试图通过播放媒体查询来使网站响应.
根据大多数来源,例如此,所述MEDIQ查询使用的智能手机是max-device-width: 480px和min-device-width: 320px.
但是当我使用这些查询时,我的android 2.x仍然显示该页面的"计算机版本".所以我开始更改查询的值,发现我的手机似乎有980px的设备宽度..
这是为什么？我真的很想掌握这一点,当我使用980时,我确实可以很高兴它的工作,但我想知道发生了什么,为什么？我的意思是我的手机不应该是980px宽或高,这是否是某种像素密度问题？
这在Wordpress Twenty Eleven主题的css文件中意味着什么.
@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
我正在使用媒体查询为客户制作网站的移动版本.当我调整浏览器大小时,媒体查询不会生效,但是当在每台设备上查看网站时它们会生效 - 我只是好奇为什么当我调整浏览器窗口本身时媒体查询不会生效即Firefox.
任何输入都非常感谢.
我正在使用的代码:
@media only screen
and (min-device-width : 320px)
and (max-device-width : 720px) {
#container {
width: 100% !important;
}
}
我需要打印我的简历,但旧技巧
<link href="css/bootstrap.min.css" rel="stylesheet" media="print">
因为Bootstrap 3是移动优先(从小设备开始,然后为更大的屏幕添加媒体查询),因此不再工作了所以当我打印我的浏览器时保持移动css.
正确:
http
:
//f.cl.ly/items/3s320O0w04021s3b3j2j/print1.png
错误:http:
//f.cl.ly/items/3t300Z3c2e1q3G1m0r27/print2.png
我怎样才能解决这个问题？当然,我无法重新发明bootstrap 3,因为语法被更改,所以我无法使用bootstrap 2.
我已经为简历做了一个很好的模板,我想保留它的pdf /打印格式.
谢谢
printing pdf media-queries twitter-bootstrap twitter-bootstrap-3
我正在使用Twitter Bootstrap和jQuery.
根据bootstrap文档,如果您希望可折叠元素作为默认值打开,则添加其他类"in".如果您希望折叠元素作为默认值折叠,则将高度设置为0px.
这一切都运作良好.
我想使用媒体查询在大屏幕上将元素设置为默认值,并在小屏幕上默认折叠(然后单击以在两个屏幕上切换)...
我的HTML:
<div class="accordion" id="accordion1">
<div class="accordion-group">
<div class="accordion-heading">
Heading text.
<a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
(Click to show/hide)
</a>
</div>
<div id="collapseOne" class="accordion-body collapse">
<div class="accordion-inner">
Lorem ipsum.
</div>
</div>
</div>
</div>
我的CSS:
@media (min-width: 768px) {
.collapse {
height: auto;
}
}
@media (max-width: 767px) {
.collapse {
height: 0px;
}
}
这可以正常工作,直到你开始点击它...
低于767px时,元素将默认折叠,并且元素上方默认打开.正确.
低于767px,您可以单击打开元素,它打开正常.再次单击并隐藏它.冲洗并重复.正确.
当您单击以折叠元素时,它超过767px,它会关闭但随后会重新打开.再次单击它,它会关闭并保持关闭状态.再次单击,它打开正常.再次点击它就可以了.
所以由于某种原因,超过767px(当元素默认打开时),它需要两次点击才能使其保持折叠而不重新打开,然后它可以正常工作.
思考？
在使用此媒体查询后,我正在使用ASP.NET MVC 4版本和Microsoft.AspNet.Web.Optimization'1.1.2':
@media (min-width: 1025px) and (max-width: 1599px) {
#circles_inner {
width: 1080px;
margin: auto;
}
}
我得到这个CSS:
@media(min-width:1025px)and (max-width:1599px){#circles_inner{width:1080px;margin:auto}}
之前省略了空间
和
标记,mac上的新chrome版本不理解它.
这实际上是Google Chrome的可行更新.它只是对媒体查询的语法更加严格.MVC项目的解决方案可以在这里找到:http://i-skool.co.uk/net/mvc/mvc-bundling-and-minifcation-issues-with-google-chrome/
css google-chrome media-queries asp.net-mvc-4 bundling-and-minification
我正在使用Zurb Foundation.我正在尝试打印一个页面,就像它在大屏幕中看起来一样,但是所有内容都被堆叠(并且浮动错误).
通过在foundation.min.css中用"print,screen"替换每个"屏幕"出现,我成功地在打印页面中创建了网格.
问题是现在采用的网格很小.
我在基金会的支持下阅读了这篇文章但老实说我并不确切知道我应该做什么.我需要用sass重新编译基础吗？
http://foundation.zurb.com/forum/posts/412-printing-paper-copies-of-site-built-on-foundation
我该怎么办？谢谢.
当页面宽度为768px时如何替换按钮的内容？
<a title"Reserve seu Ingresso" class="btn btn-blue" href="#reservar">
<i class="fa fa-ticket 1x"></i>
Reserve seu ingresso
</a>
我有这个按钮,当页面的宽度为768时,我想取下内容.我该怎么做？
我试图使用媒体查询:
@media (max-width: 768px) {
.btn {
content: "";
}
}