深蓝互联专注深圳小程序开发、微网站、O2O系统、APP开发和深圳网站建设欢迎咨询邮箱:wisepu@szdbi.com   电话:13530005652   联系我们   |   网站地图   



响应式网站应该如何开发?

来源:     发布:     点击:
响应式网站的设计现在非常很受欢迎,所谓响应式网站,是指同一个网站,同一个页面可以支持在手机、电脑、平板、以及各种设备上都能正常访问的网站,当用户使用任何设备访问时,网页会自动根据其设备的屏幕大小进行等比缩放,且不会影响显示效果和用户使用。因为当前的Internet不仅依靠计算机浏览网络,而且更多的用户喜欢使用移动设备浏览网络。 移动设备的类型很多,设备的屏幕尺寸甚至更大。下面我将通过三个简单的步骤向您展示如何轻松地构建响应式网站以及如何在现有网页上应用响应式设计技术。
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&amp;byline=0&amp;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;} } 

以上就是响应式网站建站全部技术指南。

相关文章

  • 响应式网站与PC端+手机端网站到底该企业如何选择?


  • 深圳市龙华新区龙观西路2号宝龙大厦A903(与布龙路交汇处)