0

基本上我想为多种设备（台式机、iphone、ipad 和其他有浏览器的智能手机）创建网页。我刚刚开始学习 css3，学习 css3 媒体查询非常混乱。

我阅读了一些教程，下面的代码就是我想出的。有人可以让我知道我这样做是否正确，或者是否应该进行任何更正？

<!DOCTYPE html>
<html lang="en-US">
  <head>

    <!-- META -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="noodp" />
    <title>Home</title>

    <!-- CSS RESET -->
    <link rel="stylesheet" type="text/css" href="reset.css" media="all" />

    <!-- TARGET SMARTPHONES -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 320px) and (max-device-width: 480px)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 321px)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (max-width: 320px)" />

    <!-- IPADS -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape)" />
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait)" />

    <!-- DESKTOP & LAPTOPS -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 1224px)" />

    <!-- LARGE SCREEN -->
    <link rel="stylesheet" type="text/css" href="" media="only screen and (min-width: 1824px)" />

    <link rel="stylesheet" type="text/css" href="" media="only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5)" />

  </head>
<body>



</body>
</html>
4

2 回答 2

3

您应该添加以下行，让浏览器知道它应该如何在设备屏幕上显示其内容。

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

来自html5rocks的这篇文章一定会对您有所帮助。

于 2012-08-10T05:19:30.020 回答
0

拥有如此多的样式表链接并不是一个好习惯。对于一个小型项目网站，您最多需要2 个，但实际上您应该只有一个。设计一个 CSS 样式以适应页面的宽度。随着页面变小，隐藏一些块元素，一旦它变得足够小到可以考虑手机宽度，那么可能会有一个移动样式表。谷歌响应式设计，你会得到很好的例子。拿起你的鼠标，改变屏幕的宽度，看看页面是如何反应的，使用开发者工具看看哪些元素被隐藏了，然后尝试自己复制它。我不得不说，您选择了一个学习的好时机，随着所有工具的出现，Web 开发变得越来越容易。

于 2012-08-10T05:25:57.317 回答