0

I am new to media queries and I have the following problem. I need to fit this easy layout (www.spiaggiati.it/antani/) for smartphones and tablets in particular (desktop are not so important for this application).

I've tried with this in the order you see (you can check screen.css sheet on my website):

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) (for smarthpones)

@media only screen and (min-width : 321px) (for smartphone landscape)

@media only screen and (max-width : 320px) (for smartphone portrait)

@media only screen and (min-width: 768px) (for tablet and desktop)

The problem is if I edit the last part (tablet and desktop) also the layout on my smartphone changes. Probably I am not catching how media queries work...

I do not need very complicated functionalities, as you can see the layout is very simple and I need to adjust only some height, width and font-size.

Can you help me?

Thank you in advance for your cooperation.

4

1 回答 1

1

请添加以下元标记：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

有关媒体查询的详细信息，您可以从http://stephen.io/mediaqueries/获取所有 iOS 设备的更多信息。如果您有任何其他疑问，请告诉我。即使您可以从这里获得更好的想法http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

于 2013-08-10T10:03:09.323 回答