轻轻松松学CSS:利用媒体查询创建响应式布局

　媒体查询，针对不同的媒体类型定制不同的样式规则。在网站开发中，可以创建响应式布局。

一、初步认识媒体查询在响应式布局中的应用

下面实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧

 <!DOCTYPE html>

 <html>

 <head>

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

 <meta charset="utf-8">

 <title>test</title>

 <style>

 .wrapper {overflow:auto;}

 #main {margin-left: 4px;}

 #leftsidebar {float: none;width: auto;}

 #menulist {margin:;padding:;}

 .menuitem {

     background:#CDF0F6;

     border:1px solid #d4d4d4;

     border-radius:4px;

     list-style-type:none;

     margin:4px;

     padding:2px;

 }

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

     #leftsidebar {width:200px;float:left;}

     #main {margin-left:216px;}

 }

 </style>

 </head>

 <body>

 <div class="wrapper">

   <div id="leftsidebar">

     <ul id="menulist">

       <li class="menuitem">Menu-item </li>

       <li class="menuitem">Menu-item </li>

       <li class="menuitem">Menu-item </li>

       <li class="menuitem">Menu-item </li>

       <li class="menuitem">Menu-item </li>

    </ul>

   </div>

   <div id="main">

     <h1>重置浏览器窗口查看效果！</h1>

     <p>在屏幕可视窗口尺寸大于  像素时将菜单浮动到页面左侧。</p>

   </div>

 </div>

 </body>

 </html>

关键代码：

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

     #leftsidebar {width: 200px; float: left;}

     #main {margin-left:216px;}

 }

screen，是最常见的媒体类型的一种，用于电脑屏幕，平板电脑，智能手机等
and，操作符，表示同时具备的条件，敲代码时两边一定有空格
min-width:定义输出设备中的页面最小可见区域宽度
以上代码的意思就是在可见区域宽度大于等于480px时，leftsidebar与main左右排列（小于480px时，leftsidebar和main都是块元素，当然是上下排列）

二、媒体查询与bootstrap的姻缘

很多网页都是基于网格设计的，响应式网格视图通常是12列，宽度为100%，在浏览器窗口大小调整时会自动伸缩（和bootstrap的栅格系统是不是相似?）

 <!DOCTYPE html>

 <html>

 <head>

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

 <meta charset="utf-8">

 <title>test</title>

 <style>

 * {

     box-sizing: border-box;

 }

 .row:after {

     content: "";

     clear: both;

     display: block;

 }

 [class*="col-"] {

     float: left;

     padding: 15px;

 }

 html {

     font-family: "Lucida Sans", sans-serif;

 }

 .header {

     background-color: #9933cc;

     color: #ffffff;

     padding: 15px;

 }

 .menu ul {

     list-style-type: none;

     margin: 0;

     padding: 0;

 }

 .menu li {

     padding: 8px;

     margin-bottom: 7px;

     background-color :#33b5e5;

     color: #ffffff;

     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

 }

 .menu li:hover {

     background-color: #0099cc;

 }

 .aside {

     background-color: #33b5e5;

     padding: 15px;

     color: #ffffff;

     text-align: center;

     font-size: 14px;

     box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

 }

 .footer {

     background-color: #0099cc;

     color: #ffffff;

     text-align: center;

     font-size: 12px;

     padding: 15px;

 }

 /* For mobile phones: */

 [class*="col-"] {

     width: 100%;

 }

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

     /* For tablets: */

     .col-m-1 {width: 8.33%;}

     .col-m-2 {width: 16.66%;}

     .col-m-3 {width: 25%;}

     .col-m-4 {width: 33.33%;}

     .col-m-5 {width: 41.66%;}

     .col-m-6 {width: 50%;}

     .col-m-7 {width: 58.33%;}

     .col-m-8 {width: 66.66%;}

     .col-m-9 {width: 75%;}

     .col-m-10 {width: 83.33%;}

     .col-m-11 {width: 91.66%;}

     .col-m-12 {width: 100%;}

 }

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

     /* For desktop: */

     .col-1 {width: 8.33%;}

     .col-2 {width: 16.66%;}

     .col-3 {width: 25%;}

     .col-4 {width: 33.33%;}

     .col-5 {width: 41.66%;}

     .col-6 {width: 50%;}

     .col-7 {width: 58.33%;}

     .col-8 {width: 66.66%;}

     .col-9 {width: 75%;}

     .col-10 {width: 83.33%;}

     .col-11 {width: 91.66%;}

     .col-12 {width: 100%;}

 }

 </style>

 </head>

 <body>

 <div class="header">

 <h1>header</h1>

 </div>

 <div class="row">

 <div class="col-3 col-m-3 menu">

 <ul>

 <li>The Flight</li>

 <li>The City</li>

 <li>The Island</li>

 <li>The Food</li>

 </ul>

 </div>

 <div class="col-6 col-m-9">

 <h1>The City</h1>

 <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>

 </div>

 <div class="col-3 col-m-12">

 <div class="aside">

 <h2>What?</h2>

 <p>Chania is a city on the island of Crete.</p>

 <h2>Where?</h2>

 <p>Crete is a Greek island in the Mediterranean Sea.</p>

 <h2>How?</h2>

 <p>You can reach Chania airport from all over Europe.</p>

 </div>

 </div>

 </div>

 <div class="footer">

 <p>Resize the browser window to see how the content respond to the resizing.</p>

 </div>

 </body>

 </html>

