我试图应用一个不同的CSS样式到我的网站，只要文档的宽度低于700px，并再次低于500px（智能手机）.我有代码如下，我做错了什么？
if($(document).width() < 749) {
if($(document).width() < 700) {
$('#cirkelcontainer').hide();
$('h3').css('word-wrap', 'break-word');
$('.datum').css('width', '100%');
$('.datum').css('color', 'black');
$('.datum').css('margin-top', '13px');
$('.datum').css('background-color', 'white');
$('.datum').css('word-wrap', 'break-word');
$('.datum').css('height', 'auto');
$('.datum').css('margin-left', '-2%');
$('#nieuwsnavlinks').css('width', '90%');
$('#nieuwsnavlinks p').css('text-align', 'center');
$('#nieuwsnavrechts').css('width', '228px');
$('#nieuwsnavrechts').css('margin-left', 'auto');
$('#nieuwsnavrechts').css('margin-right', 'auto');
$('#nieuwsnavrechts').css('float', 'none');
$('content').css('padding-bottom', '25px');
}
if($(document).width() < 500) {
$('button').css('width', '100%');
$('form button').css('width', '125px');
$('#datum:nth-child(n)').hide();
$('#nieuwsoverzicht:nth-child(n)').css({
'width': '100%',
'height': 'auto',
'float': 'left'
});
$('nav ul ul li').css('border-left', '1px dotted black');
$('#nieuwsoverzicht:nth-child(n) p').css('word-wrap', 'break-word');
$('h4').css('word-wrap', 'break-word');
$('content').css('width', '100%');
$('.nieuwstext:nth-child(1)').find('a').html('◀');
$('.nieuwstext:last').find('a').html('▶');
$('#nieuwsnavrechts').css('width', '162px');
}
}编辑：它在普通浏览器中工作完美。
2条答案
按热度按时间ukxgm1gy1#
There's a standard feature of CSS allowing just this : having sets of rules which apply for certain conditions, for example window size.
This feature is called media queries. Here's the MDN documentation .
You would have for example
e1xvtsh32#
Solution:
Use Media Queries instead.
What is it?
Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution (e.g. smartphone vs. high definition screen). It became a W3C recommended standard in June 2012 and is a cornerstone technology of Responsive Web Design.
How to use it?
You can find a guide here and some real world examples here .
Example:
The advantage of splitting CSS in two different files make easier to maintain and
mobile.csswon't be imported if your user is on a desktop.The advantage of specifying all CSS styles for all resolutions in one file (default.css) is that if you are on a desktop and resize your browser window your website will automatically adapt. To improve maintenance you may want to split to a file per device type but import all the files in all pages.
Note:
There are many ways to implement this, like mobile-first or desktop-first. As per your question in all cases you don't need to change your HTML, but only specify resolution criteria for each group of style (in a separated CSS file or not).
You can look at my examples above, but if you are interested by real example you can find a lot on the Web. I let you resize your browser window on the Microsoft home page and look at how elements change (menu, carousel, columns, ...).
Going further:
There are lots of frameworks on the Web that help you to do great things. I particularly like Bootstrap (Grid example) but there are other alternatives.