CSS 部分 首先随便新建一个用来做判断的类,然后通过 Media Queries 来对这个类的 z-index 属性赋予不同的值.这个类仅作为 JavaScript 读取使用,所以需要将其移出屏幕窗口,让浏览者不可见以免引起意外情况. 作为演示,下面代码设置了四种设备状态:桌面普通版.小屏幕桌面版.平板电脑版和手机版. /* default state */ .state-indicator { position: absolute; top: -999em; left: -999em; z-…

Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支持. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 到底什么是Media Queries ? 一般我们在开发HTML + CSS 网页中,都会有一份CSS 来控制网页的样式表. 而随着各式各样不同大小.长宽与解析度的装置的兴起,我们在开发网页只考虑到自己的萤幕显示的如何,是多么的肤浅哪. So,在开发者的萤幕看到的网页或许很漂亮,那,其他人的萤幕呢? 所以,我…

Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支援. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 关于Media Queries 到底什么是Media Queries ? 一般我们在开发HTML + CSS 网页中,都会有一份CSS 来控制网页的样式表. 而随着各式各样不同大小.长宽与解析度的装置的兴起,我们在开发网页只考虑到自己的萤幕显示的如何,是多么的肤浅哪. So,在开发者的萤幕看到的网页或许很漂亮…

媒体查询介绍 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> 上面的media语句表示的是:当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面.首先来看media的语句中包含的内容: 1.scre…

在响应式(或自适应)设计中要用到Media Queries这个CSS属性,但在某些时候我们需要对Media Queries进行动态操作,这时候可以使用Javascript. 如以下Media Queries的代码: @media all and (max-width: 700px) { body { background: #FF0; } } 我们可以使用javascript的window.matchMedia函数来操作Media Queries,该函数现在可以被大部分浏览器(包含IE9以上的版…

一些重要的名词解释: CSS pixels(CSS 像素):详见http://www.w3.org/TR/css3-values/#reference-pixe CSS声明的像素值,可随着放大缩小而放大缩小. Device pixels(设备 像素): Layout viewport(布局视口)设计像素值固定,对web开发者来说基本没有用. HTML元素初始视口区域,css中声明宽度的20%等都是按照这个视口来计算. Visual viewport (设备视口) 屏幕视口,通过这个视口能看到页面…

原文来源:http://webdesignerwall.com 翻译:http://xinyo.org 当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性.网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果.接下来会展示如何运用HTML5和CSS3来设计一个自适应网页. 效果预览代码下载 先看看它的效果 在开始…

在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设备并采用不同的样式表. 例如,你可以把用于大屏幕上显示的样式和用于移动设备的专用样式放在一个样式文档中,这样,在不改变文档内容的情况下,不同的设备可以呈现不同的界面外观.阅读这篇文章学习 CSS3 Media Queries 的基本功能和国外使用 CSS3 的 Media Queries 特性的优秀…

当今银屏分辨率从 320px (iPhone)到 2560px (大屏显示器)或者更大.人们也不再仅仅用台式机来浏览网页,现在有手机,平板电脑等等.所以传统的固定宽度设计形式将不再是个最佳选择,网页设计需要有自适应性.网页的布局需要能够根据不同的分辨率和设备来自动调整,以达到到最佳显示效果.接下来会展示如何运用HTML5和CSS3来设计一个自适应网页. 效果预览代码下载 先看看它的效果 在开始之前,点击最终预览来看看它的效果.改变浏览器的宽度,你将会看到页面布局会跟着自动改变. 概述 当屏幕分辨…

使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (min-width: 900px) { //你的样式放在这里... } max-width和min-width的混合使用 @media screen and (min-width: 600px) and (max-width: 900px) { //你的样式放在这里... } 同时CSS3 Media…