Question

我的css有问题。我希望所有智能手机都有一个媒体查询，所有平板电脑都需要一个，所有比这更大的内容应该像桌面版一样。

我有几个版本的媒体查询，但它们并不适用于所有智能手机，仅适用于多个智能手机。

如果有人可以帮助我:(请写一个解决方案！

Answer 1

试试那些：

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

您可能还想在此处检查不同设备的查询：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

以下是类似的问题，您可以在其中找到更多答案：Media Queries: How to target desktop, tablet and mobile?

Answer 2

尝试使用

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

和

$posts

我需要所有智能手机和所有平板电脑的媒体查询

2 个答案: