问题
I have to develop a responsive website with 4 designs [desktop, mobile, tablet and retina display].
First three are fine and can be done but retina display in a new thing. So it will be very helpful if any one can share the correct way to develop HTML for it.
Any plugin of Jquery, Hack of HTML/CSS will be helpful ! Many thanks!
回答1:
You can use a few CSS framworks like
- Skeleton
- Foundation
and search for Responsive web design in Google
For retina Display and Mobile layout use Media queries
Here is a link from CSS-tricks which would be helpfull Css-tricks
回答2:
On the iPhone/iPad, iOS is pretty smart about making things look good without any help from you. Though I haven't tried it, I'm sure OSX also does the same for desktops/laptops with Retina.
However, there are a couple of things you should definitely consider/user:
Viewport meta information
Use vector graphics to avoid fuzzy-looking images (since Retina has higher PPI, it must scale raster graphics)
Keep pages light and fast (general good rule for mobile)
CSS Media queries (general good rule for responsive development)
become familiar with
-webkitprefixed proprietary CSS properties which give fine-grained control over many things.Test often! most of the time I am pleasantly surprised by how well things "just work" (and how great they look with high PPI), but it doesn't always work the way you expect.
回答3:
Whenever I create a site, I use retina.js. It automatically replaces lower resolution images on your page with the high resolution on your server if the user has a retina display.
来源：https://stackoverflow.com/questions/12000091/how-to-develop-a-website-for-retina-display