构建响应式网站
Constructing a responsive website
在当今的网络开发社区中，制作一个网站几乎 'standard practise' "fully responsive" - 这意味着它可以在所有屏幕尺寸上运行。
我目前有一个专为 900 * 600 像素的宽度和高度设计的网站。但是，我想以这样一种方式对其进行更改，使其具有移动响应能力，而不会失去其功能。
我一直在寻找一些 'industry standard' 可以适应这个目的的概念，尽管我对 'professionals' 如何在现实世界的情况下实现这一点有点不知所措？
+---------------------------------------+
| NAVBAR (900px) |
+---------------------------------------+
| | |
| | |
| | body |
|200px | (700px) |
| | |
| | |
| | |
| | |
+---------------------------------------+
这里有一个适合 900 * 600 像素屏幕的布局设计的快速演示：
.page-wrap {
height: 600px;
width: 900px;
background: lightgray;
position: absolute;
top: 0;
left: 0;
}
.nav {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 900px;
background: tomato;
}
.sidebar {
position: absolute;
top: 50px;
left: 0;
height: 550px;
width: 200px;
background: dimgray;
}
.nav a {
display: inline-block;
height: 50px;
width: 100px;
line-height: 50px;
text-decoration: none;
background: rgba(200, 200, 200, 0.4);
}
.nav a:hover {
background: transparent;
}
<div class="page-wrap">
<div class="nav">
<a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a>
</div>
<div class="sidebar">
</div>
</div>
简而言之，这个'responsive'设计是如何构建的？处理响应式设计时有'best practise'吗？
有很多方法可以使网站响应。它归结为很多因素。
您需要使用 RWD，它代表 响应式网页设计。
这意味着您可以在可变尺寸的屏幕上发布您的网页，而无需一遍又一遍地重写 html。如果您必须使用移动 and/or tablet 设备，这是必须做的事情。
使用动态单位
使网页具有响应性的最重要特征之一是您使用的单位，所以我将首先提到这一点。目前，您通过使用（像素）px 单位获得 'hard coded' 这些值，这将被视为 'static unit'.
以下是您在生成标记时可能需要考虑的几个单位：
The absolute length units are fixed in relation to each other and
anchored to some physical measurement. They are mainly useful when the
output environment is known. The absolute units consist of the
physical units (in, cm, mm, pt, pc) and the px unit ~ w3.org
上面的 table 显示了所谓的 'absolute' 单位，这是因为当您调整浏览器大小时或在移动设备上查看时它们不会 'technically' 改变。
而不是 使用此类单位，您应该考虑使用 'dynamic' 单位之一。例如：
~图片来自this article note this is an old article, and support for these has improved a lot since
例如，使用百分比表示您可以根据包含块的大小设置 div 的宽度 and/or 高度。
例如，在此处调整屏幕大小：
div {
width: 50%;
background: tomato;
height: 50px;
}
<div></div>
您应该注意到 div 始终是“其容器的 50%”。
如果您从头开始构建您的网站，这将变得非常方便，但如果您也调整一个网站，这也会很有用。
使用媒体查询
如果使用得当，媒体查询非常有用。
A media query is a logical expression that is either true or false. A
media query is true if the media type of the media query matches the
media type of the device where the user agent is running (as defined
in the "Applies to" line), and all expressions in the media query are
true.
A shorthand syntax is offered for media queries that apply to all
media types; the keyword ‘all’ can be left out (along with the
trailing ‘and’). I.e. if the media type is not explicitly given it is
‘all’.
例如，您可以测试 "if my screen is smaller than 500px, use this css instead".
这将使用如下定义：
@media (max-width:500px) {
//my css for when screen is lass than 500px wide
}
Several media queries can be combined in a media query list. A
comma-separated list of media queries. If one or more of the media
queries in the comma-separated list are true, the whole list is true,
and otherwise false. In the media queries syntax, the comma expresses
a logical OR, while the ‘and’ keyword expresses a logical AND
一个简单的演示是：
div{
width:500px;
height:200px;
background:gray;
}
@media screen and (max-width:500px){
div{
width:100px;
background:tomato;
}
}
<div></div>
使用响应式插件
（个人不建议，但仍然有效）
Bootstrap is the most popular HTML, CSS, and JS framework for
developing responsive webs.
虽然我建议不要使用它，因为它有很多 'unnecessary' css 规则，因此我认为它应该只用于 'concept code'，而不应该用于生产代码。
其他框架包括：
结合使用这些
实际上，大多数开发人员会使用它们的各种组合。
没有真正的 'definitive' 方法可以使网站响应。但是，希望您将来能够使用其中的一些。
我最近发现，对于响应式图像，我必须确保 Jekyll 站点中的图像（移植模板和添加功能）能够缩放并适合较小的屏幕，但不会拉伸并占据屏幕的一半尺寸更大的屏幕。
这里有 2 种方法可以确保 images/media 不会通过边界 过度拉伸或弄乱整个响应式站点，而无需手动调整它们的大小 。
CSSmax/min-width属性
对于图像等媒体资产，大多数浏览器将支持指定图像宽度的 max-width 属性，或者如果您的用例更喜欢 max-height。这是一个例子：
/*in a css file */
img {
max-width: 90%;
height: auto;
width: auto;
}
告诉浏览器以最大宽度 90% 显示图像并相应地调整宽度和高度的大小（您不需要这两个属性）。对于所有 img 个元素。
为了更好地控制 classes 的个别样式，可以像这样完成：
img.responsive {
/*css for specific class here*/
}
然后指定元素是 image responsive class 的一部分，如下所示：
<img class="responsive" src="/assets/pic.png">
编辑：
在 CSS
中居中或定位
我找到了一个简单的网站，它生成了关于如何根据输入设置为您在 CSS 中定位元素的代码，这在响应式设备上也是一个实际问题。这是网站：http://howtocenterincss.com/
请注意，您需要完整填写所有内容（包括中间选项）。此外，尽管网站名称如此，但它也处理非中心位置，因此它是一个相当不错的包罗万象。
将图像包装在容器中
这样做的好处是您可以为容器设置样式，如果容器中的每个元素的属性为 auto，则其中的每个元素都将遵循容器样式。通过使用 width=800px 指定容器的最大大小，同时使图像 width: auto 以便图像将调整大小以适应容器的尺寸。
这 2 个示例改编自以下站点，该站点是处理响应式资产（例如响应式 videos/images/fonts 和相对大小 5 useful CSS Tricks for a Responsive Website）的重要资源。作者比我现在更精通这个主题。
请注意，如该教程中所述，并非所有浏览器都支持 max-width（IE7 和 9 支持，但 IE8 不支持），因此对于某些使用过时浏览器的人来说，这可能是个问题。在这种情况下，需要有条件的 CSS 才能进行如下黑客攻击（示例取自网站）：
@media [=10=]screen {
img {
width: auto; /* for ie 8, */
}
}
-- 请注意我是如何将 width:auto 放置在我的第一个示例中的 max-width 属性
补充：另一个框架
网页设计师 n33 制作的许多模板都使用 lightweight Skel framework 来制作可根据屏幕尺寸加载正确 CSS 的响应式网站。然而，这是一个 Javascript 框架，当用户打开 noscript 时将无法运行。在这种情况下，您必须通过指定 <noscript> paths to CSS here </noscript>
来加载 CSS
有关响应式模板（具有 CSS 之类的开源文件）的很好参考，它使我能够研究和理解制作响应式网站的一些方法，也可以在 HTML5UP.net 上找到写 Skel.
的开发者
在当今的网络开发社区中，制作一个网站几乎 'standard practise' "fully responsive" - 这意味着它可以在所有屏幕尺寸上运行。
我目前有一个专为 900 * 600 像素的宽度和高度设计的网站。但是，我想以这样一种方式对其进行更改，使其具有移动响应能力，而不会失去其功能。
我一直在寻找一些 'industry standard' 可以适应这个目的的概念，尽管我对 'professionals' 如何在现实世界的情况下实现这一点有点不知所措？
+---------------------------------------+
| NAVBAR (900px) |
+---------------------------------------+
| | |
| | |
| | body |
|200px | (700px) |
| | |
| | |
| | |
| | |
+---------------------------------------+
这里有一个适合 900 * 600 像素屏幕的布局设计的快速演示：
.page-wrap {
height: 600px;
width: 900px;
background: lightgray;
position: absolute;
top: 0;
left: 0;
}
.nav {
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 900px;
background: tomato;
}
.sidebar {
position: absolute;
top: 50px;
left: 0;
height: 550px;
width: 200px;
background: dimgray;
}
.nav a {
display: inline-block;
height: 50px;
width: 100px;
line-height: 50px;
text-decoration: none;
background: rgba(200, 200, 200, 0.4);
}
.nav a:hover {
background: transparent;
}
<div class="page-wrap">
<div class="nav">
<a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a><a href="#">nav bar item</a>
</div>
<div class="sidebar">
</div>
</div>
简而言之，这个'responsive'设计是如何构建的？处理响应式设计时有'best practise'吗？
有很多方法可以使网站响应。它归结为很多因素。
您需要使用 RWD，它代表 响应式网页设计。 这意味着您可以在可变尺寸的屏幕上发布您的网页，而无需一遍又一遍地重写 html。如果您必须使用移动 and/or tablet 设备，这是必须做的事情。
使用动态单位
使网页具有响应性的最重要特征之一是您使用的单位，所以我将首先提到这一点。目前，您通过使用（像素）px 单位获得 'hard coded' 这些值，这将被视为 'static unit'.
以下是您在生成标记时可能需要考虑的几个单位：
The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc) and the px unit ~ w3.org
上面的 table 显示了所谓的 'absolute' 单位，这是因为当您调整浏览器大小时或在移动设备上查看时它们不会 'technically' 改变。
而不是 使用此类单位，您应该考虑使用 'dynamic' 单位之一。例如：
例如，使用百分比表示您可以根据包含块的大小设置 div 的宽度 and/or 高度。
例如，在此处调整屏幕大小：
div {
width: 50%;
background: tomato;
height: 50px;
}
<div></div>
您应该注意到 div 始终是“其容器的 50%”。
如果您从头开始构建您的网站，这将变得非常方便，但如果您也调整一个网站，这也会很有用。
使用媒体查询
如果使用得当，媒体查询非常有用。
A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true.
A shorthand syntax is offered for media queries that apply to all media types; the keyword ‘all’ can be left out (along with the trailing ‘and’). I.e. if the media type is not explicitly given it is ‘all’.
例如，您可以测试 "if my screen is smaller than 500px, use this css instead".
这将使用如下定义：
@media (max-width:500px) {
//my css for when screen is lass than 500px wide
}
Several media queries can be combined in a media query list. A comma-separated list of media queries. If one or more of the media queries in the comma-separated list are true, the whole list is true, and otherwise false. In the media queries syntax, the comma expresses a logical OR, while the ‘and’ keyword expresses a logical AND
一个简单的演示是：
div{
width:500px;
height:200px;
background:gray;
}
@media screen and (max-width:500px){
div{
width:100px;
background:tomato;
}
}
<div></div>
使用响应式插件
（个人不建议，但仍然有效）
Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive webs.
虽然我建议不要使用它，因为它有很多 'unnecessary' css 规则，因此我认为它应该只用于 'concept code'，而不应该用于生产代码。
其他框架包括：
结合使用这些
实际上，大多数开发人员会使用它们的各种组合。 没有真正的 'definitive' 方法可以使网站响应。但是，希望您将来能够使用其中的一些。
我最近发现，对于响应式图像，我必须确保 Jekyll 站点中的图像（移植模板和添加功能）能够缩放并适合较小的屏幕，但不会拉伸并占据屏幕的一半尺寸更大的屏幕。
这里有 2 种方法可以确保 images/media 不会通过边界 过度拉伸或弄乱整个响应式站点，而无需手动调整它们的大小 。
CSSmax/min-width属性
对于图像等媒体资产，大多数浏览器将支持指定图像宽度的
max-width属性，或者如果您的用例更喜欢max-height。这是一个例子：/*in a css file */ img { max-width: 90%; height: auto; width: auto; }告诉浏览器以最大宽度 90% 显示图像并相应地调整宽度和高度的大小（您不需要这两个属性）。对于所有
img个元素。为了更好地控制 classes 的个别样式，可以像这样完成：
img.responsive { /*css for specific class here*/ }然后指定元素是
image responsiveclass 的一部分，如下所示：<img class="responsive" src="/assets/pic.png">
编辑：
在 CSS
中居中或定位我找到了一个简单的网站，它生成了关于如何根据输入设置为您在 CSS 中定位元素的代码，这在响应式设备上也是一个实际问题。这是网站：http://howtocenterincss.com/
请注意，您需要完整填写所有内容（包括中间选项）。此外，尽管网站名称如此，但它也处理非中心位置，因此它是一个相当不错的包罗万象。
将图像包装在容器中
这样做的好处是您可以为容器设置样式，如果容器中的每个元素的属性为
auto，则其中的每个元素都将遵循容器样式。通过使用width=800px指定容器的最大大小，同时使图像width: auto以便图像将调整大小以适应容器的尺寸。
这 2 个示例改编自以下站点，该站点是处理响应式资产（例如响应式 videos/images/fonts 和相对大小 5 useful CSS Tricks for a Responsive Website）的重要资源。作者比我现在更精通这个主题。
请注意，如该教程中所述，并非所有浏览器都支持 max-width（IE7 和 9 支持，但 IE8 不支持），因此对于某些使用过时浏览器的人来说，这可能是个问题。在这种情况下，需要有条件的 CSS 才能进行如下黑客攻击（示例取自网站）：
@media [=10=]screen {
img {
width: auto; /* for ie 8, */
}
}
-- 请注意我是如何将 width:auto 放置在我的第一个示例中的 max-width 属性
补充：另一个框架
网页设计师 n33 制作的许多模板都使用 lightweight Skel framework 来制作可根据屏幕尺寸加载正确 CSS 的响应式网站。然而，这是一个 Javascript 框架，当用户打开 noscript 时将无法运行。在这种情况下，您必须通过指定 <noscript> paths to CSS here </noscript>
有关响应式模板（具有 CSS 之类的开源文件）的很好参考，它使我能够研究和理解制作响应式网站的一些方法，也可以在 HTML5UP.net 上找到写 Skel.