检测浏览器大小并对每个分辨率应用css [英] detect browser size and apply css for every resolution
本文介绍了检测浏览器大小并对每个分辨率应用css的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有这个函数,我使用来应用一些CSS的菜单,当浏览器调整大小或当菜单渲染在不同的分辨率。
我的问题是这,为什么浏览器不能正确解释我的函数?因为当我调整浏览器在完全模式从半模式浏览器解释只有'800-1024'
分辨率,但如果我做 ctrl + f5
在浏览器(清除所有)解释正确我的决议,所以在我的功能是什么错误?
I have this function that I use to apply some css to a menu when browser is resized or when the menu is rendering on different resolutions.
My problem is this, why the browser is not interpreting correctly my function? because when I resize my browser in full mode from half mode the browser interprets only '800-1024'
resolution but if I do ctrl+f5
in browser (clear all) interprets correctly my resolution so what is wrong in my function?
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;
}
谢谢!
推荐答案
使用CSS3及其媒体查询。示例:
Use CSS3 and its media queries. Example:
@media (max-width: 500px) {
/* some CSS for small resolution */
}
@media (min-width: 1000px) {
/* some CSS for large resolution */
}
这篇关于检测浏览器大小并对每个分辨率应用css的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文