第一次写博,在这里记录和分享一些自己学到的东西,最重要的还是看看大牛们的博客,学习学习经验,毕竟作为一名即将面临秋招的大三党,学习和积累已经是刻不容缓的事情了。
博主是一名学过C、C++、Java但都不怎么精通的技术渣,在大二暑假决定要走向前端这条不归路,在这期间自学了html+css、js、jquery和一些常用的PS切图技术,也有几个简单的项目开发经验,但看了各大公司的招聘要求感觉还是远远不够的,于是乎,博主便打算在这个暑假竭尽全力,冲刺秋招!
------------------------------------------------------------------------------此上为前言可忽略-------------------------------------------------------------------------------------
1. 响应式布局需要媒体查询的原因
响应式布局,即为针对任意设备对网页内容进行完美布局的一种显示机制,而媒体查询便可以让我们根据设备显示器的特性为其设定CSS样式,它是由媒体类型和一个或多个检测媒体特性的条件表达式组成的。
2.媒体查询可以检查到的特性
- width:视口宽度
- height:视口高度
- device-width:设备屏幕宽度
- device-height:设备屏幕高度
- orientation:设备放置为横向还是纵向
- aspect-ratio:视口的宽高比
- device-aspect-ratio:设备屏幕的宽高比
- color:每种颜色的位数
- color-index:设备的颜色索引中的颜色数,为非负整数
- monochrome:检测单数缓冲区中没像素所用的位数
- resolution:设备的分辨率
- scan:电视机的扫描方式
- grid:检测输出设备是网格设备还是位图设备
3. 媒体查询语法
-
在css文件内进行媒体查询
eg: 对<div class="box"></div> 在不同的设备中进行css设置
.box{
width: 400px;
height: 200px;
margin: 0 auto;
background-color: red;
}
@media screen and (max-width: 960px){
.box{
background-color: #000000;
}
}
@media screen and (max-width: 768px){
.box{
background-color: #323232;
}
}
@media screen and (max-width: 550px){
.box{
background-color: #eeeeee;
}
}
@media screen and (max-width: 320px){
.box{
background-color: #8800ee;
}
}
-
@import url("common.css") screen (max-width: 768px);
使用CSS中的@import指令在当前样式表中按条件引入其他样式表,但是此操作会增加HTTP请求(影响加载速度),所以要谨慎使用
-
在外部式引入css进行媒体查询
同样是上面的用例:
<link rel="stylesheet" type="text/css" media="screen" href="common.css">设备为显示屏时引入common.css文设备为纵向放置的显示屏时引入cmmon.css文件<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="common.css"> <link rel="stylesheet" type="text/css" media="not screen and (orientation:portrait)" href="common.css">设备为非纵向放置的显示屏时引入common.css文件 <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait) and (min-width:800px)" href="common.css">条件的并列,设备为纵向放置的显示屏并且视口宽度大于800px时引入common.css文件 <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait) and (min-width:800px),projection" href="common.css">媒体查询列表,用逗号隔开的查询条件只要有一个为真便加载common.css文件,全部为假则不加载