移动终端学习一:css3 Media Queries简介
移动终端学习之一
css3 Media Queries简介
1.简介
别人写过的我就不重复了，来个链接：http://www.w3cplus.com/content/css3-media-queries
2.页面中引入媒体类型方法也有多种：
1、link方法引入
<link rel="stylesheet" type="text/css" href="../css/print.css" media="screen and (min-width:900px)" />
2、xml方式引入
<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>
3、@import方式引入
但这种使用方法在ie6-7都不被支持 如
样式文件中调用另一个样式文件：
@import url("css/reset.css") screen;
@import url("css/print.css") print;
在<head></head>中调用：
<head>
<style type="text/css">
@import url("css/style.css") all;
</style>
</head>
4、@media引入
样式文件中使用：
@media screen{
选择器{
属性：属性值；
}
}
在<head></head>中的<style>...</style>中调用：
<head>
<style type="text/css">
@media screen{
选择器{
属性：属性值；
}
}
</style>
</head>
3.CSS3 Media Queries在标准设备上的运用
<meta content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" name="viewport" />
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
