移动终端学习之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 - 用户是否可以手动缩放
 
 

移动终端学习1:css3 Media Queries简介的更多相关文章

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

    移动终端学习之一 css3 Media Queries简介 1.简介 别人写过的我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-querie ...

  2. CSS3 Media Queries 简介

    原文链接:Introduction to CSS3 Media Queries 原文日期: 2014年2月21日 翻译日期: 2014年2月26日 翻译人员: 铁锚 简介 随着移动设备的日益普及,we ...

  3. CSS3学习教程：Media Queries详解

    说起CSS3的新特性,就不得不提到 Media Queries . Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  4. CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  5. 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计

    在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...

  6. [转]响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  7. CSS3 Media Queries模板:max-width和min-width

    CSS3 Media Queries模板 CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满 ...

  8. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

  9. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

随机推荐

  1. Moduli number system

    A number system with moduli is defined by a vector of k moduli, [m1,m2, ···,mk]. The moduli must be p ...

  2. URAL1009

    链接 第一道URAL题 简单递推 #include <iostream> #include<cstdio> #include<cstring> #include&l ...

  3. Google Chrome中的高性能网络(一)

    以下内容是"The Performance of Open Source Applications" (POSA)的草稿, 也是The Architecture of Open S ...

  4. log4net面面观之Repository

    转:http://itrust.cnblogs.com/archive/2006/07/17/452895.html 上回说道:Repository可以说成基于一个log4net配置节创建的log4n ...

  5. .net文件压缩和解压及中文文件夹名称乱码问题

    /**************************注释区域内为引用http://www.cnblogs.com/zhaozhan/archive/2012/05/28/2520701.html的博 ...

  6. The Task: Events, Asynchronous Calls, Async and Await

    The Task: Events, Asynchronous Calls, Async and Await Almost any software application today will lik ...

  7. 处理.NET中的内存泄露

    Fabrice Marguerie是一位软件架构师和咨询师,他在MSDN发表了如何检测和避免.NET程序内存与资源泄漏的文章.此文章描述了编写.NET程序时可能发生的内存与资源泄漏,以及如何避免这些泄 ...

  8. 增加eclipse启动的Tomcat内存的方法 tomcat内存增加

    增加eclipse启动的Tomcat内存的方法 Tomcat一般默认情况下最大最优内存设置为2G 这种情况下,修改Tomcat\bin\catalina.bat,添加如下内容 set JAVA_OPT ...

  9. 程序员需要掌握哪些IT技能

    据Foote Partners的最新调查:如今,你掌握的 IT 技能的多少决定了你薪资的多少,但你不一定非要比开源架构师或Certified Secure Software Life Cycle Pr ...

  10. IE-二级网页打不开

    无法打开二级链接的处理方法是重新注册如下的DLL文件: 在开始—运行里输入: regsvr32 Shdocvw.dll regsvr32 Shell32.dll(注意这个命令,先不用输) regsvr ...