将媒体查询与图像大小相结合

时间：2012-01-11 作者：OleVik

我有一组WordPress的图像大小，如下所示：

add_image_size(\'1039\', 1039, 697);
add_image_size(\'960\', 960, 644);
add_image_size(\'800\', 800, 537);
add_image_size(\'768\', 768, 515);
add_image_size(\'640\', 640, 429);
add_image_size(\'480\', 480, 322);
add_image_size(\'320\', 320, 215);
add_image_size(\'240\', 240, 161);
因此，基本上每个定义的图像大小都有自己的宽度名称（我强制将“1039”设置为允许的最大上载大小），这些宽度对应于八种不同的媒体大小，我使用以下设置：

div.container {width: 1039px;}
@media only screen and (min-width: 960px) and (max-width: 1038px) {div.container {width: 960px;}}
@media only screen and (min-width: 800px) and (max-width: 959px) {div.container {width: 800px;}}
@media only screen and (min-width: 768px) and (max-width: 799px) {div.container {width: 768px;}}
@media only screen and (min-width: 640px) and (max-width: 767px) {div.container {width: 640px;}}
@media only screen and (min-width: 480px) and (max-width: 639px) {div.container {width: 480px;}}
@media only screen and (min-width: 320px) and (max-width: 479px) {div.container {width: 320px;}}
@media only screen and (max-width: 319px) {div.container {width: 240px;}}
现在，我使用这个基本设置和任何选择的图像作为背景图像（大小为1039x697），它只会调整div.container 当其他媒体观看时。但是，我想应用我添加的图像大小，以便它应用正确的图像大小以适合所用媒体的大小（而不是加载巨大的图像并使用CSS调整其大小，它应该加载适合该分辨率的图像）。

目前我使用此解决方案：

var body = jQuery(\'body\').css("width");
var body = parseInt(body);
var image = jQuery(\'.container\').css("background-image");
if (body >= 1039) {
    var img_width = 1039;
    var img_height = 697;
} else if (body >= 960 && body < 1039) {
    var img_width = 960;
    var img_height = 644;
    var image = image.replace(\'.jpg")\', \'-\'+img_width+\'x\'+img_height+\'.jpg")\');
} else if (body >= 800 && body <= 960) {
    var img_width = 800;
    var img_height = 537;
    var image = image.replace(\'.jpg")\', \'-\'+img_width+\'x\'+img_height+\'.jpg")\');
} else if (body >= 768 && body < 800) {
    var img_width = 768;
    var img_height = 515;
    var image = image.replace(\'.jpg")\', \'-\'+img_width+\'x\'+img_height+\'.jpg")\');
} else if (body >= 640 && body < 768) {
    var img_width = 640;
    var img_height = 429;
    var image = image.replace(\'.jpg")\', \'-\'+img_width+\'x\'+img_height+\'.jpg")\');
} else if (body >= 480 && body < 640) {
    var img_width = 480;
    var img_height = 322;
    var image = image.replace(\'.jpg")\', \'-\'+img_width+\'x\'+img_height+\'.jpg")\');
} else if (body >= 320 && body < 480) {
    var img_width = 320;
    var img_height = 215;
    var image = image.replace(\'.jpg")\', \'-\'+img_width+\'x\'+img_height+\'.jpg")\');
} else if (body >= 240 && body < 320) {
    var img_width = 240;
    var img_height = 161;
    var image = image.replace(\'.jpg")\', \'-\'+img_width+\'x\'+img_height+\'.jpg")\');
} else if (body < 240) {
    var img_width = 240;
    var img_height = 161;
    var image = image.replace(\'.jpg")\', \'-\'+img_width+\'x\'+img_height+\'.jpg")\');
}
jQuery(\'.container\').css("background-image", image);
事实上，这确实为正确的媒体应用了正确的图像，但它完全依赖于JavaScript的启用。

是否有某种方法可以仅使用CSS获得相同的结果？或者也许有一个更优雅的解决方案？如果是这样的话，我很想听你怎么说！

2 个回复
SO网友:Noel Tock

首先，这是一个非常酷的解决方案。

我认为你在正确的轨道上，不知道你还能做多少。你当然可以用PHP & CSS, 因此不需要jQuery。这将要求您拥有一个大小的数组，并只需在其中循环。这将是/CSS目录中的一个PHP文件，可以像其他样式表一样排队。

<?php

// Tag as CSS file

header("content-type: text/css");

include \'../../../../wp-load.php\';

ob_flush();

// Pull in Sizes & Image Size Names

$array = array (
    \'size1\' => array ( \'b_min\' => \'960\', \'b_max\' => \'1039\', \'img_size\' => \'1039\' ),
    \'size2\' => array ( \'b_min\' => \'800\', \'b_max\' => \'960\', \'img_size\' => \'960\' )
);

// Loop

foreach ( $array as $size ) : 

    echo \'@media only screen and (min-width: \' . $size->b_min . \'px) and (max-width: \' . $size->b_max . \'px) {\';

         echo \'div.container {background-image: /* Your image url code */ }\';

    echo \'}\';

endforeach;

?>
这将解决您对javascript的依赖。

SO网友:OleVik

非常感谢Noel Tock的回答，我得到了一个非常有效的解决方案；已创建style.css.php 在主题文件夹中，包含：

<?php
header(\'Content-type: text/css\');
global $media_sizes;
$background = get_option(\'background\');
$background_height = get_option(\'background_height\');
$front_background = get_option(\'front_background\');
$back_background = get_option(\'back_background\');
?>
<?php
foreach ($media_sizes as $size) {
    echo \'@media only screen\';
    if ($size[\'min\']) {
        echo  \' and (min-width: \' . $size[\'min\'] . \'px)\';
    }
    if ($size[\'max\']) {
        echo \' and (max-width: \' . $size[\'max\'] . \'px)\';
    }
    echo \' {\' . "\\n";
    $back = $background[\'image\'];
    $front_back = $front_background[\'image\'];
        $front_back = str_replace(\'.jpg\', \'-\'.$size[\'min\'].\'x\'.$size[\'height\'].\'.jpg\', $front_back);
    $back_back = $back_background[\'image\'];
        $back_back = str_replace(\'.jpg\', \'-\'.$size[\'min\'].\'x\'.$size[\'height\'].\'.jpg\', $back_back);
    echo \'.content {width: \'.$size[\'min\'].\'px; height: \'.$size[\'height\'].\'px;}\' . "\\n";
    echo \'.wrapper {width: \'.$size[\'min\'].\'px; height: \'.$size[\'height\'].\'px;}\' . "\\n";
    if ($size[\'min\'] > 480) {
        echo \'.container#front {min-height: \'.($size[\'height\']+75).\'px; background-image: url("\'.$back.\'");}\' . "\\n";
        echo \'.container#back {min-height: \'.($size[\'height\']+125).\'px; background-image: url("\'.$back.\'");}\' . "\\n";
    } else {
        echo \'.container#front {background-image: url("");}\' . "\\n";
        echo \'.container#back {background-image: url("");}\' . "\\n";
    }
    echo \'.container#front .wrapper .content {background-image: url("\'.$front_back.\'");}\' . "\\n";
    echo \'.container#back .content {background-image: url("\'.$back_back.\'");}\' . "\\n";
    echo \'}\' . "\\n";
}
?>
其输出如下：

@media only screen and (min-width: 1039px) {
    div.container {background: url("example-1039x697.jpg");}
}
@media only screen and (min-width: 960px)and (max-width: 1038px) {
    div.container {background: url("example-960x644.jpg");}
}
@media only screen and (min-width: 800px)and (max-width: 959px) {
    div.container {background: url("example-800x537.jpg");}
}
@media only screen and (min-width: 768px)and (max-width: 767px) {
    div.container {background: url("example-768x515.jpg");}
}
@media only screen and (min-width: 640px)and (max-width: 639px) {
    div.container {background: url("example-640x429.jpg");}
}
@media only screen and (min-width: 480px)and (max-width: 479px) {
    div.container {background: url("");}
}
@media only screen and (min-width: 320px)and (max-width: 319px) {
    div.container {background: url("");}
}
@media only screen and (min-width: 240px)and (max-width: 239px) {
    div.container {background: url("");}
}
为了让它进入WordPress，我在functions.php:

function example_vars($public_query_vars) {
    $public_query_vars[] = \'example_vars\';
    return $public_query_vars;
}
add_filter(\'query_vars\', \'example_vars\');
function example_dynamic_css(){
    $css = get_query_var(\'example_vars\');
    if ($css == \'true\'){
        include_once (TEMPLATEPATH . \'/style.css.php\');
        exit;
    }
}
add_action(\'template_redirect\', \'example_dynamic_css\');
并且在header.php:

<link rel="stylesheet" href="<?php bloginfo(\'url\'); ?>/?example_vars=true" type="text/css" media="screen" />
所有这些都会导致使用数据库中的选项动态生成媒体查询，并且完全没有JavaScript。

结束
标签： jquery   uploads   images   小码农  

相关推荐

使jQuery库在插件文件之前加载

我正在使用一些jQuery插件，比如validate。但是它们都是在由WordPress和my theme自动加载的Jquery库之前加载的。我需要在之后加载插件，所以有没有办法让Jquery在函数中首先加载。php-以便我可以使用它的前端和管理。我目前正在函数中加载以下内容。phpwp_enqueue_script(\'validation\', get_bloginfo(\'template_url\') .\"/js/jquery.validate.min.js\"); w