欢迎访问雨楠喃语官方个人主页!
咨询电话:139-9180-9967
正在浏览:手机网站如何实现自适应
[HTML5]手机网站如何实现自适应
作者:互联网 | 来源:豆瓣 | 发布:2017/2/4 16:24:53 | 浏览:739
一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的?
其实并不难。 首先,在网页代码的头部,加入一行viewport元标签。
<meta name="viewport" content="width=device-width, initial-scale=1" /> 

二. 不使用绝对宽度 由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。

三. 相对大小的字体 字体也不能使用绝对大小(px),而只能使用相对大小(em)。

四. 流动布局(fluid grid) "流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。
.main { float: right; width: 70%; } .leftBar { float: left; width: 25%; }

五. 图片的自适应(fluid image) 除了布局和文本,"自适应网页设计"还必须实现图片的自动缩放。
相关HTML5