网站建设响应式与响应式页面的区别

发布时间:2017-05-12

自适应是为了解决如何才能在不同大小的设备上呈现同样的网页

响应式,"一次设计,普遍适用",让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整网页内容大小。
自适应暴露出问题,如果屏幕太小,即使网页能够根据屏幕大小进行适配,但是会感觉在小屏幕上查看,内容过于拥挤,响应式正是为了解决这个问题而衍生出来的概念。它可以自动识别屏幕宽度、并做出相应调整的网页设计,布局和展示的内容可能会有所变动。

实现响应式要注意几点:

1、适应不同分屏幕大小的设备

首先,在网页代码的头部,加入一行viewport元标签。

<pre class="class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1" />

viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。

2、尽量少使用绝对宽度

3、相对大小的字体

4、流动布局(fluid grid)

流式布局(Liquid)的特点(也叫"Fluid") 是页面元素的宽度按照屏幕进行适配调整,主要的问题是如果屏幕尺度跨度太大,那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。

5、选择加载CSS6、CSS的@media规则

同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。

@media  screen and (max-device-width: 400px) 
{
  .column float: none;width:auto;}
  #sidebar{display:none;}
}

上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。

7、图片的自适应(fluid image)

除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。

这只要一行CSS代码:

img { max-width: 100%;}

这行代码对于大多数嵌入网页的视频也有效,所以可以写成:

img, object { max-width: 100%;}

老版本的IE不支持max-width,所以只好写成:

img { width: 100%; }

此外,windows平台缩放图片时,可能出现图像失真现象。这时,可以尝试使用IE的专有命令: 

img { -ms-interpolation-mode: bicubic; }

或者,Ethan Marcotte的imgSizer.js。

addLoadEvent(function() 
{
    var imgs = document.getElementById("content").getElementsByTagName("img");
    imgSizer.collate(imgs);
});

网站建设,最好还是根据不同大小的屏幕,加载不同分辨率的图片。有很多方法可以做到这一条,服务器端和客户端都可以实现。