1-布局
在构建响应式网站或使响应式网站成为现有网站时，首先要考虑的是布局。当我建立响应式网站时，我总是从创建非响应式布局开始，固定为默认大小。例如，网站的默认宽度为1100px。
处理完非响应式布局后，首先要做的是将以下行粘贴到HTML页面的<code> </ code>标记内。这将在所有屏幕上以1×1的纵横比设置视图，并删除iPhone和其他移动设备的默认功能，这些功能以全屏呈现网站，并允许用户通过捏合来放大布局。Media Queries使您的网站在从智能手机到大屏幕的各种显示器上看起来都不错。
比如通过查看代码，可以看到我定义了两种尺寸：第一种尺寸最大宽度为1060px，并且针对平板电脑横向显示进行了优化。#primary占其父容器的67％，#secondary30％，以及3％的剩余边距。
第二个尺寸是为平板电脑肖像和较小尺寸设计的。由于智能手机的屏幕尺寸较小，我决定提供#primary100％的宽度。#secondary也具有100％的宽度，并将显示在下方#primary。
以下是CSS代码展示：
/* Media Queries: Tablet Landscape */
@media screen and (max-width: 1060px) {
#primary { width:67%; }
#secondary { width:30%; margin-left:3%;}
}
/* Media Queries: Tabled Portrait */
@media screen and (max-width: 768px) {
#primary { width:100%; }
#secondary { width:100%; margin:0; border:none; }
}
2-Medias
响应式布局是构建完全响应式网站的第一步。现在，让我们集中讨论现代网站的一个非常重要的方面：媒体，例如视频或图像。
下面的CSS代码将确保您的图片永远不会比其父容器大。它非常简单，适用于大多数响应式网站。为了正常运行，必须将此代码段插入CSS样式表中。
img { max-width: 100%; height: auto; }
尽管以上技术是有效的，但是有时可能需要对图像进行更多控制，并根据客户端显示尺寸显示不同的图像。这是Nicolas Gallagher开发的一种技术。
<img src="image.jpg" alt="" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" />
我们使用该data-*属性存储替换图像的url。现在，让我们使用CSS3的全部功能，如果min-device-width条件匹配，则用指定的替换图像之一替换默认图像：
@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);
}
}
让我们看一下当今网站中另一个非常重要的Medias：视频。
由于大多数网站都使用来自第三方网站的视频，因此我决定重点研究Nick La的弹性视频技术。此技术使您可以使嵌入式视频具有响应能力。
HTML代码：
<div class="video-container"><iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe></div>
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规范包括一个名为的新单元rems。它们的工作原理几乎与em单元相同，但是相对于html元素而言，这使它们比易于使用ems。
由于rems是相对于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;} }
以上就是响应式网站建站全部技术指南。
深蓝互联成立于2013年，是一家物联网硬件开发及软件应用服务商，获得多次获得国家高新技术企业资质的企业。深蓝互联专注软硬件技术开发的专业性技术公司。我们从事软硬件开发十年，擅长SaaS 平台开发、APP小程序开发、软硬件结合开发，在视觉识别处理、数据架构、云计算、多线程高并发和集群、数据安全加密和防护方便有很深的技术积累。
我们拥有专业优秀的设计和技术团队，以极具创意的 UI 设计、精湛卓越的开发技术，专业的网络策划团队。公司多年来投入打造物联网SaaS平台，集成了公司研发的多款智能物联网终端（智能鲜米机、生鲜售货机、自助洗车机、小区电瓶车充电系统等）。
公司一直坚持以研发为导向，打造软硬件结合的物联网平台系统。将一直坚持提高开发的技术实力更好的为我们的客户服务！
文章来自深蓝互联http://www.szdbi.com/webxt/473.html转载请注明出处！
