很简单，只需要在html文件中对你引入的css进行一个类似于媒体查询的操作

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="keywords" content="" />

    <title>智能家居</title>

    <link rel="stylesheet" href="./css/common.css">

    <link rel='stylesheet' href='./css/home.css' media='screen and (min-width: 480px)'>

    <link rel='stylesheet' href='./css/homeMobile.css' media='screen and (max-width: 479px)'>

</head>

<body>

</body>

</html>

　　注释为红色的代码含义也就是说  ： 当你浏览器宽度大于480px时，浏览器就会解析./css/home.css这个css文件；

　　　　　　　　　　　　　　　　　　当你历览器宽度小于479px时，浏览器会解析./css/homeMobile.css这个css文件。

而我们浏览器宽度最小宽度一般情况下都不会低于480px；而移动端浏览器宽度一般都为375左右，所以我们判断当小于480px时加载移动端的css样式表

Web前端开发 --》 如何实现页面同时在移动端和pc端的兼容问题的更多相关文章

  1. Web前端开发最佳实践（4）：在页面中添加必要的meta信息

    meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...

  2. Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】

    2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...

  3. 用grunt搭建web前端开发环境

    1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...

  4. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  5. Web前端开发工程师养成计划【转载】

    Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...

  6. Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列十七】

    <Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...

  7. 【转载】WEB前端开发规范文档

    本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...

  8. web前端开发最佳实践笔记

    一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...

  9. 面试web前端开发，被打击了

    今天我去面试web前端开发,被打击了,也跟我也有一定的关系,最基础的东西我都没回答好,哎! 主要是我在等我有意向的公司给我发offer,闲着没事,刚好又有公司叫我去面试,我抱着多面一家也没有啥子坏处就 ...

  10. web前端开发和后端开发有什么区别？

    web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...

随机推荐

  1. flask项目中设置logo

    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}&qu ...

  2. 粘性固定 position:sticky

    在研究rem布局时,无意中看到网易新闻移动端首页的导航栏用上了一个CSS 3的属性粘性定位position:sticky,它是相对定位(position:relative)和固定定位(position ...

  3. 【NOIP2013模拟联考5】军训

    题目 HYSBZ 开学了!今年HYSBZ 有n 个男生来上学,学号为1-n,每个学生都必须参加军训.在这种比较堕落的学校里,每个男生都会有Gi 个女朋友,而且每个人都会有一个欠扁值Hi.学校为了保证军 ...

  4. [洛谷P4823] TJOI2013 拯救小矮人

    问题描述 一群小矮人掉进了一个很深的陷阱里,由于太矮爬不上来,于是他们决定搭一个人梯.即:一个小矮人站在另一小矮人的 肩膀上,知道最顶端的小矮人伸直胳膊可以碰到陷阱口. 对于每一个小矮人,我们知道他从 ...

  5. 【leetcode】1123. Lowest Common Ancestor of Deepest Leaves

    题目如下: Given a rooted binary tree, return the lowest common ancestor of its deepest leaves. Recall th ...

  6. Spring Boot文件上传

    一.创建一个简单的包含WEB依赖的SpringBoot项目 二.配置文件上传的文件大小限制 # 上传文件总的最大值spring.servlet.multipart.max-request-size=1 ...

  7. window7下docker toolbox 启用数据卷报错： Error response from daemon: invalid mode:

    场景:希望把d:\dockerShare文件夹作为数据卷 ,和docker中的centos镜像生成的容器关联. 原来的命令: docker run -d -it --name=edc-centos7 ...

  8. 不同地区Android开发者使用哪些设备测试APP？

    我们的团队密切关注着移动世界的趋势,以便可以提供所有有关变化的最紧密和最重要的信息.春天恰好是对app进行新一轮测试并检查其与不同Android设备兼容性如何的最佳时机.下面让我们一起来看看全世界范围 ...

  9. luogu P1162 填涂颜色 x

    P1162 填涂颜色 题目描述 由数字0 组成的方阵中,有一任意形状闭合圈,闭合圈由数字1构成,围圈时只走上下左右4个方向.现要求把闭合圈内的所有空间都填写成2.例如:6X6的方阵(n=6),涂色前和 ...

  10. [UVA160]Factors and Factorials 题解

    前言 这道题目本身毫无技术含量珂言,但是输出格式珂以调一年 题解 这道题让我们求\(N!\)中每个质数的个数. 一种方法是直接模拟,枚举\(N!\)中的每个元素,然后暴力查看每个数含有有多少质数. 但 ...