如何创建一个完全设备兼容的网站

问题描述：

基本上我想为多个设备（桌面，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

答

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

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

这篇文章from html5rocks一定会帮助你。

这是一篇很棒的文章！ – 2012-08-10 08:15:43

答

拥有如此多的样式表链接并不是很好的做法。对于一个小型项目网站，您最多需要 2，但实际上您应该只有一个。设计你的一种CSS风格以适应页面的宽度。随着页面变小，隐藏一些块元素，一旦它变得足够小以被认为是电话宽度，那么可能有一个移动样式表。谷歌响应式设计，你会得到很好的例子。拿起你的鼠标，只是改变屏幕的宽度，看看页面是如何反应的，使用开发人员工具查看哪些元素隐藏或不隐藏，然后尝试自己复制它。你拿起了一个很好的时间学习，不得不说，网络开发日益简单，所有的工具都在那里。

我通常在最大添加5个样式表。一个用于重置，一个用于布局，一个用于设置文本和图像的样式，一个用于表单，以及关于它的那些。如果我将这些类型的样式表与设备专用的样式表合并在一起，那对于一个小型项目来说太过分了吗？ – JaPerk14 2012-08-10 05:33:03

为什么他们不能都在一个样式表中？结账html5样板也是为了方向，使用他们的样式表，它结合了很多跨浏览器支持的最佳实践。您不需要针对每种不同设备使用不同的样式表，只需要将不同的CSS规则应用于页面即可改变屏幕宽度 – darethas 2012-08-10 05:51:44

我通常会将样式表组织成不同的类别。嘿，谢谢这帮了很多 – JaPerk14 2012-08-10 05:56:56

如何创建一个完全设备兼容的网站

相关推荐