jQuery 检测浏览器大小并为每个分辨率应用 css
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15654409/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
detect browser size and apply css for every resolution
提问by BurebistaRuler
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+f5in browser (clear all) interprets correctly my resolution so what is wrong in my function?
我有这个功能，当浏览器调整大小或菜单以不同的分辨率呈现时，我用来将一些 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;
}
Thank you !
谢谢 ！
回答by Pavel ?těrba
Use CSS3 and its media queries. Example:
使用 CSS3 及其媒体查询。例子：
@media (max-width: 500px) {
/* some CSS for small resolution */
}
@media (min-width: 1000px) {
/* some CSS for large resolution */
}
回答by jhunlio
you main you want to create a responsive design this linkcan help you.
您主要想创建响应式设计此链接可以帮助您。
building responsive design you must consider
构建您必须考虑的响应式设计
- Flexible Grid
- Flexible Images
- Media Quires
- 灵活的网格
- 灵活的图像
- 媒体查询
/* below code play important part of your responsive design without that you cannot achieve what you want */
/* 下面的代码在你的响应式设计中扮演着重要的角色，否则你就无法实现你想要的 */
<meta name="viewport" content="width=device-width" />/* put this before the end tag of head */
<meta name="viewport" content="width=device-width" />/* 把它放在 head 的结束标记之前 */
@media (max-width: 320px) {
}
@media (min-width: 720px) {
}
回答by Barbara PM
Media-queries are the best solution as Pavel remarks, besides they're much faster than all the access to the DOM you're making using your code. The compatibility problem with IE8 can be solved using a JavaScript pluging called Respond.js. Haven't tried it but it seems a good solution to your problem.
正如 Pavel 所说，媒体查询是最好的解决方案，此外，它们比您使用代码对 DOM 进行的所有访问都快得多。可以使用名为Respond.js的 JavaScript 插件来解决与 IE8 的兼容性问题。还没有尝试过，但它似乎可以很好地解决您的问题。
回答by Hans
It's hard to tell from your code, but most likely you are only calling the function once on pageload. In order to make this do what you want, you will have to attach an event listener and call the code each time the window is resized.
很难从您的代码中看出，但很可能您只在页面加载时调用该函数一次。为了让它做你想做的事，你必须附加一个事件监听器并在每次调整窗口大小时调用代码。
As commented above, consider researching Responsive Web Design to utilize native browser functionality so you don't have to roll your own script to do this. A good place to start is an A List Apart article under the same name.
如上所述，考虑研究响应式网页设计以利用本机浏览器功能，这样您就不必滚动自己的脚本来执行此操作。一个很好的起点是同名的 A List Apart 文章。
