- This topic is empty.
-
AuthorPosts
-
January 29, 2013 at 9:37 am #42341un_deeMember
Hey,
today i ran in a question and now i want to read your comments about my “problem”.
I’m creating a new responsive website. The design contains several boxes with fixed widths and heights. To understand my problem i have two code snippets.
Snippet 1:
@media only screen and (min-width: 320px) {
.box {
float: left;
width: 100px;
}
}
@media only screen and (min-width: 480px) {
.box {
width: 200px;
}
}
@media only screen and (min-width: 960px) {
.box {
width: 300px;
}
}Snippet 2:
@media only screen and (min-width: 320px) {
.box {
float: left;
}
}
@media only screen and (min-width: 320px) and (max-width: 479px) {
.box {
width: 100px;
}
}
@media only screen and (min-width: 480px) and (max-width: 959px) {
.box {
width: 200px;
}
}
@media only screen and (min-width: 960px) {
.box {
width: 300px;
}
}So is it better to just override classes or keep them only relevant for their screensize. What advantages do I have, what disadvantages?
Just add some to the list.**Snippet 1 – Advantages**
– sometimes less code**Snippet 1 – Disadvantages**
– I can’t remove for example the width:200px to reset the box, I have to write something like auto or 100%**Snippet 2 – Advantages** (I don’t repeat snippet 1’s disadvantages)
– sometimes cleaner separation of the different sizes**Snippet 2 – Disadvantages** (I don’t repeat snippet 1’s advantages)
I’m really curious what your answers will be…
CheersJanuary 29, 2013 at 9:57 am #122724simoncmasonMemberI work my way up – so similar to your example 1.
In this way I only need to alter styles which need to alter as the screen size grows.
I see this as an extension of the cascade so styles flow up the screen sizes until over-written with something more specific – i.e. based on a relevant media query.
But – if I have a style which I only want for the smallest screen size for example then I will limit it with a max-width query but I never use min-width= & max-width= type queries – I’ve never found I needed them.
I don’t think any one approach is “better” though – it is up to you which you find easiest to work with.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.