设置时meta name='viewport' content='target-densitydpi=device-dpi',Android浏览器和Opera Mobile将CSS像素视为设备上的设备像素,使我的样式表不受干扰.
在iPhone上的Safari中是否有适用的功能？
在我已经移动友好,高DPI优化,媒体查询驱动的Web应用程序上,如果浏览器单独留下我的样式表,我真的很感激.
(我的全视声明如下所示:meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no; target-densitydpi=device-dpi')
这篇精彩的文章描述了如何创建响应式表格,这些表格非常适合移动浏览器.
现在我正在尝试将相同的技术应用于HTML电子邮件,但display:block似乎无法在HTML电子邮件中使用.
要重现此问题:
将以下代码保存为HTML页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
@media only screen and (max-width: 760px), screen and (max-device-width: 480px) {
/* Force table to not be like tables anymore */
table, td, tbody, tr{
display: block;
width:100%;
padding:0;
clear:both;
}
td {
/* Behave like a "row" */
position: relative !important;
}
}
</style>
</head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid red;">1/1</td>
<td style="border:1px solid red;">1/2</td>
<td style="border:1px …很多人的HTML标记看起来像这样:
<html>
<body>
<div id="wrapper">
<p>Stuff in here</p>
</div>
</body>
</html>
大多数情况下,在这里的示例或网络上,人们建议您应该将宽度设置应用于#wrapper,而不是<body>.
这有什么潜在的原因吗？
例如,在一篇关于优雅降级媒体查询的技术的文章中,并为您提供技术1的一些上下文:什么都不做:
房间里的大象是桌面的Internet Explorer.借助移动优先解决方案,大屏幕将在一列中显示内容,从而为用户带来痛苦的阅读体验,超过既定的最大舒适度:50到75个字符. 可能值得在主容器中设置max-width属性,然后在媒体查询中增加max-width.
他们的CSS:
#wrapper {
_width: 460px; /* Take that, IE6! */
max-width: 460px;
}
@media only screen and (width) {
#wrapper {
max-width: 1200px;
}
}
以下是IE的结合方式(媒体查询已被注释掉).
是否有任何差异,而不是应用它#wrapper,我们会应用它<body>- 考虑到标准网站？
任何潜在的错误？我在这里尝试过,似乎没问题.如果布局变得更先进,那该怎么办...
我目前正在使用CSS媒体查询来定位一些像这样的小型/中型屏幕设备:
@media screen and (min-device-width: 480px) {
...
}
@media screen and (min-device-width: 720px) {
...
}
这可以按预期工作,我可以将样式应用于某些特定选择器,但是..我想知道的是,是否有一种方法可以基于媒体查询将类或其他属性添加到选择器.
我的想法的例子:
@media screen and (min-device-width: 480px) {
body { addClass('body-iphone') }
}
有没有办法用CSS或JavaScript？
浏览器大小的媒体查询,其中宽度<高度？
我试过了
@media screen and (max-width: 700px) and (min-height: 700px) {
但这不起作用.请帮忙.
使用案例:
我正在尝试为智能手机方向和桌面设置不同的媒体查询,我想要定位肖像和风景.我知道所有其他堆栈链接,如:
媒体查询定位大多数智能手机 3媒体查询的iphone肖像,风景和ipad肖像
但是我仍然遇到问题,我的情况不起作用,这是我正在使用的代码:
Desktop css first
-- csss for desk --
Portrait:
@media only screen and (min-device-width: 320px) and (max-device-width: 479px) {
body {
padding: 0 !important;
}
.infoShowWrapper {
width: 268px;
}
.heroImage {
margin-top: 0;
height: 200px;
width: 100%;
background: #fff url(assets/images/hero_small.jpg) no-repeat center center;
}
.navbar-fixed-top {
margin: 0 !important;
}
.box-item {
width: 280px;
}
.seaBkg {
background-image: url(assets/images/mare_2x.jpg);
}
}
Landscape:
@media only screen and (min-device-width: 480px) and (max-device-width: 640px) {
body {
padding: …是否有解决方法在CSS媒体查询中使用物理屏幕宽度？今天,有些手机超过了桌面显示器的分辨率.但是,手机应该仍然显示移动布局和桌面标准布局.
所以我不能像下面的例子那样依赖基于像素的查询.相反,我需要一个物理测量,或者一个关于像素密度的测量.
@media screen and (min-width: 700px) {
}
由于我没有通过我的研究找到这样的测量,它们可能不存在.无论如何,这个问题通常是如何解决的？
我正在开发一个需要精确媒体查询处理的布局.我的一个问题是crossbrowser 滚动条宽度,因为它根据浏览器而不同,大多数(所有这些？)都包含在窗口宽度中.
正如我们在这两个示例中看到的那样,在有和没有垂直滚动条的情况下,媒体查询不会在相同的窗口大小下执行操作:
在第一个示例中,您可以在800/700/600px窗口宽度处看到背景颜色的确切变化.
在带滚动条的第二个示例中,颜色更改为:
779/679/579px783/783/583px这有所不同21px.
通过忽略媒体查询中的滚动条并关注可用宽度本身是否存在解决方法.
如果不是如何处理此问题,您是否修复了scollbar的最大宽度并将其包含在媒体查询中？
- 更新 -
我正在寻找CSS的最佳实践/解决方案,因为我想避免这个项目的JS.
任何人都可以解释为什么我的媒体查询在将它们从px转换为ems时会中断
在我的文档正文中,我已经包含以下规则font-size:62.5%,因此我假设我可以将我的媒体查询转换为FROM 650px到65em？将我的媒体查询更改为ems会破坏布局
作为替代方案,我可以使用像素回退将媒体查询转换为REMS吗？那说,我不知道该怎么做
@media screen and (min-width: 650px) {
body
{
font-size: 62%;
background-color: #364759;
background-repeat: repeat-x;
background: url("bg.gif");
}
#wrapper,
footer
{
width: 80%;
max-width: 1050px;
margin: 0 auto;
}
} // end media query
非常感谢,P
考虑以下代码:
HTML
<div class="col-xs-3 col-sm-3">
<button type="button" class="btn btn-default btn-md btn-block">
<i class="fa fa-plus"></i> Add New Item</button>
</div>
CSS
@media only screen and (max-width: 767px) {
button {
content: '<i class="fa fa-plus"></i>';
}
}
如果您水平调整屏幕大小,某些时候文本将退出按钮.
我想知道当水平屏幕调整大小时是否可以自动更改按钮文本.类似于"+添加新项"的东西只有小型设备中的加号"+".
我是一个有媒体查询的小菜鸟,所以我觉得我错过了什么或做错了.
有人能帮我吗？
我为它做了这个小提琴.
html css media-queries twitter-bootstrap twitter-bootstrap-3
media-queries ×10
css ×8
css3 ×5
html ×4
html5 ×2
html-email ×1
html-table ×1
ios ×1
iphone ×1
javascript ×1
mobile ×1
resolution ×1
safari ×1
scrollbar ×1
ssas ×1