基本上，我想为多种设备(台式机、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>
最佳答案
您应该添加以下行，让浏览器知道它应该如何适应设备屏幕上的内容。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
本文来自html5rocks一定会帮助你。
关于html - 如何创建一个完全设备兼容的网站，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11895620/