zoukankan html css js c++ java

移动终端学习一: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-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在标准设备上的运用

width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放

查看全文

相关阅读:
python
python
python
python
python
python
python
python
人生苦短，我用python，为什么选择python，python简介
 Mysql-查询