文档章节

CSS3 Media Query的使用方法

big_cat
 big_cat
发布于 2015/03/27 17:32
字数 492
阅读 111
收藏 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
博文 227
码字总数 152058
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

安卓constraintLayout中app:srcCompat设置的图片显示不出来

使用 app:srcCompat 的时候 引入的图片显示不出来的解决方案 首先查看的你的Activity 继承的是那个Activity 如果是继承AppcompatActivity 使用 ImageView的 app:srcCompat 是没有问题的 如果...

雨焰
39分钟前
1
0
MySQL mysqldump数据导出详解

MySQL mysqldump数据导出详解 2016-04-07 11:14 by pursuer.chen, 114348 阅读, 0 评论, 收藏, 编辑 介绍 在日常维护工作当中经常会需要对数据进行导出操作,而mysqldump是导出数据过程中使用...

linjin200
39分钟前
0
0
Lucene 检索时的步骤

用户输入查询语句:lucene AND learned NOT hadoop 搜索主要分为以下几步 第一步、对查询语句进行词法分析,语法分析,及语言处理 词法分析主要用来识别单词和关键字 语法分析主要是根据查询...

kdy1994
40分钟前
2
0
Gradle Implementation vs API configuration

注: 可以把 Implementation理解为java类的private, 使用Implementation则外部依赖本库的代码引用不到本库Implementation的代码, 也就是降低依赖树的层级, 这样就可以避免外部代码编译时候, 导...

SuShine
44分钟前
2
0
pdf安卓手机适配以及ie的兼容 以及隐藏掉下载打印按钮的方式

这是我目前遇到pdf方面最多的问题。 在百度上搜了很多答案,结果都是建议使用插件。而目前百度能搜的插件基本上都是有缺陷的。自己测试了很多插件。最后使用了pdf.js这个插件。这个插件目前完...

流年那么伤
50分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部