轻轻松松学CSS:媒体查询

轻轻松松学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:媒体查询的更多相关文章

轻轻松松学CSS:Grid布局
网页布局总的来说经历了以下四个阶段: 1.古老的table表格布局,现在基本已被淘汰. 2.float浮动布局(或者position定位布局),借助float.position 等属性等进行布局,这种 ...
使用 CSS 媒体查询创建响应式网站
简介现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...
css媒体查询：响应式网站
css媒体查询:响应式网站媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...
CSS 媒体查询创建响应式网站
使用 CSS 媒体查询创建响应式网站适用于所有屏幕大小的设计固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...
纯CSS + 媒体查询实现网页导航特效
纯css+媒体查询实现网页导航特效附上效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html lang="en"> <hea ...
巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法
有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozill ...
CSS 媒体查询响应式
媒体查询从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 &l ...
css媒体查询aspect-ratio宽高比在less中的使用
css媒体查询有一个宽高比很方便,aspect-ratio ,可以直接使用宽/高来进行页面适配使用样例如下: // 宽高比在((320/50)+(728/90))/2 两个尺寸中间值以内适 ...
我的Vue之旅、04 CSS媒体查询完全指南（Media Quires）
什么是SCSS Sass: Sass Basics (sass-lang.com) SCSS 是 CSS 的预处理器,它比常规 CSS 更强大. 可以嵌套选择器,更好维护.管理代码. 可以将各种值存储 ...

随机推荐

干！一张图整理了 Python 所有内置异常
在编写程序时,可能会经常报出一些异常,很大一方面原因是自己的疏忽大意导致程序给出错误信息,另一方面是因为有些异常是程序运行时不可避免的,比如在爬虫时可能有几个网页的结构不一致,这时两种结构的网页用同一 ...
IDEA操作jdbc总结
今天学习IDEA操作JDBC,MySQL包导入到项目 // 1.注册数据库的驱动// Driver driver=new com.mysql.jdbc.Driver();// DriverManage ...
【Java】AES加机解密工具类代码
import java.security.NoSuchAlgorithmException; import java.security.SecureRandom; import javax.crypt ...
Butterfly侧边栏引入一言
此教程涉及修改源码背景在修改每页显示7篇文章后,出现了这种情况. 这是完美主义(强迫症)的我所不能忍受的,有什么可以占据这里的呢?{% btn 'https://hitokoto.cn/',一言, ...
Python多进程实现并行化随机森林
文章目录 1. 前言 2. 随机森林原理 3.实现原理 3.1并行化训练 3.1.1训练函数 3.1.2 单进程训练函数生成数据集模块--生成部分数据集单进程训练函数代码 3.2 并行化预测 3. ...
python设计模式之状态模式
python设计模式之状态模式面向对象编程着力于在对象交互时改变它们的状态.在很多问题中,有限状态机(通常名为状态机)是一个非常方便的状态转换建模(并在必要时以数学方式形式化)工具.首先,什么是状态 ...
python对端口进行扫描
使用cocket模块配合多线程对端口进行扫描,后续功能正在思考ing. import socket from multiprocessing.dummy import Pool as ThreadPo ...
OptaPlanner的新约束表达方式 Constraint Streams
有好些时间没有写过关于OptaPlanner的东西了,其实近半年来,OptaPlanner还是推出了不少有用.好用的新特性.包括本文讲到的以Stream接口实现评分编程.关于OptraPlanner的 ...
google protocol buffer——protobuf的使用特性及编码原理
这一系列文章主要是对protocol buffer这种编码格式的使用方式.特点.使用技巧进行说明,并在原生protobuf的基础上进行扩展和优化,使得它能更好地为我们服务. 在上一篇文章中,我们展示了 ...
洛谷P3817 小A的糖果贪心思想
一直觉得洛谷的背景故事很....直接题解吧 #include <bits/stdc++.h> //万能头文件 using namespace std; int a[100002]; // ...

轻轻松松学CSS:媒体查询

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

随机推荐

热门专题