<!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. Http客户端跳转和服务器端跳转的区别

    服务器端跳转:      服务器转发全程是没有客户端参与的,都在web container容器内部进行,没有任何服务器和客户端的通信,实际就是服务器内部的跳转. 这次forward, 服务器没有构建H ...

  2. 《Java多线程编程核心技术》读后感（十七）

    使线程具有有序性 正常情况下,线程在运行时多个线程之间执行任务的时机时无序的.可以通过改造代码的方式使它们运行具有有序性 package Seven; public class MyThread ex ...

  3. error: field has incomplete type

    在头文件使用某一自定义的类的指针或引用时,只需要前置声明该类即可,然而如果该类中有静态成员时,必须包含该类的头文件,而不是使用前置声明．

  4. 5. 通过PHP反序列化进行远程代码执行

    php序列化与反序列化 最近准备复现一下ecshop2.x,3.x的注入漏洞,其中涉及到了php反序列化的问题,由于之前太小白 ,导致粗心大意,所以此对php反序列化漏洞进行更详细的分析. 提起php ...

  5. NativeScript官方书籍：1.为什么选择nativescript

    1.为什么选择nativescript 本章介绍 什么是NativeScript nativescript对于移动开发世界意味着什么 NativeScript工作原理 在早期的移动应用程序(前iPho ...

  6. HDU - 4284 Travel（floyd+状压dp）

    Travel PP loves travel. Her dream is to travel around country A which consists of N cities and M roa ...

  7. Sharepoint2013搜索学习笔记之设置业务数据内容源(六)

    Sharepoint搜索爬网组件支持爬Business Data Connectivity Service 承载的外部数据,关于Business Data Connectivity Service设置 ...

  8. ansible无网络安装openstack(Newton)

    概要 apt使用本地源,pip使用本地源 网络环境 物理机环境 网络名 网络地址 VLAN br-ex 192.168.200.250/24 90 br-mgmt 92.0.0.100/24 92 a ...

  9. Solr 6.7学习笔记（04）-- suggester 遇到的问题

    遇到的一些问题: 在前面的Suggest配置完后,我在 “/select” 这个 <requestHandler>里面加上了highlight的配置,可是当我在搜索框里输入字符时,竟然报如 ...

  10. loj #6079. 「2017 山东一轮集训 Day7」养猫【最大费用最大流】

    首先假设全睡觉,然后用费用流考虑平衡要求建立网络流 把1~n的点看作是i-k+1~k这一段的和,连接(i,i+k,1,e[i]-s[i]),表示把i改成吃饭,能对i~i+k-1这一段的点产生影响:然后 ...