标签：style blog color 使用 strong os
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局有它独特的优势，但是也有不少缺点，大家可以揣摩使用。关于优点和缺点，我摘自百度的一段话，内容如下：
优点：
缺点：
但是，存在即是合理的，适当的使用，还是能很好的解决我们目前网站浏览中存在的一些问题。
不谈概念，直奔主题。
一、我们需要在我们的HTML投部增加如下内容：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这几个东西表示什么概念？viewport： 可视窗口，表示浏览器中展示网页的部分。
这些属性控制着设备基本属性，其中可以混合使用，中间以逗号分割。
二、我们需要看看如何开始我们的响应式：
这个时候，我们需要了解一个东西 “media” 我们到W3C找到他的概念。
三，我们如何使用 media 快速开发
我们可以使用media引入外部的CSS文件
<link rel="stylesheet" media="(max-width:480px)" href="mobile.css" />
-- 表示的意思是：在屏幕设备小于等于480像素的时候，加载使用这个CSS文件。
我们可以在CSS文件内部使用media定制不同设备的样式。
@media(max-width：480px) {body{background:blue}}
--表示的意思是：在屏幕设备小于等于480像素的时候，使用这些样式。
下面列举一下media的媒体属性：
当然媒体设备查询还有几个操作符，分别是and，not，only，和逗号。
顾名思义，这几个操作符的含义分别表示“并且”，“不是”，“仅仅”，“或者”这四个词而已。下面举个栗子：
基本内容完毕：补充一个例子，大家可以自己调整浏览器测试：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title></title> <style type="text/css"> .t{width:120px;height:120px;background:black} @media screen and (max-width:479px){ body,html{background:orange;} .t{width:100%;} } @media screen and (min-width:480px) and (max-width:779px){ body,html{background:green;color:#FFF;} .t{background:#FFF;} } @media screen and (min-width:780px){ body,html{background:red;} .t{float:right;} } </style> </head> <body> <h1>请改变浏览器大小</h1> <div class="t"></div> </body> </html>
下面补充一个响应式菜单的例子。预览图就不上了，有兴趣的同学可以复制代码到浏览器自己查看。
实例一：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>响应式导航</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> /* 导航菜单 */ ul{list-style:none;padding0;margin:0} #nav li, #nav li a{display: inline-block;padding: 7px 15px;color: #3b3b3b;} #nav li a:hover{background: #eee;} #nav{background: none;} #nav .active{background: #eee;} .toggle-btn{display: none;} /* Media Queries */ @media (max-width: 767px){ /* 切换按钮 */ .toggle-btn{display: inline-block;font-size: 25px;background: #000;color: #fff;padding: 7px 10px; position: absolute;right: 10px;top:50px;} /* 初始化隐藏关闭按钮 */ #nav .close{display: none;} /* 初始隐藏导航 */ #nav{display: none;} /* 导航为目标状态的时候显示关闭按钮 */ #nav:target .close{display: inline-block;} /* 导航为目标状态时的样式 */ #nav:target{display: block;position: absolute;top: 0;padding-top: 70px;width: 100%;} /* 目标状态下的导航的 ul 标签 */ #nav:target ul{background: #000;} /* 目标状态下的导航的 li 与 a */ #nav:target li, #nav:target li a{display: block;color: #eee;text-align: left;} /* 目标状态下的导航的列表下的 a 标签的悬停样式 */ #nav:target li a:hover{background: #3b3b3b;} /* 目标状态下导航的激活状态的样式 */ #nav:target .active{background: #272727;} } </style> </head> <body > <a href="#nav" class="open toggle-btn">点我</a> <nav id="nav"> <ul> <li><a href="#" class="active">菜单 1</a></li> <li><a href="#">菜单 2</a></li> <li><a href="#">菜单 3</a></li> <li><a href="#">菜单 4</a></li> <li><a href="#">菜单 5</a></li> </ul> <a href="#top" class="close toggle-btn">关我</a> </nav> </body> </html>
:target -- 用来改变页面中锚链接URL所指向的ID样式（如上面#top等），例如你要改变描链接指向#tab的元素字体颜色为蓝色，哪么你可以这样写成#tab:target {color:blue}，若想了解更多的使用方法，建议大家借助搜索引擎。
标签：style blog color 使用 strong os
原文地址：http://www.cnblogs.com/mrsai/p/3851511.html
