0

我正在尝试制作一个网页，该网页会根据您使用的设备改变其外观。

我认为媒体查询和视口是我需要使用的东西。

有人可以确认这一点并告诉我应该如何制作使用此功能的网页吗？

提前致谢

4

2 回答 2

0

有几种方法可以解决这个问题：

  1. 您可以使用用户代理测试（这是当您使用石灰现代化工具或 php 来测试用户代理时。然后您将使用 PHP if 语句或类似的东西来为不同的设备加载不同的内容

  2. 您可以为每台设备使用相同的内容，只需使用 CSS 媒体查询（这是我使用的）更改它的外观您可以在我构建的名为 LeadRocket app.myleadrocket.com 的应用程序中看到它的实际效果。缩小屏幕尺寸

干杯

PS 这是一个很好的媒体查询样板，它是我用来构建 www.myleadrocket.com 的

http://www.getskeleton.com/

于 2013-04-10T03:55:10.223 回答
0

哈哈，这需要一段时间才能回答。要点如下......

将此粘贴到该<head>部分：

<meta name="viewport" content="width=device-width">

该元标记将允许您使用媒体查询。然后在主 css 文件的末尾使用如下媒体查询根据屏幕宽度进行任何更改。

@media (max-width: 979px) {
  /* Everything in here will be styled for small desktops */
}

@media (max-width: 767px) {
  /* Everything in here will be styled for tablets */
}

@media (max-width: 480px) {
  /* Everything in here will be styled for mobile */
}

媒体查询中的样式将覆盖样式表中以前使用的任何样式规则。

于 2013-04-10T03:57:50.217 回答