Web前端开发 --》 如何实现页面同时在移动端和pc端的兼容问题
很简单,只需要在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端的兼容问题的更多相关文章
- Web前端开发最佳实践(4):在页面中添加必要的meta信息
meta标签放置在HTML页面的head中,主要用于标识网站.其中基本上包含了网站的一些描述信息,例如,简介.作者等.这些信息有助于搜索引擎更准确地识别网页的内容,也有助于第三方工具抓取网站基本信息. ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- Web前端开发工程师养成计划【转载】
Web前端开发工程师养成计划(入门篇) 最原始的忠告:这个世界上有想法的人很多,但是有想法又能实现它的人太少! 首先要感谢伟大的Web2.0概念.产品概念.用户体验概念.jQuery插件,是它们在中国 ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- 【转载】WEB前端开发规范文档
本文转载自谈笑涧<WEB前端开发规范文档> 为 新项目写的一份规范文档, 分享给大家. 我想前端开发过程中, 无论是团队开发, 还是单兵做站, 有一份开发文档做规范, 对开发工作都是很有益 ...
- web前端开发最佳实践笔记
一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...
- 面试web前端开发,被打击了
今天我去面试web前端开发,被打击了,也跟我也有一定的关系,最基础的东西我都没回答好,哎! 主要是我在等我有意向的公司给我发offer,闲着没事,刚好又有公司叫我去面试,我抱着多面一家也没有啥子坏处就 ...
- web前端开发和后端开发有什么区别?
web前端分为网页设计师.网页美工.web前端开发工程师 首先网页设计师是对网页的架构.色彩以及网站的整体页面代码负责 网页美工只针对UI这块儿的东西,比如网站是否做的漂亮 web前端开发工程师是负责 ...
随机推荐
- ffmpeg使用分析视频
https://www.cnblogs.com/Finley/p/8646711.html 先存下
- CCPC-Wannafly Winter Camp Day1 (Div2, onsite) 夺宝奇兵
题目描述 wlswls所在的王国有nn个居民(不包括wlswls),他们共有mm件神奇的宝物. 对于第ii件宝物,wlswls可以花费a_iai的金币把它从原来的主人那里买过来. 请问wlswls最 ...
- 计蒜客 蓝桥模拟 B.素数个数
用 0,1,2,3⋯70,1,2,3 \cdots 70,1,2,3⋯7 这 888 个数组成的所有整数中,质数有多少个(每个数字必须用到且只能用一次). 提示:以 000 开始的数字是非法数字. 代 ...
- 【学习】022 ActiveMQ
一.消息中间件概述 1.1消息中间件产生的背景 在客户端与服务器进行通讯时.客户端调用后,必须等待服务对象完成处理返回结果才能继续执行. 客户与服务器对象的生命周期紧密耦合,客户进程和服务对象进程都 ...
- DDD领域驱动设计初探(七):Web层的搭建
前言:好久没更新博客了,每天被该死的业务缠身,今天正好一个模块完成了,继续来完善我们的代码.之前的六篇完成了领域层.应用层.以及基础结构层的部分代码,这篇打算搭建下UI层的代码. DDD领域驱动设计初 ...
- Selenium Java tutorial
https://eyes.applitools.com/app/test-results 1.
- Provider增删改查
package com.fei.provider; import org.apache.ibatis.jdbc.SQL; import com.fei.domain.User; public clas ...
- ES6数据结构Set、Map
一.Set数据结构 Set是无序的不可重复的多个value的集合体,Set结构是类似于数组结构,但是Set中的值都不能重复 常用的属性和方法 size:返回set实例的成员总数 add():添加某个值 ...
- HRESULT: 0x80040228
When run the arcgis engine codes in the console application, may come to the exception: HRESULT: 0x8 ...
- mysql CREATE DATABASE语句 语法
mysql CREATE DATABASE语句 语法 作用:创建数据库. 大理石构件 语法:CREATE DATABASE database_name mysql CREATE DATABASE语句 ...