针对桌面设备(电脑):
第一和第三部分跨越 3 列。中间部分跨域 6 列

针对平板设备:
第一部分跨域 3列，第二部分跨越 9 列，第三部分跨域 12 列

<div class="row">

    <div class="col-3 col-m-3">...</div>

    <div class="col-6 col-m-9">...</div>

    <div class="col-3 col-m-12">...</div>

</div>

针对手机设备：上下排列

[class*="col-"] {

    width: 100%;

}

提示：上边的代码中关键的部分还有：

 [class*="col-"]{

     float:left;

 }

 *{

     box-sizing:border-box;

 }

具体原因不再解释，读者有兴趣可以看我的博客里关于浮动和盒子模型部分

上边这个例子和bootstrap更接近了一步
我们再来说说什么是bootstrap？Bootstrap是非常受欢迎的响应式前端框架，它是基于HTML、JavaScript、CSS的，它简洁灵活，使Web开发更加快捷
下面举一个简单例子

 <!DOCTYPE html>

 <html lang="en">

 <head>

   <title>Bootstrap Example</title>

   <meta charset="utf-8">

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

   <link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">

   <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

   <script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>

 </head>

 <body>

 <div class="container">

   <div class="jumbotron">

     <h1>My First Bootstrap Page</h1>

     <p>Resize this responsive page to see the effect!</p>

   </div>

   <div class="row">

     <div class="col-sm-4">

       <h3>Column 1</h3>

       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

     </div>

     <div class="col-sm-4">

       <h3>Column 2</h3>

       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

     </div>

     <div class="col-sm-4">

       <h3>Column 3</h3>

       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>

       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>

     </div>

   </div>

 </div>

 </body>

 </html>

bootstrap栅栏系统css中的col-sm-*的意义：
.col-sm- 小屏幕 平板 (≥768px)
当width>=768px时，Column1、Column2、Column3左中右三列（一行内）
当width<768px时，Column1、Column2、Column3上中下三行排列

由此可见，Bootstrap就是利用了CSS的媒体查询才实现的响应式布局（当然更复杂的功能还得用到JavaScript）！

轻轻松松学CSS:媒体查询的更多相关文章

  1. 轻轻松松学CSS:Grid布局

    网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...

  2. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  3. css媒体查询：响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

  4. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  5. 纯CSS + 媒体查询实现网页导航特效

    纯css+媒体查询实现网页导航特效 附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...

  6. 巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

    有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...

  7. CSS 媒体查询 响应式

    媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...

  8. css媒体查询aspect-ratio宽高比在less中的使用

    css媒体查询有一个 宽高比很方便,aspect-ratio ,可以直接使用宽/高 来进行页面适配   使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内 适 ...

  9. 我的Vue之旅、04 CSS媒体查询完全指南（Media Quires）

    什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...

随机推荐

  1. Windows包管理工具-Chocolatey

    Chocolatey是一款专为Windows系统开发的.基于NuGet的包管理器工具,类似于Node.js的npm,MacOS的 brew,Ubuntu的 apt-get,简称为 choco. Cho ...

  2. 一个简单的CPP处理框架

    好久没有在csdn上写过东西了,这么多年,一方面是工作忙,下班到家也没有开过电脑了,要陪小孩玩: 下面分享一段代码,是用CPP做的一个简单的消息(协议)处理框架: 是通过成员函数指针+map来实现的: ...

  3. 云服务器远程连接mysql数据库

    首先需要在云服务器上,下载安装好mysql与Navicat. mysql下载好以后,打开云端的开始,找到mysql的命令窗,进入输入自己的mysql密码,稍等片刻进入mysql数据库 进入之后输入下列 ...

  4. Python笔试——毕业旅行问题

    毕业旅行问题 小明目前在做一份毕业旅行的规划.打算从北京出发,分别去若干个城市,然后再回到北京,每个城市之间均乘坐高铁,且每个城市只去一次.由于经费有限,希望能够通过合理的路线安排尽可能的省一些路上的 ...

  5. 使用docker快速搭建hive环境

    记录一下使用docker快速搭建部署hive环境 目录 写在前面 步骤 安装docker 安装docker 安装docker-compose 配置docker国内镜像源(可选) 安装git & ...

  6. Python 为什么能支持任意的真值判断？

    本文出自"Python为什么"系列,请查看全部文章 Python 在涉及真值判断(Truth Value Testing)时,语法很简便. 比如,在判断某个对象是否不为 None ...

  7. JS学习第六天

    匿名函数: 定义:function(参数列表){ 要执行的语句块: } 定义名(): 创建日期对象:Date var date=new Date(); alert(date);  不输入则是默认月,日 ...

  8. 编写高质量代码的30条黄金守则-Day 01(首选隐式类型转换)

    编写高质量代码的30条黄金守则-Day 01(首选隐式类型转换),本文由比特飞原创发布,转载务必在文章开头附带链接:https://www.byteflying.com/archives/6455 该 ...

  9. C#LeetCode刷题之#541-反转字符串 II（Reverse String II）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3951 访问. 给定一个字符串和一个整数 k,你需要对从字符串开头 ...

  10. Linux中.bashrc与.bash_profile的对比

    如果你平时在命令行上花费了大量时间,那么你可能会萌生出希望定制 Shell 环境的想法.今天本文就和大家讲解该如何实现你们的这个想法.其实可以通过创建别名.向环境变量 $PATH 添加新目录或更改 S ...