移动终端学习之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. FORM - 实现某数据项自动按记录序号加一操作

    ---- 设块名为VO,要操作的数据项为VO_ID,在该块中建立块级触发子WHEN-CREATE- RECORD,每当生成新记录时VO_ID就会自动加一了,加入如下代码: :VO_ID:=:Syste ...

  2. Dom4j的使用(全而好的文章)

        版权声明: 本文由冰云完成,首发于CSDN,未经许可,不得使用于任何商业用途. 文中代码部分引用自DOM4J文档. 欢迎转载,但请保持文章及版权声明完整. 如需联络请发邮件:icecloud( ...

  3. Error building results for action sayHello in namespace /inteceptor -

    原因:不知道如何编译此 struts.xml ,解决方法:导入struts-default文件: <package name="test"  namespace=" ...

  4. MVC——数据库增删改查(aspx)

    MVC: V(View) :视图→就是页面的模板 C(Control): 控制器→客户主要面对的就是控制器, M(Model):模板→在模板里面主要就是写关于数据库的各种增删改查的方法 它们之间的关系 ...

  5. Linux kernel ‘lbs_debugfs_write’函数数字错误漏洞

    漏洞名称: Linux kernel ‘lbs_debugfs_write’函数数字错误漏洞 CNNVD编号: CNNVD-201311-421 发布时间: 2013-11-29 更新时间: 2013 ...

  6. （转载）PHP的内存限制 Allowed memory size of 134217728 bytes exhausted (tried to allocate 1099 bytes) in

    (转载)http://blog.csdn.net/beyondlpf/article/details/7794028 Fatal error: Allowed memory size of 13421 ...

  7. java CopyOnWriteArrayList的使用

    除了加锁外,其实还有一种方式可以防止并发修改异常,这就是将读写分离技术(不是数据库上的). 先回顾一下一个常识: 1.JAVA中“=”操作只是将引用和某个对象关联,假如同时有一个线程将引用指向另外一个 ...

  8. 用Oracle的TRIM函数去除字符串首尾指定字符

    去掉首尾空格 SELECT TRIM(' abc '), ltrim(' abc '), rtrim(' abc ') FROM dual; 去掉首尾的其他字符 SELECT /*TRIM(';a;b ...

  9. .net软件自动化测试笔记（API-1）

    .net 软件测试自动化之道 API(Application Programming Interface)包括单元测试(Unit Testing),模块测试(Module Testing),组件测试( ...

  10. linux内存分配机制

    这几天在观察apache使用内存情况,所以特意了解了下linux的内存机制,发现一篇写得还不错.转来看看. 一般来说在ps aux中看到的rss就是进程所占用的物理内存.但是如果将所有程序的rss加起 ...