如何制作手机自适应网页

来源：互联网发布：滴定分析的数据记录编辑：程序博客网时间：2024/05/01 15:34

1.打开你需要制作手机网页的html或者php等等网页源码文件。在<head></head>之间加入meta标签。

2.向浏览器声明该网页为移动设备自适应网页的meta标签为：

3.将以上标签加入之后保存，再用手机打开即是自适应网页了。

这里介绍一种栅格系统

该系统可以根据手机大小，自动调整布局

具体参见：http://v3.bootcss.com/css/#grid-options

<div class="container"> <div class="row">  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div>  <div class="col-md-1">.col-md-1</div> </div> <div class="row">  <div class="col-md-8">.col-md-8</div>  <div class="col-md-4">.col-md-4</div> </div> <div class="row">  <div class="col-md-4">.col-md-4</div>  <div class="col-md-4">.col-md-4</div>  <div class="col-md-4">.col-md-4</div> </div> <div class="row">  <div class="col-md-6">.col-md-6</div>  <div class="col-md-6">.col-md-6</div> </div></div>

0 0