<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv = "X-UA-Compatible" content = "IE=edge,
    chrome=1" />
    <meta name="viewport" content="width=device-width,
    minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="Description" content=""/>
    <meta name="keywords" content=""/>
    <title>模板</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js">
    </script>
</head>
<body>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</body>
</html>

这是一个通用的模板，

手机页面需要添加这行代码<meta name="viewport" content="width=device-width, minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

pc版可以用他做自适应页面。

1
2
3
@media (min-width:320px) and (max-width:750px) {
    #header,#content,#footer{width: 100%;}
}

这个是在屏幕宽度在320~750的时候使用这个里面的样式，他就可以在手机版的时候显示为手机样式。

总的来说PC版和手机版用的代码是一样的，不过就是手机版的做了一个判断屏幕宽度新应用了一套样式。

PC端和手机端页面的一丢丢区别的更多相关文章

  1. 【工具】PC端调试手机端 Html 页面的工具

    一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...

  2. 山西大同大学教务处教师端——可在PC端，手机端操作

    解决问题:大同大学教务处官网教师端口一进去就卡住了,点上面一行的菜单无响应 下载方法(学生端 / 教师端  / 验证脚本): 链接:https://pan.baidu.com/s/1MWrJXoPzE ...

  3. 山西大同大学教务处学生端--送给学弟，学妹的礼物，可在PC端，手机端操作

    解决问题:大同大学教务处官网学生端口一进去就卡住了,点上面一行的菜单无响应 转眼已是四年,想想自己大学即将结束,不由得让人感慨啊.这才刚开学几天,我就听到有同学在因为补考,选课的事情发愁.学校官方的教 ...

  4. 判断浏览器是pc端还是手机端

    1. 判断浏览器是pc端还是手机端 <script type="text/javascript"> var browser = { versions: function ...

  5. js 判断pc端或手机端

    <script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...

  6. 关于PC端与手机端随着手指移动图片位置放生变化的拖拽事件

    当按下鼠标时,图片随鼠标移动松开时图片回到原位 drag("div_id") function drag(node_id){ var node = document.getElem ...

  7. 判断是pc端还是手机端，并跳转到相应页面

    <!-- 判断浏览器是否为手机端 -->  <script>     // class     ! function(navigator) {         var user ...

  8. 跳出弹窗页面禁止滚动（PC端和手机端）

    pc端如何实现 1.当弹窗显示时,为body元素添加属性:overflow:hidden, 当关闭弹窗时移除该属性即可2.在弹窗的div上设置 @scroll.stop.prevent 3.前端页面弹 ...

  9. Charles PC端和手机端抓取HTTP和HTTPS协议请求、HTTPS通用抓包规则

    一:HTTP和HTTPS的区别 HTTP是超文本传输协议,被用在Web浏览器和网站服务器之间传递信息,HTTP协议以明文方式发送内容,不提供任何方式的数据加密,因此HTTP协议不适合传输一些敏感信息, ...

随机推荐

  1. poj3254二进制放牛——状态压缩DP

    题目:http://poj.org/problem?id=3254 利用二进制压缩状态,每一个整数代表一行的01情况: 注意预处理出二进制表示下没有两个1相邻的数的方法,我的方法(不知为何)错了,看到 ...

  2. XmlSerialize error: There was an error generating the XML document.

    今天遇到一个很火的问题, 一个c#的class 序列化成xml后抛出异常, 信息为: XmlSerialize error: There was an error generating the XML ...

  3. Day08:继承与派生，多态，封装，绑定与非绑定方法，面向对象高级（反射,__str__,__del__）

    上节课复习:1.编程思想    面向过程        核心是过程二字,过程指的是解决问题的步骤,即先干什么再干什么后干什么        基于该思想编写程序就好比在设计一条流水线,是一种机械式的思维 ...

  4. SLAM细碎内容积累_来自各种技术交流群_持续更新

    imu标定 工具包:imu_utils,   imu_tk,   kalibr 用kalibr做标定,相机和imu的采样频率要求:相机20,imu100.kalibr也可以做鱼眼相机+imu的联合标定 ...

  5. 搭建 Keras

    首先安装ipython ipython安装完成以后出现如下界面 然后安装theano 中途安装因为网络不好,造成超时而停止安装或者停滞不前,则按下Ctrl+C,停止此操作,或者关掉Anaconda P ...

  6. IDEA如何找到接口的实现类

    如何找到接口的实现类 (IDEA))在ApplicationContext上右击 Diagrams ->show diagram 可以看到继承关系: 在ApplicationContext上右击 ...

  7. C++的dllexport和dllimport

    __declspec(dllexport) 声明一个导出函数,是说这个函数要从本DLL导出.我要给别人用.一般用于dll中省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是C ...

  8. http://blog.csdn.net/wujunokay/article/details/44783383

    最近2周面试了一些人,有一些感触. 有的人工作几年,面向对象有几大特性.各特性之间的区别也不清楚:有的人,问他时,他说,这个简单,只是我不会,这些理论的东西在平时工作中,用的少:有的人,不清楚重载和重 ...

  9. 使用PowerDesigner创建物理模型并生成SQL语句在MySQL中生成表

    我使用的PowerDesigner的版本为16.5,创建物理模型后,使用PowerDesigner生成的SQL语句,在MySQL中创建表. 1. 打开Power Designer软件,在弹出的欢迎对话 ...

  10. 云服务器、虚拟主机和VPS的区别

    虚拟主机就是利用网络空间技术,把一台服务器分成许多的"虚拟"的主机,每一台网络空间都具有独立的域名和IP地址,具有完整的Internet服务器功能.网络空间之间完全独立,在外界看来 ...