我正在练习这个网站 http://www.lingulo.com/tutorial-content/html5/
在将此网站与我的无响应网站进行比较时,我害怕以下标题代码的哪一部分将上述网站变为响应式网站?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Some Page Title</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link href="lightbox/css/lightbox.css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans|Baumans' rel='stylesheet' type='text/css'>
<script src="js/vendor/modernizr.min.js"></script>
<script src="js/vendor/respond.min.js"></script>
<!-- include extern jQuery file but fall back to local file if extern one fails to load !-->
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">window.jQuery || document.write('<script type="text/javascript" src="js\/vendor\/1.7.2.jquery.min"><\/script>')</script>
<script src="lightbox/js/lightbox.js"></script>
<script src="js/vendor/prefixfree.min.js"></script>
<script src="js/vendor/jquery.slides.min.js"></script>
<script src="js/script.js"></script>
答案 0 :(得分:3)
是和否 ,这取决于。让我们说例如HTML5 的<picture>
标签是响应式标签,但你不能对其他标签说同样的内容。
基本上,响应性就是在不影响设计的情况下将内容放在输出设备的每个可能布局中。这是通过将宽度,高度设置为%,媒体查询和CSS以及JavaScript等来实现的。
为了便于开发我建议您从Bootstrap 开始,这是一个轻量级响应框架,用于构建响应式网站并且易于使用。
答案 1 :(得分:1)
这完全取决于样式表。
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
是适用的行。
答案 2 :(得分:1)
HTML5是一种结构化标记语言 - 它只是一组围绕内容的可设置样式的容器。在响应性方面,HTML5几乎没有HTML4的优势(尽管使用HTML5还有很多其他好的理由)。
网站的“响应”部分是通过如何组织和设置这些容器来实现的。
这通常在CSS中通过使用媒体选择器指定特定显示宽度的样式来完成(因此,与较宽的屏幕监视器相比,较小的手机甚至非最大化的窗口具有不同的样式)。然后使用Javascript为CSS无法单独实现的行为提供更多的增强功能。
因此,您想要查看位于css/style.css
和一个很好的介绍:https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en
答案 3 :(得分:1)
您可以通过组合HTML5和CSS3来使您的网站响应。独自一人,我不这么认为。你可以参考下面的链接: