移动终端学习1:css3 Media Queries简介

移动终端学习之1: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 - 用户是否可以手动缩放
 
 
posted @ 2013-12-09 16:24  sx_summer  阅读(293)  评论(0)  编辑  收藏  举报