Ruby on Rails: CSS para diferentes dispositivos

I am new to rails, and I have finished making my first web application. I am now looking at styling my app. I realise that I need to think about how my app will look on different devices, but don't really know how, or the best way to go about this. Is there a way where I can have a standard look no matter what device the page is rendered on?

I started moving objects around to suit how it would look on a laptop, but looking at the page on a tablet, some things stay where they should, but others disappear off the edge of the page and basically mess up the style I had (which I think had something to do with using absolute positioning). I think I just want their device to look a page that is set in stone, where the user has to zoom in and out on their device, rather than optimise the page for their device.

Any help at all will be hugely appreciated. Thanks

preguntado el 28 de agosto de 12 a las 11:08

3 Respuestas

You may want to use CSS media queries to optimize / change CSS rules according to your screen width/height. These are just usual CSS files which are applied by the client's browser, so you don't have to mess around with them on your side.

He aquí un ejemplo:

@media all and (max-width: 430px) and (min-width: 360px) {
  /* put your mobile css in here */
}

Respondido 28 ago 12, 11:08

Thanks, this is exactly what I need - Jazz

That's a fairly good question. The solution to go about it is to use the twitter bootstrap framework. You will have to include a gem for it in your gems file and bundle it; 'bootstrap-sass', '2.0.0'. After that import it in your custom css and use according to your need. Bootstrap is a responsive framework by the good team at twitter. What bootstrap basically provide is a responsive framework for you so that your app can adjust it's dimesions automatically according to the clients screen, no matter whatever the screen size is your app will adjust according to it. It has a grid system that makes it to function that way.

You would like to visit few sites that would help you achieve what you are looking for, learn a little more about bootstrap here http://twitter.github.com/bootstrap/ Also the gem I recommended for your problem has Sass functionality with it too, so you might want to check it out also http://sass-lang.com/tutorial.html

Respondido 28 ago 12, 11:08

Thanks for the suggestion. I had a go at trying to change my app so that Bootstrap would work with it, but I think I'm to far into my app to change it completely. Will definitely keep this in mind next time. Thanks again - Jazz

You need to read up on media queries. Twitter bootstrap is a great framework, but if you already have CSS you like (or if you just want to learn something new) you can setup your own responsive design with media queries. A decent place to start is este artículo de Smashing Magazine about creating a mobile site.

If you want to start over with the framework of the month that everyone loves and has responsive design built in, then check out Bootstrap de Twitter which has really awesome documentation to help you start using it.

Respondido 28 ago 12, 15:08

Thanks for the article. This is exactly what I need. Cheers - Jazz

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.