建站知识
首页 > 网站建设 > 建站知识 > 构建响应式web设计的三个步骤:可伸缩图像

构建响应式web设计的三个步骤:可伸缩图像

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

响应式网页设计:概述

过去,为了满足移动用户的需求,有必要建立一个专门为移动设备设计的附加网站。在过去,这种方法相对流行响应式网站建设,但已变得越来越罕见。没有一种正确的方法可以适应所有情况。每周都有新设备上市,毫无疑问,公司正在设计新设备。那么,建立和维护多个网站是否现实?甚至可以说,有必要吗?显然不是,我们无法预测未来的情况。

幸运的是,我们有一种方法可以构建可以在当前设备以及将来的设备上运行的网站。更好的是,它可以在较小的屏幕,较大的屏幕以及介于两者之间的屏幕上显示不同的效果。

响应页面的组成:

Ethan Marcotte为我们提供了如何构建响应式网页设计的方法。他的方法有以下三点:

1、灵活的图像和媒体。(图像和媒体资源的尺寸是用百分比定义的,从而可以根据环境进行缩放。)
2、灵活的、基于网格的布局,也就是流式布局。(所有的width属性都用百分数设定,因此所有的布局都是相对的。其他水平属性通常也会使用相对单位em、百分数、rem等)。
3、媒体查询。(使用这项技术,可以根据媒体特征(如浏览器可视页面区域的宽度)对设计进行调整。)

创建可缩放的图像:

默认情况下,显示的图像大小是HTML中指定的width和height属性值。如果未指定这些属性值,则图像将自动以其原始大小显示。当屏幕宽度受到限制时,以原始尺寸显示图像可能不合适。使用可伸缩图像技术,可以在可用空间内缩放图像,但不会超过其原始宽度。

我记得以前制作的网页,其中的图片都是固定大小的。当我左右拉伸浏览器窗口时,图像不会改变。如以下示例所示:

当我没有设置图片的宽度和高度时:




  
  网页标题


 
 

代码执行:

原始图片:

左右拉伸浏览器窗口后:

很明显,如果您未指定图像的宽度和高度,则会根据图像的原始尺寸显示它,并且无法在有限的空间中缩放。

制作可缩放图像有两个步骤:

1、从HTML img标签中省略了width和height属性。

2、在样式表中,将max-width:100%应用于要制作可缩放图像的每个图像。

注意:

1、一定要使用max-width:100%,不要使用width:100%;
    (因为width:100% 是将图像尽可能地填充页面,如果图像比页面宽度小,图像就会扩大到超过原来尺寸, 
     可能会比较难看)
2、图标字体和SVG可以创建无损缩放图形。(不要忘记对图像进行优化,可以让文件尺寸尽可能地变小)
3、可以使用background-size属性对背景图像进行缩放(对ie8无效)
4、视频也可以同样进行缩放。

代码示例如下:




  
  网页标题
   
  


 
 

效果截图:

这是舒展的。您会看到图像的宽度不会超过浏览器窗口,并且小图像的宽度不会超过原始大小。

创建灵活的布局网格

带有固定宽度容器(框)的网页似乎有点僵化,因为随着浏览器宽度的减小它们不会变小,因此会出现水平滚动条。

创建灵活的布局(可选)第一步:设置包含整个页面内容的元素的max-width:值。 (值通常使用像素,但也使用百分比,em值或rem值)

步骤2:对于需要一定宽度才能实现预期布局的元素,请设置width:value,其中value表示元素在水平方向上所占容器空间的比例。 (通常无需设置宽度:100%)

例如:




  
  弹性布局网格