您的位置：首页 > 其它

页面自适应功能

2014-03-04 10:42 106 查看

随着移动端的发展，现在做一个网站即要做PC端，又要做PAD版，WAP版，就需要3套样式，最近研究了一下该问题，目前主流的方法主要有：

测试工具：http://www.responsinator.com/

各尺寸效果图设计：http://mediaqueri.es/

1.使用CSS3的Media Query实现响应布局

该方法的优点在于根据不同的分辨率匹配不同的样式，灵活方便；缺点为工作量大，维护时要处理两套样式；

2.基于Javascript实现页面自适应

该方法主要应用在页面布局不复杂(单列结构的图文混合)，通过javascript获取屏幕的宽与高，同时使用Javascript轮询的方法，使其匹配不同大小的图片，应该图片的自适应；

不管使用哪种方法，其布局均要实现为流体布局，即使用百分比的形式来设定页面宽度，字体也要使用em的相对大小、图片使用background做背景等，固定布局以后的局限性很大。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
<meta name="format-detection" content="telephone=no">
<link  rel="stylesheet" type="text/css" media="only screen and (max-device-width:640px)"  href="./css/small.css" />
<link  rel="stylesheet" type="text/css" media="only screen and (min-width: 640px) and (max-device-width:1000px)" href="./css/big.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="./css/small.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width:1000px)" href="./css/big.css" />

<title>图片自适应</title>
</head>
<body>
<a href=""><div class='image_css'></div></a>
<div class='image_text'>文字测试...</div>
</body>
</html>

image_css是一个背景图片，根据不同的分辨率，使用二个不同宽度的图片。

注：不管使用哪种实现方式，WAP版肯定要与PC版设计的页面有区别，WAP版一般

1.一般是图片+文字+列表，图片与文字的配合不能使用环绕效果；需要用自上而下的摆列；

2.内容的呈现形式一般为列表式结构，一行一个内容；例如说产品列表，新闻列表；

3.背景等使用可拉伸的素材，才可将元素铺满；

4.页面如有背景，尽量两边使用渐变背景进行融合；

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航