Responsive CSS Design - Large or Small Screen to Launch

Question

I plan to create a web application using Phonegap. Since I need to deal with different screen sizes, I will have to work with responsive design and CSS3 multimedia queries.

I have a mobile phone with a resolution of 1080x720, and I want to start with this (large) resolution and say that css is base.css. And for small screens, I'll add something like small.css to overwrite base.css (places where necessary).

Suppose css is complex, won't it entail more workload for small screen phones (whose ability is usually weaker than large ones)? Is it better to start with small.css as base.css and overwrite it big.css on large phones? Or does it not matter in a web application script (since the css file size is not a big problem)?

Any design considerations and tips?

Answer 1

I usually start with a width of 1000 pixels and finish the design first. Then I use media queries for 800px, 600px and <400px.

When designing a page, it is decided which elements should be reduced and which elements should be removed using the float. Then apply the appropriate changes to the media queries. Instead of using two css, use one (this saves your number of requests). Make small adjustments to suit your small screen devices.

http://css-tricks.com/ have a great responsive design. Just notice how they change elements.

Or a simple answer, start with more width at the bottom!

Answer 2

I can only agree with @Lisbeth. Start with a larger design and save everything in one CSS file. If you jump between designing wider screens and smaller, you are easily embarrassed and the end result will suffer. Make a complete design for large screens, and then move down to the next size. This is the layout that I use for most of my projects. Just add it to the end of your CSS file. Good article describing the details

// Code for "regular" computer screens /*------------------------------------*\ $SMALL COMPUTER SCREENS \*------------------------------------*/ @media all and (max-width: 1034px) { } /*------------------------------------*\ $IPAD AND TABLET \*------------------------------------*/ @media only screen and (max-width: 767px) { } /*------------------------------------*\ $IPHONE 4S LANDSCAPE \*------------------------------------*/ @media only screen and (max-width : 480px) { } /*------------------------------------*\ $IHPONE 4S \*------------------------------------*/ @media only screen and (max-width : 320px) { }