移动终端学习之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. Linux -- Ubuntu搭建java开发环境

    Steps 1 Check to see if your Ubuntu Linux operating system architecture is 32-bit or 64-bit, open up ...

  2. poj2723

    把每对钥匙看做一个变量,那两个钥匙看做他的两个状态 每一个开门的要求就是一个条件(xi or xj) 很显然有了2sat的基本要素 2sat是一个判定性问题,而这题求最多能过几个门: 不难想到二分答案 ...

  3. BZOJ_1617_[Usaco2008_Mar]_River_Crossing_渡河问题_(动态规划)

    描述 http://www.lydsy.com/JudgeOnline/problem.php?id=1617 FJ要把\(n\)头奶牛用船运到河对岸.FJ自己在船上要用\(m\)时间,如果运送\(i ...

  4. EasyUI中datagrid的行编辑模式中，找到特定的Editor，并为其添加事件

    有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件 // 绑定事件, index为当前编辑行 var editors = ...

  5. Android学习之路——简易版微信为例（二）

    1 概述 从这篇博文开始,正式进入简易版微信的开发.深入学习前,想谈谈个人对Android程序开发一些理解,不一定正确,只是自己的一点想法.Android程序开发不像我们在大学时候写C控制台程序那样, ...

  6. M-矩阵

    实方阵 $A$ 称为 $M$-矩阵, 是指 $A=cI-B$, $B\geq 0$, $c\geq \rho(B)$. 这里, $M$ 据说是暗指 Minkowski.

  7. C# VS2010中，用微软自带的System.Data.OracleClient来连接Oracle数据库

    由于微软在.Net框架4.0中已经决定撤销使用System.Data.OracleClient,造成在VS2010中无法连接Oracle数据库,但它还依旧存在于.Net架构中,我们可以通过自己引用 C ...

  8. 终于写好了SR4000的一个实用类了

    /*----------------------------------------------------------------------------- *   *   版权声明: *   可以 ...

  9. Jlink烧写图文教程

    ,点击安装          , 插上jlink,安装驱动后,红灯一直亮                                                                 ...

  10. codeforces629C Famil Door and Brackets （dp）

    题意:给你一个长度为n的括号匹配串(不一定恰好匹配),让你在这个串的前面加p串和后面加上q串,使得这个括号串平衡(平衡的含义是对于任意位置的括号前缀和大于等于0,且最后的前缀和为0). 思路:枚举这个 ...