Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Both jQuery UI and jQuery Mobile have theme customization actually.</p> <p>jQuery UI - <a href="http://jqueryui.com/themeroller/" rel="nofollow">http://jqueryui.com/themeroller/</a> jQuery Mobile - <a href="http://jquerymobile.com/themeroller/index.php" rel="nofollow">http://jquerymobile.com/themeroller/index.php</a></p> <p>As far as versitility goes, it's really up to you, the mobile browsers are capable of running both jQuery UI and Mobile, so whichever you feel compfortable with and like on the desktop as well.</p> <p>Now to address the layout sizing issue:</p> <p>The easiest way to scale the same layout for desktop and mobile is to use liquid layouts with widths in percentages. However, to the mobile size it starts to skew rather quickly.</p> <p>Rather than use just percentages, I would suggest using media queries. This will allow you to change the CSS as the screen size changes, and the syntax is very straight forward and easy to use.</p> <pre><code>@media screen and (min-width: 600px) and (max-width: 900px) { .class { background: #333; } } </code></pre> <p>As long as that is at the bottom of your CSS document, that will overwrite any preexisting styles. What that is saying, is apply this style when the screen size is between 600 and 900 pixels. Meaning to test it you can actually scale the size of your browser to see the difference.</p> <p>More on Media Queries : <a href="http://webdesignerwall.com/tutorials/css3-media-queries" rel="nofollow">http://webdesignerwall.com/tutorials/css3-media-queries</a></p> <p>TL;DR jQuery UI and Mobile are Themable so whichever you like Use Media Queries as well</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload