My CSS file contains properties that are common for both PC and cellphone browsing, but some vary between the two platforms. I utilize
@media screen and (max-width: X px)Two separate files/ sections
I could split the CSS into two separate files, or structure it like this:
@media screen and (max-width: X px) {
*CSS code for cellphones*
}
@media screen and (min-width: X+1 px) {
*CSS code for PCs*
}
This would involve duplicating a large portion of the code.
Common section + specific sections
Similar to the previous option, but with the common part outside:
body {
*common body code*
}
*common divs code*
@media screen and (max-width: X px) {
body {
*cellphone-specific body code*
}
*cellphone-specific divs code*
}
@media screen and (min-width: X+1 px) {
body {
*PC-specific body code*
}
*PC-specific divs code*
}
While this approach seems ideal for managing constants like widths and heights in one place, I faced difficulties making it work when I attempted implementation.
Everything in specific divs
Currently, I am using this method:
body {
*common body code*
@media screen and (max-width: X px) {
*cellphone-specific body code*
}
@media screen and (min-width: X+1 px) {
*PC-specific body code*
}
}
My question is: what is the best solution for this scenario? And if there are any challenges associated with it, how can they be resolved?