我正在开发一个响应式网站,其中每个页面都有一个大型英雄形象,在CMS中定义.我想避免在手机上下载该背景图片.
我能想到的唯一方法是在页面的头部有一些内联CSS,如下所示:
<style type="text/css">
@media only screen and (min-width: 680px) {
.hero-image { background-image: url(../images/image.jpg); }
}
</style>
首先,我可以在内联CSS中使用媒体查询吗？
其次,这会避免在手机上下载图像吗？
第三,有更好的方法吗？
谢谢
html5 css3 media-queries responsive-design twitter-bootstrap
我知道这听起来很荒谬,但是我可以在内联样式中使用css媒体查询吗？原因是我正在回应PHP的背景,如果设备是视网膜,需要使用视网膜大小的图像.
ie: <div style="background:url(normal.png); <- need to add style for retina device
我正在努力遵循以下理解:如何根据样式动态地向元素/ DOM添加媒体(查询)？
以下问题我遇到了:
1)我知道AngularJS不能像<style> {{myMediaQueryStyles}} </style>指令那样操纵标签
.
2)作为内联样式注入的媒体查询ng-style也不起作用
我有以下内容 view-model.json
{
"id":"936DA01F-9ABD-4D9D-80C7-02AF85C822A8",
"contexts":[
"@media (max-width: 1200px){ … }",
"@media (max-width: 760px){ … }",
"@media (max-width: 420px)){ … }"
]
}
在一个简单的指令中,我只是尝试将它们写入<style>标签
app.directive('addStyles', function()
{
return {
template: '<style>{{view-model.contexts}}</style>'
};
});
是否有任何解决方法可以动态地将媒体相关样式添加到angularJS中的元素或整个文档中？
更改指令template: '<div>{{view-model.contexts}}</div>'有效,但样式不会被应用.
提前致谢!
编写插件的扩展我可以使用PHP更改HTML元素的所有属性.
$attributes["style"] .= 'padding-left:10px;';
array_push($attributes["class"], "long-container");
array_push($attributes["class"], "super smooth");
$attributes["data-whatever"] = "great";
现在我想给用户一个动态输入div的宽高比的可能性(@Web_Designer在这里的答案中描述了如何做到这一点的解决方案:用CSS保持div的宽高比).
在我可以更改第三方插件输出的函数中,我编写了以下代码,用于根据输入计算宽度高度比.由于箱子的高度是:
if( !empty( $args['stretchy-desktop'] ) ) {
$sd = array_map('trim',explode(":",$args['stretchy-desktop']));
if(count($sd)==2) {
$sd[0] = floatval(str_replace(",",".",$sd[0]));
$sd[1] = floatval(str_replace(",",".",$sd[1]));
if($sd[0]>0 && $sd[1]>0) {
$padding = ($sd[1] / $sd[0])*100;
array_push($attributes['class'], 'stretchy-desktop');
$attributes['style'] .= 'padding-bottom:'.$padding.'%;';
}
}
}
好吧？然而,现在用户希望有可能为移动设备输入不同的重量高度比以及移动设备的不同动态最小高度,这就是我被困住了.
1)现在无法提供内联@media查询,否则我的解决方案就是这样(是否可以将CSS @media规则内联？):
$attributes['style'] .= '@media (min-width:540px) {padding-bottom:'.$padding.'%;}@media (max-width:539px) {padding-bottom:'.$padding_mobile.';}';
2)现在无法在CSS中使用HTML属性值(使用HTML5数据属性的CSS值),否则我的解决方案将是这样的:
$attributes['data-desktoppadding'] = $padding;
$attributes['data-mobilepadding'] = $padding_mobile;
在CSS中:
@media (min-width:540px) …我正在制作一个响应式网站并为此使用媒体查询，但是，我遇到了一个问题，即我给出了内联样式。现在我想针对不同尺寸的屏幕更改该样式。怎样才能做到呢？这是我的代码。
<table class="edu_table" style="width:500px;margin-right:400px;margin-bottom:30px;">
在样式中我给出了 width=500px; 我想要它 700px
@media only screen and (max-width: 1920px) {
}
1920px 大小的屏幕。请给出解决方案或提供其他方法来完成此操作。我在很多地方使用 edu_table 类...并且我想要 width=700px; 适用于屏幕尺寸 1920px 和特定位置。