如何制作手机自适应网页

最新推荐文章于 2024-08-26 14:16:56 发布

chudongfang2015

最新推荐文章于 2024-08-26 14:16:56 发布

阅读量1.3k

点赞数 1

文章标签： html 手机前端

本文链接：https://blog.csdn.net/chudongfang2015/article/details/52870262

版权

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>