响应网页设计不只是列，网格，图像和图标。没有文字内容所有这一切都将没有意义。正如比尔·盖茨曾经说过：“ 内容为王。 ”

当涉及到的内容，我们需要谈谈网页排版。纵观现代网络设计的发展趋势，具有响应排版是每一个网页设计师和Web开发人员不应该错过的一大因素。

在这里，我们将讨论创建响应网页排版，你需要了解它的因素。

印刷术基础

良好的排版是所有关于选择网络或印刷媒体的权利类型。从字体类型，文本在不同的视口的长度和字体大小颜色，良好的印刷保证了最后一封信的形式生成高质量的最终结果。
在我们深入到创建成功的响应网页排版的过程中，这里有您需要了解一些术语。

字体

又称字体家族。这是一套完整的字母，数字，符号，特殊字符和重量人物设计的集合。

字形

这是一个包含有关所使用的刻字，如字体，重量，宽度，样式等信息的实际的计算机文件。

底线

这是其中字母休息并且其中线下行延伸。

瓶盖高度

这是大写字母基线以上的高度。

x高度

又称语料规模。此基线和中线之间的距离（从基线的距离的一半上限高度）

下行

这是一个扩展的基线以下的信件的一部分。

下行

下行
这是一个扩展的基线以下的信件的一部分。

跟踪

也被称为字母间距。这是持续上升或字母之间均匀下降空间。

字距

在不同宽度的字形调整各个字符之间的空间的过程。

领导

又称行高的CSS。连续行或类型的基线之间的距离。

考虑要点上的Web版式

单词，短语和句子才有意义，但每个角色可以有情感。除了是有求必应，还必须考虑更好地呈现网页排版到你的听众。

完整的设计将没有任何意义，如果你的观众会不理解或不吸引到您的内容。在网页排版有四个基本要素：

类型
颜色
质地
图片
所有这些都将有你的排版的最终结果有很大的影响，但该类型会放大你的信息的表现力。

有五个因素可以帮助你创造像样的网页排版。

1.选择与您的主题最好的字体

大多数网站都是时下使用相同的字体。是的，你猜对了正确的; 我说的是宋体和黑体。然而，它会成为一个很大的意义，如果你可以与你的消息对齐字体。

例如，您的网页大约一本儿童读物的谈判会是很好的，如果你使用类似DK蜡笔小新碎屑或 小Priss小姐在你的标题文本？

我并不认为你需要做这一切的时候，但关键是确保排版与您的目标受众，并对齐文字清晰可读。

2.使用网络字体

其中一个网页设计的最大改进是时下对网页字体的支持所有现代浏览器通过@import指令和标准的链接标记。看看下面的演示。

使用@import标签：

@import URL （http://fonts.googleapis.com/css?family=Open+Sans）;

这意味着你可以使用任何字体，可在托管Web字体的网站，如谷歌字体，Typekit和Fontdeck。这里有以下几种使用Web字体的优势：

它节省的钱。你并不需要在线购买字体。
这样可以节省时间。虽然可以手动在你的文件夹文件的网络字体可以用一行代码来完成整合的字体。
他们是兼容的Web浏览器的所有新版本和是搜索引擎友好。
3.使用适当的颜色组合

其中一个主要问题网页设计师提交时下抛出不必要的色彩组合到他们的网站。记住好的网页设计可以如何做好网站的功能有多好设计是被识别。

说到设计，你不只是设计你的网页随意扔了很多，不与你的文字和网站的背景尤其是混合色。这将使你的文本阅读，而且会带来痛苦访问者的眼睛。

但你如何使用正确的颜色组合？虽然没有一般的规则，也有一些指引。

如使用的文字和背景之间具有合适的对比度，或颜色区分由W3C建议。具有相同的价值，但不同色调的颜色可能与一个美好的愿景的人，但不是色盲人士易于阅读。它应用到你的设计之前检查对比度是很重要的。你可以使用这个伟大的工具来模拟对比。
使用平板UI颜色如果可能的话。这些颜色的光，并具有不痛苦的眼睛大的组合。查看flatuicolors.com的更多信息，基于平板的UI。
4.使用文字而不是图像

正如我们都知道的图像使网页慢。最常见的图像是强制Web浏览器来显示偏好的字型与你想要的确切布局的唯一途径。然而，这可能无法正常工作。用真实的文字是与响应的网页设计尤其是最好的一段路要走。请记住，搜索引擎无法读取图像，但他们可以阅读文本。

5.裁剪文本时使用备用文本样式

其中你需要夹子上的图像文本来创建一个纹理或图像的文字有可能是一个时间。这里的问题是，不所有浏览器支持这种技术。

要做到这一点，最好的办法是用保罗爱尔兰的CSS浏览器选择器插件。这是一个轻量级的插件，检测浏览器，操纵你希望出现在特定的浏览器的样式。以下是如何使用这个凉爽的插件。

下载此插件，然后将其链接到你的头部分：

设置CSS属性（或者id或class），每个浏览器的代码，你要对你的样式表明确更改。


.opera #header { margin: 20px; }
.webkit #header { margin: 30px; }
.ie #header{ margin: 10px; }
.ff3 #header {margin: 15px; }


有关这个凉爽的插件的更多信息，请查看这个网站。

响应排版基本规则

最根本的排版元素可以与CSS来操纵。但是，它实际上不仅仅是调整或优化每个视文字的规模。现在，我们已经讨论了如何实现像样的网页排版，现在是时候谈论我们可以应用来实现响应更佳的印刷基本规则。

1.使用REM而不是像素和EMS

同时使用像素和EMS的受欢迎。虽然像素是固定的，EMS都相对单位的父元素。这意味着当您调整浏览器很难搞清楚你需要设置达到你想要达到的输出尺寸。

更好的选择是使用雷姆。REMS或也被称为“ 根EM ”总是等于根HTML元素的字体大小，什么是更令人兴奋的与此的是，它正在被现代浏览器的支持。

html{
font-size: 16px; // 1rem = 16px
}
h1{
font-size: 1.9rem // 19px
}
h2{
font-size: 1.8rem // 18px
}

在这个例子中我限定的16像素碱字体大小这是其他元素的字体大小的参考。的h1和h2的大小将视口的变化而变化。

对于旧版本的Internet Explorer，我们可以先指定字体大小的像素单位和与它一起定义了REM单位，我们可以对所有的浏览器可调整大小的文本。

html{
font-size: 16px; // 1rem = 16px
}

h1{
font-size: 19px; font-size: 1.9rem;
}

h2{
font-size: 18px; font-size: 1.8rem;
}

2.在不同的视口实验REM单位

现在你知道如何使用REM，你通过@需要在不同尺寸的屏幕实验媒体查询。输出将取决于字体。你也需要用实际的字体大小，看看你会得到你想要的结果。

@media (max-width: 640px) {
h1 {
font-size:1.7rem
}
h2{
font-size: 1.6rem
}
}

@media (min-width: 480) {
h1 {
font-size:1.9rem
}
h2{
font-size: 1.8rem
}
}