基本上我想为多个设备(桌面,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>
我会将你的条件样式表压缩成一个。 – Blender 2012-08-10 04:51:13
会凝聚样式表搞砸我瞄准的智能手机 – JaPerk14 2012-08-10 05:16:35
不,只需使用媒体查询CSS语法即可。 – Blender 2012-08-10 05:17:15