Question

我有以下标记（简化为演示）

var keystone = require('keystone');
var async = require('async');
exports = module.exports = function (req, res) {

    var view = new keystone.View(req, res);
    var locals = res.locals;

    // Init locals
    locals.section = 'category';
    locals.filters = {
        category: req.params.category
    };
    locals.data = {
        sections: [],
        category: {}
    };

    // Load current category
    view.on('init', function (next) {

        var q = keystone.list('Category').model.findOne({
            key: locals.filters.category
        });

        q.exec(function (err, result) {
            locals.data.category = result;
            locals.section = locals.data.category.name.toLowerCase();
            getChildrenRecords(locals.data.category, next);
        });
    });


    function getChildrenRecords(category, next){

        var q = keystone.list('Section').model.find().where('category').in([category]).sort('sortOrder').exec(function(err, results) {

            if (err || !results.length) {
                return next(err);
            }

            callItems = [];

            for(var i = 0; i < results.length; i++) {
                var data = results[i];
                callItems.push(makeCallbackFunction(data));
            }

            function makeCallbackFunction(section) {
                return function (callback) {

                    keystone.list('Article').model.find().where('section').in([section.id]).sort('sortOrder').exec(function(err, articles){

                        if (err) return callback(err);

                        if (articles.length) { section.articles = articles; }
                            locals.data.sections.push(section);
                            callback();
                    });
                };
            }

            async.parallel(callItems, function(err, results){
                next(err);
            });
        });
    }


    // Render the view
    view.render('category');
};

播放列表内容是1000px的宽度（播放列表项目编号x播放列表项目宽度），我在javascript中设置了这个。

如果有10个播放列表项，那么宽度将为2000px。

我想实现以下目标：

包装器最大宽度为600px，可见3个播放列表项（此工作）当包装宽度介于600和400px之间时，我希望播放列表项目的播放列表内部宽度为33.3％（这是第二个上层父项！），因此可以看到3个播放列表项目。当包装宽度低于400px宽度时，我希望播放列表项目是播放列表内部的50％宽度（这是第二个上层父项！），因此可以看到2个播放列表项目。

我知道我可以用javascript做到这一点。我想知道我是否可以单独用css做这件事？

使用当前的css它不起作用，因为设置33.3％宽度需要父宽度，这是播放列表内容，但我希望它是播放列表内部的另一个上级父级的33.3％宽度。

希望有人能理解。

Answer 1

您应该从移动设备进行编码。并将包装器设置为相对的。

因此，从0px到激烈，您希望播放列表项目为100％;

.playlist-item{width:100%;}

从400以上，你想要50％;

@media screen and (min-width: 400px) {
   .playlist-item{width:50%;}
}

从600及以上，你想要33.3％;

@media screen and (min-width: 600px) {
   .playlist-item{width:33.3%;}
}

我在这里做了一个ul列表： https://jsfiddle.net/n07znakb/4/

Css媒体查询百分比宽度

1 个答案: