文档章节

CSS3 Media Query的使用方法

big_cat
 big_cat
发布于 2015/03/27 17:32
字数 492
阅读 98
收藏 1

响应小实例看这:简单的响应式页面小示例

现在移动优先的站点越来越多,响应式网站的设计也越来越普及,更多的前端框架被开发出来,比如众所周知的bootstrap,国产的拼图也挺不错,但貌似上了1.0版本就没在更新,其实响应式的机理就是media query。

下面展示几个最基本的使用方法

1、在header中进行媒体查询来判定引入哪个css样式表

   使用media做查询

<link rel="stylesheet" type="text/css"  media="screen and (max-width: 400px)" href="small.css">
<link rel="stylesheet" type="text/css"  media="screen and (min-width:401) and (max-width:800px)" href="middle.css">

  或者使用import命令:

<style type="text/css">
	@import url('small.css') screen and (max-width: 400px);
	@import url('middle.css') screen and (min-width: 401px) and (max-width: 800px);
</style>

   或者直接在style标签里写内联样式,其实就和普通css一样,写在css文件里引入做外联,直接写在style里做内联

<style type="text/css">
@media screen and and (max-width: 400px) {
    //when the width lower to 400px
    body {
    background: #cccccc;
     }
}
@media screen and (min-width: 401px) and (max-width: 800px) {
    //when the width between 401px and 800px
     body {
     background: #ffffff;
     }
}
</style>

以上将会实现当屏幕宽度小于400px时引入small.css,当大于400px小于800px时则引入middle.css

2、在css文件中进行媒体查询

media,在css文件中也可直接编写media query样式

//
@media screen and and (max-width: 400px) {
    //when the width lower to 400px
    body {
    background: #cccccc;
     }
}

@media screen and (min-width: 401px) and (max-width: 800px) {
    //when the width between 401px and 800px
     body {
     background: #ffffff;
     }
}

import,你可以建立一个全局的样式文件,style.css,将响应模块的样式做如下导入即可

//当小于400px时导入small.css
@import url('small.css') screen and (max-width: 400px);
//当大于400px小于800px时导入middle.css
@import url('middle.css') screen and (min-width: 401px) and (max-width: 800px);


其实查询就是两种方式,import是用来做导入判断的,media既可以做导入,也可以直接做查询。

© 著作权归作者所有

共有 人打赏支持
big_cat
粉丝 46
博文 219
码字总数 147544
作品 0
长宁
后端工程师
CSS3 Media Queries

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" /> <link hr......

上赶的大老鼠
2014/02/25
0
0
自适应网页设计代码需要做的6大调整

果你熟悉html,那么自适应设计其实只不过是在原PC端的html代码上做一些改动而已,并非一门新的技术语言。而至于自适应网页设计代码需要做哪些调整,归纳来说,有6个调整是需要做的。 自适应网...

hhj187
2016/08/23
10
0
详解前端响应式布局、响应式图片,与自制栅格系统

响应式布局简介 什么是响应式?同一个页面在不同屏幕尺寸下有不同的布局。 传统的开发方式是PC端开发一套,手机端再开发一套,而使用响应式布局只要开发一套就好了,缺点是CSS比较重。 如下图...

白小明
2017/11/24
0
0
什么是响应式Web设计?怎样进行?

说正事儿。准备在近期的几篇里集中翻译学习一下"响应式Web设计"的相关话题,包括概念、实践方式、案例及观点讨论等方面。相比于从前做的文档译文,这些文章篇幅要长的多(甚至要加分页了!),...

山哥
2012/02/28
0
0
CSS3 Media Queries 实现响应式设计

在 CSS2 中,你可以为不同的媒介设备(如屏幕、打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能。你可以为媒介类型添加某些条件,检测设备并...

BearCatYN
2014/06/10
0
0

没有更多内容

加载失败,请刷新页面

加载更多

WinDbg

参考来自:http://www.cnit.net.cn/?id=225 SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols ctrl + d to open dump_file Microsoft (R) Windows Debugger Version 6.12.0002.633......

xueyuse0012
28分钟前
2
0
OSChina 周五乱弹 —— 想不想把92年的萝莉退货

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @罗马的王:分享松澤由美的单曲《地球ぎ》 很久没看圣斗士星矢了 《地球ぎ》- 松澤由美 手机党少年们想听歌,请使劲儿戳(这里) @开源中国首...

小小编辑
55分钟前
10
1
springBoot条件配置

本篇介绍下,如何通过springboot的条件配置,控制Bean的创建 介绍下开发环境 JDK版本1.8 springboot版本是1.5.2 开发工具为 intellij idea(2018.2) 开发环境为 15款MacBook Pro 前言 很多时候,...

贺小五
今天
1
0
javascript source map 的使用

之前发现VS.NET会为压缩的js文添加一个与文件名同名的.map文件,一直没有搞懂他是用来做什么的,直接删除掉运行时浏览器又会报错,后来google了一直才真正搞懂了这个小小的map文件背后的巨大...

粒子数反转
昨天
1
0
谈谈如何学Linux和它在如今社会的影响

昨天,还在农耕脑力社会,今天已经人工智能技术、大数据、信息技术的科技社会了,高速开展并迅速浸透到当今科技社会的各个方面,Linux日益成为人们信息时代的到来,更加考验我们对信息的处理程...

linux-tao
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部