对于响应式网站，我应该使用Pixels或百分比值

Question

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

我应该给属性赋值，例如像素数的高度，宽度还是百分比？

我已经创建了一些东西但是在Tabs上没有正确显示。

Answer 1

你会用CSS和媒体查询＆amp; 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 */
}

Answer 2

百分比，但我建议您结帐http://getbootstrap.com/

Answer 3

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

Answer 4

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

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

1. Skeleton Framework：www.getskeleton.com [我使用]
2. Bootstrap：getbootstrap.com
3. 960网格系统：960.gs

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

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

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

祝你好运！ ：）

Answer 5

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

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

Answer 6

您应该使用percentage或em等相关单位。 Google em可以查找更多内容。

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

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

.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布局骨架。谷歌它，你会发现负载。