// IE6、7、8不支持css3    使用响应式一般用bootstrap框架(IE8使用时须引用Respond.js)而不用原生JS

外联式:

<link type="text/css" rel="stylesheet" href="css/link.css" media="only screen and (max-width:480px)" />

//只有480px以下时才引用link.css样式

内联式:

<style>

  @media screen and (min-width: 480px){

    body{background: red;}

  }

</style>

//只有480px以下时才应用{}里的样式

//Bootstrap移动框架使用时必须设置meta标签:

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

//然后引用bootstrap.css文件

<link rel="stylesheet" href="css/bootstrap.min.css">

//判断是否引用respond.js:

<!--[if lt IE 9]>

  <script src="https://oss.maxcdn.com/libs/respong.js/1.3.0.respond.min.js"></script>

<![endif]-->

接触响应式-css3-media判断屏幕分辨率的更多相关文章

  1. 响应式页面-@media介绍

    01 响应式页面-@media介绍,   我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话 ...

  2. python 全栈开发,Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)

    昨日内容回顾 ajax //get post 两种方式 做 请求 get 主要是获取数据 post 提交数据 同一个路由地址 既可以是get请求也可以是post请求 一个路由对应一个函数 get请求 ...

  3. css3 响应式布局 Media Query

    1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

  4. 01 响应式页面-@media介绍,

    我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...

  5. 1 响应式页面-@media介绍,

    我们为什么要写自适应的页面(响应式页面) 众所周知,电脑.平板.手机的屏幕是差距很大的,假如在电脑上写好了一个页面,在电脑上看起来不错,但是如果放到手机上的话,那可能就会乱的一塌糊涂,这时候怎么解决呢 ...

  6. js判断屏幕分辨率的代码

    通过下面的代码判断分辨率 <script language="JavaScript"> <!-- Begin function redirectPage() { ...

  7. 响应式布局@media screen and ( max-width: 像素值 ) {}

    设计思路很简单,首先先定义在标准浏览器下的固定宽度(假如标准浏览器的分辨率为1024px,那么我们设置宽为980px),然后用Media Query来监测浏览器的尺寸变化,当浏览器的分辨率小于1024 ...

  8. 移动WEB 响应式设计 @media总结

    第一种: 在引用样式的时候添加 <link rel="stylesheet" media="mediatype and|not|only (media featur ...

  9. CSS3(@media)判断手机横竖屏

    @media all and (orientation : landscape) { h2{color:red;}/*横屏时字体红色*/ } @media all and (orientation : ...

随机推荐

  1. Selenium 使用过程遇到问题随笔

    最近正在学习Selenium,自学是比较难的,也很感谢网络环境中,各位大大的博文帮助. 也希望在此能够记录一下从小白学习使用selenium测试的过程,也希望能对别人有所帮助. 关于环境部署,以及入门 ...

  2. Hibernate学习笔记①

    ---恢复内容开始--- 1.JavaEE的三层结构 WEB层--Service层--DAO层 2.Hibernate版本 Hibernate3.x  4.x  5.x 4版本是过渡版本 不使用  5 ...

  3. intent,实现两个活动之间数据的传递

    一.Intent 可以启动一个活动,也可以在启动活动的时候传递数据.intent中提供了putExtra()方法,它可以把我们想要传递的数据暂存在intent中,启动了另一个活动后,通过getInte ...

  4. 使用Nginx+CppCMS构建高效Web应用服务器(之二)

    使用Nginx+CppCMS构建高效Web应用服务器(之二) 上一篇 使用Nginx+CppCMS构建高效Web应用服务器(之一) 大致介绍了网站的整体架构,实际上通过调用REST获取数据并没有实现. ...

  5. iOS坐标转换失败?UIKit的屠神坑

    使用UIKit的坐标转换方法convertxxx,千万要注意: 一个控件可以转换子控件上的某个点,到另外一个控件上 但是不能转换自己本身的点,到另外一个控件上,否则会数量加倍 所以,一个控件若想转换本 ...

  6. nginx浏览目录

    [root@localhost domains]# vi web.jd.com location / proxy_set_header X-Forwarded-For $proxy_add_x_for ...

  7. 微服务--webapi实现,脱离iis,脱离tomcat

    前言 微服务,顾名思义就是微小的单一的服务程序,单一流程,单一发布,开发和部署都可独立: 这是我的理解: 但基于web的服务,不管是webservice还是webapi等类似的服务都需要基于iis或者 ...

  8. 共通css初次尝试

    1.网页的主要的html <@fn.html css=["${basePath}/css/help/guideCommon.css${versionControl}"]tit ...

  9. WebService返回数据前台获取并处理JSON的相关问题

    起因: 记录这个问题的起因是一次解答网友的问题,当初自己初次接触webservice时也遇到过,但在写答案时,并没有很深的印象,只是知道webservice在后台返回值的时候,那里是有个坑的.网友问的 ...

  10. 反射实现 Data To Model

    调用 : public ActionResult Index() { DataTable dt = new DataTable(); dt.Columns.Add("Name"); ...