宁夏昱皓软件咨询热线0951-5988193(8:30-18:00) 170 4590 6999/153 7895 1724(24H)
搜索
当前位置:首页 >> 媒体中心 >> 常见问题 >> 正文
微信h5二次开发之页面自适应大小
发布时间:2017-02-18
来源: 昱皓软件
阅读量:


微信h5页面制作,就是html5技术,div+css。


在html标签中导入标签<mate>:<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.3, maximum-scale=2.0, user-scalable=yes" />

h5.jpg


解释

content属性值 :


width:可视区域的宽度,值可为数字或关键词device-width

height:同width

intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放

maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别,

maximum-scale:用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。

user-scalable:是否可对页面进行缩放,no 禁止缩放

注:


1,所有的缩放值都必须在0.01-10的范围之内

2, minimum-scale、maximum-scale要么写值,要不留这两个

3, 不使用绝对宽度

4, 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素,这一条非常重要。具体说,CSS代码不能指定像素宽度(width:xxx px; )只能指定百分比宽度(width: xx%或者width:auto)

5, 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)。

6,流动布局

各个区块的位置都是浮动的,不是固定不变的。

HTML代码

.main {

float: right;

width: 70%;

}

.leftBar {

float: left;

width: 25%;

}

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

另外,绝对定位(position: absolute)的使用,也要非常小心。

7, 图片的自适应

图片的宽度和高度要按百分比来设定,千万不可以设定成固定大小。

HTML代码 <img width="95%" src="" alt="" />


信息检索
搜索
昱皓软件官方微博

官方微博

昱皓软件官方微信

官方微信

电话:0951-5988193(8:30-17:30)

邮箱:master@yuhaosoft.com.cn

24H:170 4590 6999、153 7895 1724

地址:银川市兴庆区天玺国际中心B座751室

Copyright @ 昱皓软件. YUHAO.LTD  宁ICP备16000928号

您好!您是第999999位访问本站的人