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

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

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

    移动终端学习之1:css3 Media Queries简介 1.简介 这篇文章写的不错,我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-qu ...

  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. Oracle MySQL Server 安全漏洞

    漏洞名称: Oracle MySQL Server 安全漏洞 CNNVD编号: CNNVD-201401-317 发布时间: 2014-01-22 更新时间: 2014-01-22 危害等级: 中危  ...

  2. epub3 in action: epub3文件格式简介

    epub3文件就是一个符合epub3标准,以epub为扩展名的zip压缩文件.epub3标准则是基于html5.css3.svg等web标准以及mathML等来展示内容.下图就是一个简单epub3文件 ...

  3. Android命名规范(自定义)

    此规范参考自android源码,并加以改进,仅供个人使用,如果你觉得还有可取之处,可以参考下,以后有好的规则,再补充 总体规范: 类名要清晰,能反映出这个类的作用,最好能达到见名知义的效果 方法名要使 ...

  4. oracle删掉重复数据的语法

    --查询重复数据-- ) --删掉重复数据-- ) );

  5. 尝试加载 Oracle 客户端库时引发 BadImageFormatException。如果在安装 32 位 Oracle 客户端组件的情况下以 64 位模式运行,将出现此问题。

    从10G开始,Oracle提供了一个较为轻量级的客户包,叫做Instant Client. 将它安装好后,就不用再安装庞大的Oracle Client了. 这样一来,只要客户端下载Instant Cl ...

  6. javascript 关于cookie的操作

    <script language=javascript> //获得coolie 的值 function cookie(name){ var cookieArray=document.coo ...

  7. C#父类对象和子类对象之间的转化

    1. 子类到父类 Chinese c = new Chinese(); Person p1 = c;  //从变量c看是一个中国人,所以可以把人的标签贴上去 2. 父类到子类 Chinese c2 = ...

  8. mini2440触摸屏驱动分析

    mini2440驱动分析系列之 ---------------------------------------Mini2440触摸屏程序分析 By JeefJiang July,8th,2009 这是 ...

  9. getchar

    getchar函数每次只从缓冲区中接受一个字符. getchar有一个int型的返回值. 当程序调用getchar时,程序就等着用户按键,用户输入的字符被存放在键盘缓冲区中,直到用户按回车为止(回车字 ...

  10. wuzhicms发送邮件

    //邮件发送 $config = get_cache('sendmail'); $siteconfigs = get_cache('siteconfigs'); $password = decode( ...