Geek Answers Handbook

The best way to use media queries for mobile projects

I know what media queries are and why they are used, but I'm not sure how best to develop a mobile site with them.

Example: I have mysite.com, which has a stylesheet with all the necessary styles (let's say this is a pretty big file). None of my styles are currently designed for lower screen resolution or other devices.

Then I decided to make a mobile version of my site. To make it simpler, at the moment I am only targeting iPhone users, and if the code detects that someone is visiting my site on the iPhone, they get a mobile version.

My question (s): Where is the best way to enable these additional styles so that the user sees the mobile version? Should I include these styles in the original stylesheet, or would it be better if I split them into my own stylesheet?

Let's say that my site is built entirely using float, but my mobile version will just show each element stacked on top of each other. How to show that using media queries? It is as simple as declaring float: none; or something?

Basically, what I'm trying to ask in the paragraph above is how I can create a stylesheet so that, for example, the primary colors and possibly the position of the links or something else is saved in the mobile version, like in the desktop version but with such differences as stacking all on top of each other in the mobile version?

"", ?

-, . mobile.css main.css, HTML, , , ?

: , -? , /, ?

, , . , , .

+5
4

( !) :

  • CSS, - ( CSS )
  • ( ) CSS , - link
  • , CSS HTML
  • , m.example.com example.com/mobile

(float: none, ..), 1. CSS , 2 3 (3 , useragents, ). HTML CSS , 4.

Internet Explorer 6-8, - CSS, , 1.

http://mediaqueri.es/ 1 2.

, : https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4

+9

/; , - . , , , CSS / CSS3.

<meta name="viewport" content="width=device-width"/> , CSS :

/* Desktop Version */

@media screen {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}

/* SmartPhone Version */

@media only screen and (max-width: 480px), only screen and (max-device-width: 640px) {
    body {
        margin-left: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 0px;
        text-align: center;
        background-color:#900;
        background-image:url(../images/m_bg_white.png);
        background-repeat: repeat-y;
        background-position: center top;
    }
}
+1

3. . , / ? .

. - . .

+1

3.

. - . PHP, . , , CSS , , / ; , , , ..

, -// , JavaScript .

0

More articles:


All Articles