0

我的目标是设计响应式网页。我是 jquery 的新手，你能建议我从哪里开始吗？

我应该为属性赋值，即像素的高度、宽度还是百分比？

在此处输入图像描述

我创建了一些东西，但在选项卡上没有正确显示。

4

6 回答 6

2

你可以用 CSS 和媒体查询 & max-width min-width 来做到这一点。

不过百分比会更好！

看看这篇文章：http ://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

例子：

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
于 2013-08-23T04:30:24.360 回答
1

百分比，但我建议您查看http://getbootstrap.com/

于 2013-08-23T04:29:40.630 回答
1

百分比有助于流畅的设计，但要真正响应，您应该查看 CSS 媒体查询。响应式设计会根据屏幕大小等因素更改布局（有时还会更改内容）。

于 2013-08-23T04:36:26.483 回答
1

对于响应式网站，您应该更喜欢使用百分比值。

但是，已经有几个框架可供开发人员使用，这将使构建响应式网站变得更加容易。下面给出一些：

  1. 骨架框架：www.getskeleton.com [这个我用]
  2. 引导程序：getbootstrap.com
  3. 960 网格系统：960.gs

您可以使用它们中的任何一个来构建出色的响应式网站。只需下载脚本并将它们解压缩到您网站的文件夹中。将 css 和 js 文件复制到各自的文件夹，并使用链接标签通过 index.html 调用它们。

最好在 HTML 文件的末尾调用 javascript，就在正文结束之前。

开始为您的网站使用框架，我相信一切都会得到解决

祝你好运 ！！:)

于 2013-08-23T04:38:40.793 回答
0

基于像素的所谓固定布局，基于百分比的所谓流体布局，基于em的所谓弹性布局。您需要考虑哪个选项最适合您的网站。但是我的选择是弹性布局，但这很困难，所以为您的网站选择流畅的布局会很棒。

对于响应式设计，我的选择是引导程序。您可以在线搜索更多可用的框架。

于 2013-08-23T04:38:17.230 回答
0

您应该使用任何相对单位，例如percentageor em。谷歌em查找更多。

至于响应式，您应该使用媒体查询。

例如：如果您希望所有窗格垂直堆叠以用于较小的屏幕（假设宽度 < 800 像素）。然后你会做这样的事情：

.pane-selector{
  //Define style for widths > 800 px
}

@media(max-width: 800px){

  .pane-selector{
    width:100%;
    //And whatever you wanna do
  }
}

但！您可以使用许多框架来构建网站，例如 Twitter Bootstrap、Zurb 等。这些都是成熟的 CSS 框架，可为您提供基本的 CSS 布局以及 UI 元素和组件。还有最小的 CSS 布局骨架。谷歌它，你会发现负载。

于 2013-08-23T04:42:05.437 回答