Project

General

Profile

手机自适应网站制作要求

技术文档
08/06/2014

1、<head></head>之间加入meta标签。
<meta name=”viewport” content=”width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;”>

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>

<meta name=”format-detection” content=”telephone=no”>
2、“自适应网页设计”的核心,就是CSS3引入的Media Query模块。它的意思就是,自动探测屏幕宽度,然后加载相应的CSS文件。
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css"/>

<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css"/>

3、
img { max-width: 100%;}

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

img { width: 100%; }
4、相对大小的字体:
字体也不能使用绝对大小(px),而只能使用相对大小(em)。
body {font: normal 100% Helvetica, Arial, sans-serif;}
上面的代码指定,字体大小是页面默认大小的100%,即16像素。

h1{font-size: 1.5em;} h1的大小是默认大小的1.5倍,即24像素(24/16=1.5)。

small{font-size: 0.875em;} small元素的大小是默认大小的0.875倍,即14像素(14/16=0.875)。

5、流动布局(flUId grid)(float)

“流动布局”的含义是,各个区块的位置都是浮动的,不是固定不变的。

Files