- Joined
- Jul 21, 2010
- Messages
- 6,673
What are the things we have to keep in mind ? I normally use .png format. Heard that using .svg is better if we are going to make images for a theme which is designed to be responsive. A few hints will be nice.
It depends how you want your page to respond. The "S" in "SVG" is for "scalable"—so you can display the image at varying sizes without quality loss. You can also simply upload a few copies of your logo in a raster format (like PNG) with different pixel dimensions, and call different ones at different screen sizes.Heard that using .svg is better if we are going to make images for a theme which is designed to be responsive.
@media (max-width: 480px) {
.logo {
background: url(...) no-repeat;
}
}
@media (min-width: 481px) and (max-width: 720px) {
.logo {
background: url(...) no-repeat;
}
}
If you look at the logo in the AdEx 3.0 style, here, it doesn't resize at all... the header adjusts around it, but the logo works all the way down to a 320px-wide screen.
I don't understand what you're asking. My initial response is that using CSS as opposed to HTML has nothing to do with the display type. But maybe I'm missing your point.How about being compatible to retina display ?