CSS3 Media Query的使用方法

最新推荐文章于 2024-07-19 20:59:54 发布

???Sir

最新推荐文章于 2024-07-19 20:59:54 发布

阅读量174

点赞数

文章标签：前端框架 python

原文链接：https://my.oschina.net/sallency/blog/392852

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

现在移动优先的站点越来越多，响应式网站的设计也越来越普及，更多的前端框架被开发出来，比如众所周知的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既可以做导入，也可以直接做查询。

转载于:https://my.oschina.net/sallency/blog/392852