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

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

<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<meta name="format-detection" content="telephone=no">

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>

如何制作手机自适应网页相关推荐

  1. 何制作手机自适应网页

    何制作手机自适应网页 将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单,可以利用meta标签声明. 工具/原料 sublime text 方法/步骤 1 打开你需要制作手机网页的ht ...

  2. 将PC网站转化为手机自适应网页或者自己制作手机自适应网页其实很简单,可以利用meta标签声明。

    web网页转化手机自适应网页三步走: 1.打开你需要制作手机网页的html或者php等等网页源码文件.在<head></head>之间加入meta标签. 2.向浏览器声明该网页 ...

  3. JS:PC网站转化为手机自适应网页

    说明:已完成网站pc端开发,后因客户需要手机端,遂要实现以下功能: pc电脑访问显示原pc端网页: 手机端访问该网页,自动跳转至手机版网页 方法一: 不改变源码,web网页转化手机自适应网页: 打开你 ...

  4. php开发网页可自适应屏幕,怎样实现手机自适应网页的大小

    这次给大家带来怎样实现手机自适应网页的大小,实现手机自适应网页的大小的注意事项有哪些,下面就是实战案例,一起来看一下. 工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改 ...

  5. 手机版网页设计注意事项

    用手机上网时,有些网站会无法正常显示,因为这些网页是设计在电脑上看的,如果网页开发者没有考虑到手机的软硬件特性以及人们的阅读习惯,就无法设计出手机上方便阅读的网页.说的简单,但是要把既有网页砍掉重练. ...

  6. CSS自适应网页制作教程

    自适应网页即是响应式网页,所谓的响应式网页就是,同样的一个网址,在电脑,平板,手机浏览的时候,样式更着改变,这就是简单的一个解释,更合理的解释就是,网页根据屏幕的大小会变得自适应,就会让网站看起来很自 ...

  7. 如何设计制作自适应网页

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  8. 手机web——自适应网页设计(html/css控制) - 51CTO.COM

    手机web--自适应网页设计(html/css控制) - 51CTO.COM 一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头 ...

  9. css 网页整体缩小_css实现缩放自适应网页--手机web

    一. 允许网页宽度自动调整: "自适应网页设计"到底是怎么做到的? 其实并不难. 首先,在网页代码的头部,加入一行viewport元标签. viewport是网页默认的宽度和高度, ...

  10. 蚂蚁分类信息系统PC手机网址自适应,网页自适应移动端及根据访问设备自动识别展示手机站或PC站

    蚂蚁分类信息系统PC手机网址自适应,网页自适应移动端及根据访问设备自动识别展示手机站或PC站 本实现方法仅适用于nginx环境,主要是使用 Nginx 内置 $http_user_agent 变量来区 ...

最新文章

  1. Ms Press China MVP-书评活动-王万利 Microsoft Active Directory Administrator's Pocket Consultant...
  2. firefox addons
  3. node 根据图片img url 获取 base64
  4. BugkuCTF-MISC题zip伪加密
  5. npm 是干什么的?
  6. 微型计算机主板上安装的主要部件有,微型计算机的主板上安装的主要部件有()....
  7. Navicat安装(图文教程)
  8. 和平之翼代码生成器 SMEU 版 4.0.0 RC 宝船候选版发布
  9. dgl._ffi.base.DGLError: Cannot assign node feature “n_feat“ on device cuda:0 to a graph on device
  10. [转载] Python3接口自动化框架:第三方openpyxl库读取excel之命名元组namedtuple承载数据
  11. python float转化为int_python – 将矩阵的某些列从float转换为int
  12. 开源OA办公平台功能介绍:应用市场之固定资产管理(一)功能设计
  13. 【推荐系统】音乐推荐系统02
  14. Java结合docx4j生成docx文件
  15. 传统存储方式_制造核心系统传统存储升级全闪存F900或混闪V7000F实施方案在线探讨...
  16. 英语四六级选择题自动判卷算法
  17. linux的dlan脚本,Linux DLNA
  18. 简简单单批量安装windows主机
  19. arm mali 天梯图_最全处理器排名:2017年处理器天梯图
  20. 【题目】一个信道的比特速率为4Mbps,信号的传播延迟为20ms,数据帧的大小为10^4比特,采用滑动串口协议,不考虑帧的生成时间,支持捎带应答,那么帧序号应为多少bit?

热门文章

  1. 【生活日记】最近心态不好啊,沉不住气
  2. Visual Studio如何导入码云项目?
  3. 记12306货运系统“抢订空车”插件的编写--chrome插件各部分的交互
  4. HTML+CSS大作业——中华美德文化(6页) HTML+CSS+JavaScript 中国传统美德文化网页HTML代码
  5. gcf,gca,gco的区别
  6. Java进阶架构实战——Redis在京东到家的订单中的使用
  7. 如何使用robots.txt及其详解
  8. 银行业务模拟系统的设计与实现(C语言)
  9. 第五模块 常用邮件沟通场景(1):求职信
  10. html语言的特殊符号,特殊符号