文档章节

CSS3 Media Query的使用方法

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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

阿里云API网关使用教程

API 网关(API Gateway)提供高性能、高可用的 API 托管服务,帮助用户对外开放其部署在 ECS、容器服务等阿里云产品上的应用,提供完整的 API 发布、管理、维护生命周期管理。用户只需进行简...

mcy0425
29分钟前
4
0
解决远程登陆误按ctrl+s锁屏假死恢复

使用putty时,偶尔发生屏幕假死,不能输入等情况。 后来发现,只要数据ctrl+s,就会假死;输入ctrl+q就可以恢复过来。 很多刚从windows转移到linux上来工作的朋友,在用vi/vim编辑文件时,常常...

HJCui
32分钟前
0
0
@Transactional

事务管理是应用系统开发中必不可少的一部分。Spring 为事务管理提供了丰富的功能支持。Spring 事务管理分为编程式和声明式的两种方式。编程式事务指的是通过编码方式实现事务;声明式事务基于...

asdf08442a
36分钟前
2
0
widows下强制解除8080端口占用问题

使用win+R打开命令窗口 输入以下命令查看哪个任务占用了8080端口 netstat -ano |findstr "8080" 然后通过任务id强制关闭占用该端口的进程 tskill 10044 // 自己的试情况而定,这个ID是LISTE...

_Artisan
45分钟前
2
0
productFlavors简单实用

最近项目中,不同环境需要配置的参数越来越多,为了减少修改代码次数。研究了一下productFlavors的使用方式,总结如下 1. as3.0以上版本使用productFlavors时需要指定一个flavorDimensions,...

火云
48分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部