HTML5移动Web开发（五）——移动设计之CSS媒介查询
CSS媒介查询(media query)是响应式设计中很重要的部分，它帮助你实现更加灵活的移动设计。
看示例代码ch01r06_c.html
<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<script src="modernizr-1.7.min.js"></script>
<style>
body {
margin:0;
padding:0;
background:#FFFFA6;
}
#main section {
display:block;
border:5px solid #29D9C2;
width:60%;
height:120px;
margin:5% auto;
}
@media screen and (min-width: 480px) {
#main {
width:90%;
margin:0 auto;
}
#main > section:first-child {
margin-right:5%;
}
#main section {
float:left;
width:45%;
}
}
</style>
</head>
<body>
<div id="container">
<div id="main">
<section id="top-news"></section>
<section id="sports"></section>
</div>
</div>
</body>
</html>
在窄屏中，这两个section会纵向排列，而在宽屏中会横向排列，这就是CSS媒介查询的功能。在示例中，@media screen and (min-width: 480px){...}的样式会在480px以上宽度的屏幕中启用。
效果图：
桌面优先的网站
除了创建纯粹的桌面网站或者纯粹的移动网站，我们还有其他建站方式，其中就是桌面优先，并且在移动设备上优雅降级。
移动优先网站
另一个方式是移动优先，并在桌面设备上优雅降级。这种方式可以使用以下CSS:
@media only screen and(min-width: 320px){
/* Styles */
}
@media only screen and(min-width: 640px){
/* Styles */
}
@media only screen and(min-width: 800px){
/* Styles */
}
@media only screen and(min-width: 1024px){
/* Styles */
}
一站方式
另一个方式是只创建一个网站，并兼顾移动和桌面设备，而不是只专注其中一个。
HTML5移动Web开发（五）——移动设计之CSS媒介查询的更多相关文章
- html5移动web开发实战必读书记
原文 http://itindex.net/detail/50689-html5-移动-web 主题 HTML5 一.配置移动开发环境 1.各种仿真器.模拟器的下载安装 http://www.mob ...
- HTML5移动Web开发实战 PDF扫描版
<HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...
- HTML5移动Web开发（八）——避免文本字体大小重置
适用设备:iOS.Windows Mobile在一些移动设备上,比方说iPhone,Windows Mobile,当用户把手机切换到横屏时,浏览器会自动地重置文本字体大小.这可能会对我们造成困扰,因为 ...
- HTML5移动Web开发（四）——移动设计
桌面网站的设计趋势是固定布局(fixed layout)或流体布局(fluid layout),而在移动网站中我们应该始终使用流体布局,它可以使你的网站适应不同的设备尺寸. 固定宽度布局(Fixed ...
- 浅淡HTML5移动Web开发
说实话,我们这次开发移动端的项目,整个项目组的人都是第一次,最初立项的时候为是选择native app和web app还争论了一番,最后综合考虑,我们选择了web(我们选择了h5)开发.但从这两种开发 ...
- HTML5移动Web开发（一）——HTML5和移动网站基本概念以及一些模拟器
当前,手机设备发展迅猛.屏幕尺寸各不相同.存储和性能仍有局限性,如何结合HTML5的功能,在多平台上创建高性能.响应式的移动网站,是Web开发者所要面对的首要挑战.HTML5以及移动网站都是很有前景的 ...
- WEB入门.五 页面设计简介
学习内容 Ø XHTML 的发展历程 Ø XHTML 和 HTML 的区别 Ø XHTML的DOCTYPE和基本标签 Ø CSS 常用属性 能力 ...
- HTML5移动Web开发
1. 响应式web设计 说到这个,移动开发面对的屏幕尺寸那叫一个丰富,其中安卓阵营就够让人头痛的.我们在PC端常用的两种布局方式就是固定布局和弹性布局,前者设置一个绝大多数电脑能正常显示的固定宽度居中 ...
- HTML5移动Web开发（九）——优化浏览器视口宽度设置
每个移动设备都有自己默认的视口宽度,如果你不显示的设置它的值,在渲染页面的时候你可能会得不到你想要的效果.比如,如果不设置iPhone的视口宽度,它将会按照980像素的宽度渲染页面,如果你的页面设计不 ...
随机推荐
- windows编程：画线，简单的碰撞检测，简单的帧率锁定
#define WIN32_LEAN_AND_MEAN #include <windows.h> #include <windowsx.h> #include <mmsy ...
- MJExtension笔记(一)
之前有说,看好的编程就去敲好的开源项目:一直觉得这个无从下手,但是这次跟着一点点敲MJExtension,我明白了这句话的深度:其实并不需要去找,每一个三方项目都有很多值得学习的地方:笔记一只记录在敲 ...
- 中国大学MOOC-陈越、何钦铭-数据结构-2016秋期末考试
判断题: 1-1 N2logN和NlogN2具有相同的增长速度. (2分) 1-2 对一棵平衡二叉树,所有非叶结点的平衡因子都是0,当且仅当该树是完全二叉树.(2分) 1-3 无向连通图所有顶点的度之 ...
- 高性能网站架构设计之缓存篇（4）- Redis 主从复制
Redis 的主从复制配置非常容易,但我们先来了解一下它的一些特性. redis 使用异步复制.从 redis 2.8 开始,slave 也会周期性的告诉 master 现在的数据量.可能只是个机制, ...
- Centos6.6下安装MariaDB步骤，利用yum进行安装
1.在/etc/yum.repos.d/下建立MariaDB.repo文件 可以在Win下编辑好此文件,然后通过SSH远程复制过去. 2.MariaDB.repo内容要根据MariaDB官方提供的re ...
- Websocket全讲解。跨平台的通讯协议 ！！基于websocket的高并发即时通讯服务器开发。
本博文,保证不用装B的话语和太多专业的语言,保证简单易懂,只要懂JAVAEE开发的人都可以看懂. 本博文发表目的是,目前网上针对Websocket的资料太散乱,导致初学者的知识体系零零散散,学习困难加 ...
- EQueue - 一个C#写的开源分布式消息队列的总体介绍
前言 本文想介绍一下前段时间在写enode时,顺便实现的一个分布式消息队列equeue.这个消息队列的思想不是我想出来的,而是通过学习阿里的rocketmq后,自己用c#实现了一个轻量级的简单版本.一 ...
- ASP.NET MVC请求处理管道生命周期的19个关键环节(1-6)
ASP.NET和ASP.NET MVC的HttpApplication请求处理管道有共同的部分和不同之处,本系列将体验ASP.NET MVC请求处理管道生命周期的19个关键环节. ①以IIS6.0为例 ...
- Nim语言的模块化编程
前言 Nim支持把一大段程序分成若干个模块 一个模块就是一个源代码文件 每个模块都拥有它自己的名称空间 模块化可以起到封装(信息隐藏)和分步编译的作用 一个模块可以通过import语句获得另一个模块的 ...
- [浅学] 1、Node.js尝试_安装&运行第一个helloworld
官网:https://nodejs.org/ 介绍:Node.js® is a platform built on Chrome's JavaScript runtime for easily bui ...