Menu
I would like to use a conditional statement to attach a different stylesheet for:
if the clients resolution is <= 1024*768
I'm pretty sure this is possible, but have never seen the code for it before?
ps. I am not looking for a javascript solution
416
Conditional Statement Definition A conditional statement is represented in the form of “if…then”. Let p and q are the two statements, then statements p and q can be written as per different conditions, such as;
To test a second condition we can add ElseIf statements to a simple If..Then..Else. An If statement is allowed to be followed by multiple ElseIf statements each consisting of a conditional statement. Once the code reaches the conditional expression, it evaluates either to True or False.
If the condition evaluates to true, execute a certain set of actions and if the condition evaluates to false then perform another set of actions. Set of statements are executed only if the condition is true. If.. Then…Else block will be executed. based on which the statements will be executed. Placing an If statement inside another if statement.
Points to remember: 1 A conditional statement is also called implications. 2 Sign of logical connector conditional statement is →. Example P → Q pronouns as P implies Q. 3 The state P → Q is false if the P is true and Q is false otherwise P → Q is true.
Typically people don't "attach another stylesheet" for screen resolution because you could resize the browser after page load, changing the resolution, and you don't want file loading every time you do.
This will do the trick, in one CSS file:
Ex:
/* css as usual */
.this-class { font-size: 12px; }
/* condition for screen size minimum of 500px */
@media (min-width:500px) {
/* your conditional / responsive CSS inside this condition */
.this-class { font-size: 20px; }
}
This should change the font size to 20px when the @media query condition is true, in this case when the screen is over 500px.
As you size your browser up and down you will see the conditional CSS rules take effect automatically, no JS needed.
107
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
