把自己的网站变成响应式3个简单步骤的实用技巧

从今天来看，一个网站是不够的，只有好看的桌面屏幕上，同时也对平板电脑和智能手机可以是一个很好的展示。响应网站意味着它可以适应客户端的屏幕尺寸，自动改变大小响应于客户端。在这篇文章中，我会告诉你这是多么容易通过三个简单的实用技巧步骤，使网站成为一个响应式。
 

 
1--布局
当你创建一个反应灵敏的网站，或者让成响应布局的现有的网站，首先要注重的元素。我建立反应灵敏的网站，总是先创建一个无响应的布局，页面宽度固定大小。如果不答复的版本做得非常好，我会加入媒体查询（媒体查询）和反应代码。这种操作方式更容易实现响应特性，在相同的时间专注于一个任务。
当你完成了反应迟钝的网站，做的第一件事就是在你的HTML页面，下面的代码粘贴到的和标签。这将设置在屏幕上1：1尺寸的显示器提供了网站浏览iPhone和其他智能手机的浏览器的完整视图，并禁止用户缩放网页。

现在是时候添加一些媒体的质疑。根据W3C网站，媒体查询的媒体类型和零个或多个媒体查询表达式的条件。通过使用媒体查询，呈现的外观可以针对输出设备的特定范围，而不改变内容本身。换句话说，媒体查询，使您的网站上各种不同的显示器看起来不错，从小到大的智能手机电脑屏幕等。
媒体的询问取决于你的网站布局，所以对我来说，为您提供了一个现成的代码片段，可以用来有点困难。然而，对于大多数网站下面的代码是一个很好的起点。在这个例子中，＃初级是主内容区域，＃次级是一个侧杆。
正如你可以从上面的代码中看到，我定义了两个指标：首先有一个最大宽度为1060px，为平板电脑优化的景观。 #primary占父容器的宽度的67％，＃senondary占30％，再加上的左边缘3％。第二个标准是平板电脑和屏幕尺寸较小。
由于智能手机的小屏幕尺寸，我决定成立100％#primary宽度，＃二次也创下了100％的宽度，他将是继在#primary。正如我已经说过，你可能要作出修改代码位，以适应您的网站的特定需求。
/* Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
 
/* Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
完成后，让我们看看你的反应如何布局。要做到这一点，我用这个马特Kersley创造了一个非常敏感的测试工具。
 
2，媒体
一个响应布局是实现一个响应网站的第一步。现在，让我们专注于增加了一个现代化的网站的一个非常重要的方面：媒体，如视频或图像。下面的CSS代码将确保您的照片将永远不会大于他们的父容器，代码很简单，对于大多数站点。请注意，IE6等旧版的浏览器不支持最大宽度的指令。
img { max-width: 100%; }
虽然上述技术是有效的，有时你可能需要有更多的控制图像，例如客户端的显示大小，显示不同的图像。
这是由尼古拉斯·加拉格尔发明的好方法。让我们来看看HTML：

正如你所看到的实用技巧的方法，我们用数据 - *属性来存储替换图像的URL。现在，让我们用强大的CSS3指定替换图像相匹配的媒体分设备宽度的状态：
@media (min-device-width:600px) {
img[data-src-600px] {
content: attr(data-src-600px, url);
}
}
 
@media (min-device-width:800px) {
img[data-src-800px] {
content: attr(data-src-800px, url);
}
}
CSS：
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
 
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
在您的网站应用了这些代码，嵌入视频的响应（响应）。
 
3 - 字体
本教程的最后一步绝对是非常重要的，但往往忽略了网站开发者 - 字体。到现在为止，大多数开发者（包括我自己）用像素来定义字体的大小。而在一个正常的网站使用的像素是确定的，但对于敏感的网站应该有字体的响应类型。事实上，字体大小的响应风格应与其父容器的宽度相关联的，因此，它可以适合于客户端的屏幕上。
CSS3规范中引入了一个新的单位，称为REM和EM类似于类，但它是相对于HTML元素，REM更容易使用。
REM是相对于HTML元素，不要忘记重置HTML字体大小：
html { font-size:100%; }


完成后，您可以定义字体大小的反应类型，如下所示：
@media (min-width: 640px) { body {font-size:1rem;} }
@media (min-width:960px) { body {font-size:1.2rem;} }
@media (min-width:1100px) { body {font-size:1.5rem;} }
 
请注意，旧的浏览器不支持REM单元，所以不要忘记实现替换。这就是今天，我希望你会喜欢这个实用技巧的教程！来自:编辑从其他媒体精选Web开发教程相关文章转载，仅供网友学习和交流.了解更多IT技术相关资讯或视频教程欢迎进入课课家教育查询详情。