Created
December 1, 2014 03:49
-
-
Save jesseincn/2ec563ea0af452421005 to your computer and use it in GitHub Desktop.
微信wap开发-页面自适应大小
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.3, maximum-scale=2.0, user-scalable=yes" /> | |
<meta content="yes" name="apple-mobile-web-app-capable" /> | |
<meta content="black" name="apple-mobile-web-app-status-bar-style" /> | |
<meta content="telephone=no" name="format-detection" /> | |
1. 使用HTML中的viewport来实现 | |
viewport语法如下: | |
HTML代码 | |
<!--在html代码的<head>...</head>中嵌入下面代码--> | |
<meta name="viewport" | |
content=" | |
height = [pixel_value | device-height] , | |
width = [pixel_value | device-width ] , | |
initial-scale = 0.5 , | |
minimum-scale = float_value , | |
maximum-scale = float_value , | |
user-scalable = [yes | no] , | |
" | |
/> | |
width | |
控制 viewport 的大小,可以指定的一个值或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。 | |
height | |
和 width 相对应,指定高度。 | |
initial-scale | |
初始缩放。即页面初始缩放程度。这是一个浮点值,是页面大小的一个乘数。例如,如果你设置初始缩放为“1.0”,那么,web页面在展现的时候就会以target density分辨率的1:1来展现。如果你设置为“2.0”,那么这个页面就会放大为2倍。 | |
maximum-scale | |
最大缩放。即允许的最大缩放程度。这也是一个浮点值,用以指出页面大小与屏幕大小相比的最大乘数。例如,如果你将这个值设置为“2.0”,那么这个页面与target size相比,最多能放大2倍。 | |
user-scalable | |
用户调整缩放。即用户是否能改变页面缩放程度。如果设置为yes则是允许用户对其进行改变,反之为no。默认值是yes。如果你将其设置为no,那么minimum-scale 和 maximum-scale都将被忽略,因为根本不可能缩放。 | |
(设置屏幕宽度为设备宽度,禁止用户手动调整缩放) | |
HTML代码 | |
<meta name="viewport" content="width=device-width,user-scalable=no" /> | |
(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放) | |
HTML代码 | |
<meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /> | |
注:1). 所有的缩放值都必须在0.01–10的范围之内。 | |
2). minimum-scale、maximum-scale要么写值,要不留这两个 | |
2. 不使用绝对宽度 | |
由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要。 | |
具体说,CSS代码不能指定像素宽度: | |
width:xxx px; | |
只能指定百分比宽度: | |
width: xx%; | |
或者 | |
width:auto; | |
3. CSS的@media规则 | |
同一个CSS文件中,也可以根据不同的屏幕分辨率,选择应用不同的CSS规则。 | |
HTML代码 | |
@media screen and (max-device-width: 400px) { | |
.column { | |
float: none; | |
width:auto; | |
} | |
#sidebar { | |
display:none; | |
} | |
} | |
上面的代码意思是,如果屏幕宽度小于400像素,则column块取消浮动(float:none)、宽度自动调节(width:auto),sidebar块不显示(display:none)。 | |
4. 流动布局 | |
各个区块的位置都是浮动的,不是固定不变的。 | |
HTML代码 | |
.main { | |
float: right; | |
width: 70%; | |
} | |
.leftBar { | |
float: left; | |
width: 25%; | |
} | |
float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。 | |
另外,绝对定位(position: absolute)的使用,也要非常小心。 | |
5. 图片的自适应 | |
图片的宽度和高度要按百分比来设定,千万不可以设定成固定大小。 | |
HTML代码 | |
<img width="95%" src="" alt="" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment