问建设响应性网站

EN

有许多方法，以使一个网站响应。它可以归结为很多因素。

您需要使用RWD，它是Responsive 的缩写。这意味着，您可以交付您的网页在一个可变大小的屏幕，而不必重写您的html一遍又一遍。如果你不得不使用移动设备和/或平板设备，这是必须做的事情。

使用动态单元

使网页响应最重要的功能之一是您使用的单元，所以我首先要提到这一点。目前，您已经通过使用(像素) px单元对这些值进行了“硬编码”，这将被看作是一个“静态单位”。

下面是您在生成标记时可能需要考虑的几个单元：

绝对长度单位是相对固定的，并且固定在一些物理测量上。当知道输出环境时，它们主要是有用的。绝对单位由物理单位(in，cm，mm，pt，pc)和px单位~ w3.org组成。

​

​

上表显示了所谓的“绝对”单元，这是因为当您调整浏览器或移动设备上的视图时，它们在技术上不会改变。

而不是使用这样的单元，您应该考虑使用其中的一个“动态”单元。例如：

• 百分比(%)
• 视口宽度或视口高度(分别为vw和vh )

​

~图片来自这篇文章 备注这是一篇旧文章，对这些的支持有http://caniuse.com/#feat=viewport-units

例如，使用“百分比”这样的值意味着可以根据包含块的大小来设置div的宽度和/或高度。

例如，在这里调整屏幕大小：

​

div {
  width: 50%;
  background: tomato;
  height: 50px;
}

<div></div>

​

您应该注意到，这个div总是“其容器的50%”。

这将变得非常方便，如果你是建立你的网站从零，但也将是有用的，如果你是适应一个以及。

使用媒体查询

媒体查询在正确使用时是很好的。

媒体查询是一个逻辑表达式，该表达式为true或false。如果媒体查询的媒体类型与运行用户代理的设备的媒体类型匹配(如“应用到”行中定义的那样)，且媒体查询中的所有表达式都为真，则媒体查询为真。 对于适用于所有媒体类型的媒体查询，提供了一个简短的语法；关键字‘all’可以省略(以及后面的‘和’)。也就是说，如果没有显式地给出媒体类型，那么它就是“all”。

例如，您可以测试“如果我的屏幕小于500 is，则使用此css”。

这将使用以下内容的定义：

@media (max-width:500px) {
//my css for when screen is lass than 500px wide
}

多个媒体查询可以组合在一个媒体查询列表中。以逗号分隔的媒体查询列表。如果逗号分隔列表中的一个或多个媒体查询为true，则整个列表为true，否则为false。在媒体查询语法中，逗号表示逻辑OR，而‘AND’关键字表示逻辑和

这方面的一个简单演示是：

​

div{
  width:500px;
  height:200px;
  background:gray;
  }

@media screen and (max-width:500px){
  div{
    width:100px;
    background:tomato;
    }
  
  }

<div></div>

​

使用响应插件

(个人不通知，但仍然有效)

引导是开发响应webs的最流行的HTML、CSS和JS框架。

虽然我建议不要使用这个，因为它有很多‘不必要的’css规则，因此我认为它应该只用于‘概念代码’，而不是生产代码。

其他框架包括：

• 基础3
• 骨架
• 引导

使用这些的组合

实际上，大多数开发人员都会使用所有这些组合。没有一个真正的“确定”的方式，使一个网站作出反应。但是，希望您将来能够使用其中的一些内容。

我最近发现，对于响应性的图像，我必须确保Jekyll站点中的图像(移植模板和添加功能)能够在较小的屏幕上进行缩放和匹配，而不是在较大尺寸的屏幕上拉伸和占用屏幕的一半。

这里有2种方法，以确保图像/媒体不会过度拉伸或混乱整个响应站点通过边界，而不必手动调整它们的大小。

1. CSS max/min宽度属性 对于像图像这样的媒体资产，大多数浏览器将支持max-width属性，该属性指定图像的宽度，或者max-height (如果您的用例喜欢的话)。下面是一个例子： /*in a css file */ img { max-width: 90%; height: auto; width: auto; } 这告诉浏览器以90%的最大宽度显示图像，并相应地调整宽度和高度的大小(不需要这两个属性)。对于所有img元素。 为了更好地控制类的单个样式，可以这样做： img.responsive { /*css for specific class here*/ } 然后指定元素是image responsive类的一部分，如下所示： <img class="responsive" src="/assets/pic.png">

编辑：

1. 在CSS中的定心或定位 我找到了一个简单的网站，它根据输入设置为您生成如何在CSS中定位元素的代码，这在响应设备上也是一个真正的问题。这是一个网站：http://howtocenterincss.com/ 请注意，您需要完全填写所有内容(包括中间选项)。此外，尽管网站的名称，它也处理的立场，不是中心，所以这是一个相当好的所有。
2. 将图像封装在容器中 这样做的好处是您对容器进行了样式化，如果容器的属性为auto，则容器中的每个元素都将坚持容器样式。通过为带有width=800px的容器指定最大大小，同时使图像width: auto调整为容器的尺寸。

这两个示例来自以下站点，它是处理响应性资产(如响应性视频/图像/字体和相对大小，为响应网站提供5个有用的CSS技巧 )的一个很好的资源。这位作家在这个话题上比我现在更精通.

请注意，正如本教程所提到的，并非所有浏览器都支持max-width (IE7和9确实支持，但不支持IE8)，因此对于一些使用过时浏览器的人来说，这可能是一个问题。在这种情况下，黑客需要有条件的CSS，例如下面(从站点获取的例子)：

@media \0screen {
  img { 
    width: auto; /* for ie 8, */
  }
}

-注意我是如何在我的第一个示例中使用max- with属性放置width:auto的。

附加:另一个框架

许多由网页设计师n33制作的模板使用轻量级Skel框架来制作响应性网站，根据屏幕大小加载正确的CSS。然而，这是一个Javascript框架，当用户打开noscript时，它将无法工作。在这种情况下，必须通过指定<noscript> paths to CSS here </noscript>来加载CSS。

一个关于响应模板(它有类似CSS的开源文件)的很好的参考，可以让我研究和理解制作响应站点的一些方法，也可以在HTML5UP.net找到编写Skel的同一位开发人员。