:
|
In practice the two rarely go together. To have a skin that adapts to the small screen of a phone you can't have any images anywhere since those have a fixed size. And that includes (or mainly is) the very wide header image. Mobile browsing also requires larger buttons because the current links are a bitch to press sometimes (the image buttons especially). In short, the low image and large button requirements for a mobile skin directly contradict the many images and small compact buttons of the normal skin.
|
Two things:
1) Images can be scaled.
:
img {
width: 100%;
height: auto
}
That’s the CSS you need. Put the image in a container element now and it will scale to fit it no matter the width.
2) Modern buttons don’t need to be images any more, we can style them with pure CSS. Which scales infinitely. And even if we want to stick an image on a button, point #1 still holds true.
I still need to get a vBulletin install set up so I can dissect it, but I think you’re overcomplicating things – we can build the vast majority of basic skin functionality with just HTML and CSS.