0

我有这个功能，当浏览器调整大小或菜单以不同分辨率呈现时，我可以将一些 CSS 应用于菜单。我的问题是，为什么浏览器没有正确解释我的功能？因为当我从半模式以全模式调整浏览器大小时，浏览器仅解释'800-1024'分辨率，但如果我ctrl+f5在浏览器中（全部清除）正确解释我的分辨率，那么我的功能有什么问题？

function renderMenuCorection(){
                if ($('#containerHeader').exists()) {
                    var resizeObject = {

                        '0-640': '9px,2px,-3px,12px',
                        '640-800': '10px,2px,-5px,12px',
                        '800-1024': '10px,8px,-8px,15px',
                        '1024-1300': '12px,12px,-13px,11px',
                        '1300-2000': ',20px,-21px'
                    }

                    var win = $(window);
                    var win_width = win.width();

                    if (win_width > 0 && win_width <= 640) {
                        var value = getValueByKey(resizeObject, '0-640');
                        modifayMenu(value);
                    }
                    else 
                        if (win_width > 640 && win_width <= 800) {
                            var value = getValueByKey(resizeObject, '640-800');
                            modifayMenu(value);
                        }
                        else 
                            if (win_width > 800 && win_width <= 1024) {
                                var value = getValueByKey(resizeObject, '800-1024');
                                modifayMenu(value);
                                alert("I'm on: 800-1024 ," + win_width);
                            }
                            else 
                                if (win_width > 1024 && win_width <= 1300) {
                                    var value = getValueByKey(resizeObject, '1024-1300');
                                    modifayMenu(value);
                                    alert("I'm on: 1024-1300 ," + win_width);
                                }

                                else 
                                    if (win_width > 1300 ) {
                                       var value = getValueByKey(resizeObject, '1300-2000');
                                        modifayMenu(value);
                                    }
                }
            }
          function modifayMenu(value){
            var vals = value.split(',')
                $('#containerHeader').find('.roundMenuLi').each(function(index, item){
                    $(item).find('a').css('font-size', vals[0]);
                    $(item).css('padding-right', vals[1]);
                    $(item).css('padding-left', vals[1]);
                    $(item).find('#secondUl').css('margin-left', vals[2]);
                    $(item).css('padding-bottom', vals[3]);
              });

            }
          function getValueByKey(obj, myKey){

                $.each(obj, function(key, value){

                    if (key == myKey) {
                        returnValue = value;
                    }
                });
                return returnValue;
            }

谢谢 ！

4

4 回答 4

12

使用 CSS3 及其媒体查询。例子：

@media (max-width: 500px) {
    /* some CSS for small resolution */
}

@media (min-width: 1000px) {
    /* some CSS for large resolution */
}
于 2013-03-27T08:30:12.947 回答
2

你主要想创建一个响应式设计这个链接可以帮助你。

构建您必须考虑的响应式设计

  • 灵活的网格
  • 灵活的图像
  • 媒体查询

/* 下面的代码在你的响应式设计中扮演着重要的角色，否则你无法实现你想要的 */

<meta name="viewport" content="width=device-width" />/* 把它放在 head 的结束标签之前 */

@media (max-width: 320px) {

}

@media (min-width: 720px) {

}
于 2013-03-27T09:03:09.423 回答
1

正如 Pavel 所说，媒体查询是最好的解决方案，而且它们比您使用代码对 DOM 进行的所有访问都要快得多。可以使用名为Respond.js的 JavaScript 插件解决与 IE8 的兼容性问题。没有尝试过，但它似乎可以很好地解决您的问题。

于 2013-03-27T08:38:06.397 回答
1

从您的代码中很难分辨，但很可能您只在页面加载时调用该函数一次。为了让它做你想做的事，你必须附加一个事件监听器并在每次调整窗口大小时调用代码。

如上所述，考虑研究响应式网页设计以利用本机浏览器功能，这样您就不必滚动自己的脚本来执行此操作。一个好的起点是同名的 A List Apart 文章。

于 2013-03-27T08:29:04.673 回答