响应式布局页面设计_Html教程_奇迪科技(深圳)有限公司(www.qvdv.com)
欢迎来到奇迪科技(深圳)有限公司,超值服务提供卓越产品!

Html教程

响应式布局页面设计

作者:admin来源:www.qvdv.com更新时间:2014-03-03

响应式布局页面设计,实现HTML页面自动使用浏览器屏幕大小功能,能够让网页在PC、平板、手机等客户端打开的时候都正常显示。这里应用到的是Media Queries的功能。

实现办法:

一、在HTML页面的<header></header>内插入如下的代码:

<link rel="stylesheet" type="text/css" media="only screen and (min-width:980px) and (max-width:1441px)" href="css/screen_layout_xlarge.css">

上面的media语句表示的意思是:当页面的宽度在980px~1441px之间时,调用的CSS样式文件是“screen_layout_xlarge.css”。现在我们来解释一下基本的术语:

1、screen:指的是一种媒体类型;

2、and:被称为关键词,与其相似的还有not,only;

3、(min-width:980px):这个就是媒体特性,说得通俗一点就是媒体条件。

4、(max-width:1441px):这个的理解和第三条是一样的。

这样我们就能够浏览器在不同的分辨率下载入不同的CSS文件,从而能让WEB页面在各种客户端打开都能显示出预定的效果。

又如,以下的语句是让WEB页面在小于或等于600px像素的客户端展示时载入名为“small.css”的CSS文件。

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />


本文版权所有,转载须注明:来源 http://www.qvdv.com/qvdv-wdl-271.html