MediaQueries的作用是允许为媒体查询添加表达式来选择不同的样式表css3媒体查询，从而手动适应不同的屏幕帧率。
CSS2好像支持@media属性，能实现的功能比较少。 通常css3媒体查询，它仅用于复制时专门定义的CSS，我们不讨论它。
CSS3的@media属性已经被推导为CSS3上的一种MediaQueries（媒体查询/匹配）。 在CSS3上，查询语句可以用来匹配各种类型的屏幕。
@mediascreen句型：
@media screen and (min-width: 400px) and (max-width: 1200px) {
/* CSS 样式 */
}
在：
媒体类型
screen是媒体类型之一，CSS2.1定义了10种媒体类型：
媒体关键词
and 是关键字，表示逻辑与的关系，例如：
@media screen and (min-width: 1440px) and (max-width: 1700px) {
/* 这些样式将应用到屏幕宽度为 1440px ~ 1700px 之间的屏幕 */
}
其他关键字还包括not（排除某些设备）、only（限制某些设备）。
媒体特征
句型中的min-width是媒体特征，放在一对括号内。 常见媒体特征：
例子
通过@media，屏幕可以动态设置不同长度下#myDocument元素的长度，如下：
@media screen and (max-width: 1440px) {
/* width=1200px 适配宽度 1440px 以下的屏幕 */
#myDocument {
width: 1200px;
}
}
@media screen and (min-width: 1440px) and (max-width: 1700px) {
/* width=1400px 适配宽度在 1440px ~ 1700px 之间的屏幕 */
#myDocument {
width: 1400px;
}
}
@media screen and (min-width: 1700px) and (max-width: 1940px) {
/* width=1600px 适配宽度在 1700px ~ 1940px 之间的屏幕 */
#myDocument {
width: 1600px;
}
}
@media screen and (min-width: 1940px) {
/* width=1800px 适配宽度在 1940px 以上的屏幕 */
#myDocument {
width: 1800px;
}
}
在不懂css也能做背景渐变之前，我总是在我用PS制作的网页上应用一张背景渐变图片。 不过，不久前，我了解到CSS3也可以做背景渐变，而且实现背景渐变的效果要容易得多。 以下是 CSS3 背景渐变的一些技巧。
1. 线性渐变
//自上而下的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(top, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(top, blue, red);/* Firefox*/
background:-o-linear-gradient(top, blue, red);/* Opera, Opera mobile*/
}
登录后复制
//从左往右的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, red);/* Firefox*/
background:-o-linear-gradient(left, blue, red);/* Opera, Opera mobile*/
}
登录后复制
第一个参数是渐变开始的方向，不需要沿着渐变结束的方向； 渐变的方向可以是从上到下css3渐变背景，也可以是从左到右；
第二个参数是渐变开始的颜色；
第三个参数是渐变结束时的颜色。
2.添加stop()函数的线性渐变
p{
width:400px;
height:100px;
padding:5px;
border:1px solid #ccc;
background:-webkit-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Safari, Chrome*/
background:-moz-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Firefox*/
background:-o-linear-gradient(left, blue, #1a82f7 15%, #2F2727 50%,
#1a82f7 85%, red);/* Opera, Opera mobile*/
}
登录后复制
里面代码的意思是：从左边15%，到50%，再到85%，最后到左边，颜色渐变的顺序是蓝色到#1a82f7，#2F2727，#1a82f7到红色。
3.径向渐变（从圆心到圆外）
p{
width:200px;
height:200px;
padding:5px;
border:1px solid #ccc;
background:-webkit-radial-gradient(circle, blue, red);/* Safari, Chrome*/
background:-moz-radial-gradient(circle, blue, red);/* Firefox*/
}
登录后复制
里面代码的意思是：颜色从蓝色到红色从圆心向外围扩散的放射状渐变。
如果将参数circle改为ellipsecss3渐变背景，则为椭圆径向渐变。
4.面向IE浏览器的背景渐变
IE浏览器只能使用IE自带的滤镜来实现渐变。
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
登录后复制
第一个参数：渐变起始位置的颜色；
第二个参数：渐变停止位置的颜色；
第三个参数：渐变类型，0代表垂直渐变，1代表垂直渐变。
注意：IE浏览器的背景渐变设置不需要对背景进行设置，直接使用滤镜即可。
css3的背景渐变功能虽然强大，但也存在浏览器兼容性问题。 目前CSS3背景渐变属性具体支持的是：IE10、FireFox3.6+、Safari4.0+、Chrome、Opera11.1（暂时不支持径向渐变）+、IOS3.2+、OperaMobile11.1、Android 。 为此，我们在使用css3做背景渐变时需要注意浏览器的兼容性。
发表评论