建站知识
首页 > 网站建设 > 建站知识 > 智能手机响应式网站布局的几种方法!(上)

智能手机响应式网站布局的几种方法!(上)

发布时间:2021-03-28    来源:广州网站优化公司     浏览次数:

1 –布局

创建响应式网站或使现有网站具有响应性时,首先要关注的是元素的布局。当我构建响应式网站时广州网站优化,我总是首先创建具有固定页面宽度的非响应式布局。如果非响应式版本做得很好,我将添加“媒体查询”和响应式代码。这种操作模式使实施响应功能并同时专注于一项任务变得更加容易。

完成无响应的网站后,首先要做的是将以下代码粘贴在HTML页面上的标记之间。这样会将屏幕设置为以1:1大小显示,在iPhone和其他智能手机的浏览器上提供网站的全视图浏览,并禁止用户放大和缩小页面。



现在是时候添加一些媒体查询了。根据W3C网站,媒体查询由媒体类型和该媒体查询的零个或多个条件表达式组成。通过使用媒体查询,外观演示可以针对特定范围内的输出设备,而无需更改内容本身。换句话说,媒体查询使您的网站在从小型智能手机到大型计算机屏幕等的各种显示器上看起来都很棒。

媒体查询取决于您的网站布局,因此我很难为您提供现成的代码段。但是,以下代码是大多数网站的一个很好的起点。在此示例中,#primary是主要内容区域,#secondary是侧边栏。

从代码中可以看到,我定义了两个规范:首先,有一个针对平板电脑优化的最大宽度为1060px的水平显示器。 #primary占其父容器宽度的67%,#senondary占30%,外边距为3%。第二个规格是针对平板电脑和较小的屏幕尺寸。

由于智能手机的屏幕尺寸较小,我决定将#primary的宽度设置为100%,而#secondary也将#%的宽度设置为100%。正如我已经说过的那样,您可能需要修改此代码位以适应您网站的特定需求。

响应式网站布局_h5 响应式网站国外_响应式网站建设

/* 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; }
}

完成后,让我们看看您的布局如何响应。为此,我使用了Matt Kersley创建的响应速度非常快的测试工具。

2 –媒体

响应式布局是实现响应式网站的第一步。现在,让我们关注现代网站的另一个非常重要的方面:媒体,例如视频或图像。以下CSS代码将确保您的图片永远不会比其父容器大。该代码非常简单,适用于大多数网站。请注意,较旧的浏览器(例如IE6)不支持max-width命令。

img { max-width: 100%; }

尽管上述技术有效,但有时您可能需要更多图像控制,例如根据客户端的显示大小显示不同的图像。

这是尼古拉斯·加拉格尔(Nicolas Gallagher)发明的一种很棒的方法。让我们看一下HTML:

如您所见,我们使用data- *属性存储替换图像的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);
    }
}

上一篇: 新网站上线后我们应该注意的几件事!!

下一篇: B2B服务平台官网建设的几种常见因素分析!!

返回顶部

售前客服QQ

售后客服QQ

加微信交谈

加微信交谈

x