在移动端火爆的今日,一个好的web应用不仅仅要有对应移动平台的APP,自己web网页也需要对不同屏幕大小的移动设备进行支持,也就是我们所说的响应式web页面。

本篇文章就来介绍下最常见的响应式页面的实现方式CSS3的 Media Query属性。

  其常见属性:

  device-width,device-height 屏幕宽高

  width,height 窗口宽高

  orientation 设备方向

  resolution 设备分辨率 (DPI决定)

1.外联方式实现Media Query

使用link标签引入外部的css文件,需要添加属性media:

  

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

2.内联式实现Media Query

使用类似语法不过是在<style>标签内实现:

@media screen and (min-width:480px){
		body{
			background:blue;
		}
}

  

CSS3 Media Query的更多相关文章

  1. [转]CSS3 Media Query实现响应布局

    讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果, 设计师提出了响应式布局的设计方案.今 ...

  2. CSS3 Media Query实现响应Web设计(宽度为不同的移动设备)

    现在的屏幕分辨率.小到320px(iPhone),大到2560px或甚至更高(大显示屏).范围内变化很大.除了使用传统的台式机.用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面. 这 ...

  3. CSS3 Media Query 响应式媒体查询

    在CSS中,有一个极其实用的功能:@media 响应式布局.具体来说,就是可以根据客户端的介质和屏幕大小,提供不同的样式表或者只展示样式表中的一部分.通过响应式布局,可以达到只使用单一文件提供多平台的 ...

  4. Respond.js – 让 IE6-8 支持 CSS3 Media Query

    Respond.js 是一个快速.轻量的 polyfill,用于为 IE6-8 以及其它不支持 CSS3 Media Queries 的浏览器提供媒体查询的 min-width 和 max-width ...

  5. 让IE支持CSS3 Media Query实现响应式Web设计

    如今的屏幕分辨率,小至320px(iPhone),大到2560px甚至更高(大显示器),变化范围极大.除了使用传统的台式机,用户会越来越多的通过手机.上网本.iPad一类的平板设备来浏览页面.这种情况 ...

  6. Respond.js让IE6-8支持CSS3 Media Query

    原文地址:http://caibaojian.com/respondjs.html   使用方式   官方demo地址:http://scottjehl.github.com/Respond/test ...

  7. 采用CSS3 Media Query技术适应Android平板屏幕分辨率和屏幕像素密度

    采用HTML5在开发移动应用程序满足各种需求Android分辨率和屏幕的平板设备密度,这是非常麻烦的过程,最终的解决方案是使用css media query,匹配相同的时间分辨率和屏幕像素密度.上进行 ...

  8. HTML-HTML5+CSS3权威指南阅读(二、让IE支持HTML5标签及对CSS3 Media Query的兼容)

    兼容解决 HTML5是在低版本的浏览器(IE8-)的兼容是有限的,类似很多结构性的标 签<header>.<section>.<footer>等在IE8以下不会被识 ...

  9. Respond.js – 让不懂爱的 IE6-8 支持 CSS3 Media Query

    respond.min.js <script src="js/respond.min.js"></script> respond.min.js代码: /*! ...

随机推荐

  1. 图片裁剪:CropZoom插件

    上传个人头像的功能:用户在上传自己的照片后,由于照片尺寸不符合网站的要求,要求用户对照片进行裁剪,最终根据用户裁剪的尺寸生成头像. 用户可以对上传的图片进行自由缩放.裁剪,使之符合彩信图片的大小. C ...

  2. SharePoint 计时器服务无法启动

    摘要: Microsoft SharePoint Server 2010 使用 Windows SharePoint Services 定时 V4 (SPTimerV4) 服务运行大多数系统任务.服务 ...

  3. 《think in python》学习-1

    高能提示:本文大量编程术语与释义,一些释义如有偏差恕不讨论. 纠结学Python 很久了,一年的纠结过程中慢慢的积累了一点对python的认知,但实际语法都未曾接触过,研究backbone的一个例子的 ...

  4. 初学springMVC搭建框架过程及碰到的问题

    刚刚开始学spring框架,因为接了一个网站的项目,想用spring+springMVC+hibernate整合来实现它,现在写下搭建框架的过程及碰到的问题.希望给自己看到也能让大家看到不要踏坑. 一 ...

  5. SQL Server 触发器2

    触发器可以做很多事情,但也会带来很多问题.使用它的技巧在于在适当的时候使用,而不要在不适当的时候使用它们. 触发器的一些常见用途如下: 弹性参照完整性:实现很多DRI不能实现的操作(例如,跨数据库或服 ...

  6. CentOS 7解决Local Time与实际时间相差8小时问题

    通过date -s “2014-12-06 15:00:00”以及timedatectl set-time “2014-12-06 15:00:00” ,以及ntp等方式均知识临时有效,苦恼了我半天. ...

  7. list去重 转载

    http://blog.csdn.net/huaishuming/article/details/47778319 1. 单个List 去重: 如果用的是Set集合就不用怕重复的问题了,如果用的Lis ...

  8. dp状态压缩-铺砖问题

    题目:有一个n行m列的地板,需要用 1*2小砖铺盖,小砖之间互相不能重叠,问有多少种不同的铺法? 示范: 解法:用F[i][j]存放第i行的第j状态(j为十进制,转为二进制即是状态)有多少种方案. 用 ...

  9. cad画指定大小矩形

    指定基点后输入(@长度,宽度)回车 举例:如你要画个600*300的矩形 则输入@600,300回车

  10. ARM Cortex M3(V7-M架构)硬件启动程序 一

    Cortex-m3启动代码分析笔记 启动代码文件名是STM32F10X.S,它的作用先总结下,然后再分析. 启动代码作用一般是: 1)堆和栈的初始化: 2)中断向量表定义: 3)地址重映射及中断向量表 ...