移动终端学习之一
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. IPv6 tutorial – Part 5: Address types and global unicast addresses

    https://4sysops.com/archives/ipv6-tutorial-part-5-address-types-and-global-unicast-addresses/ In my ...

  2. URAL1009

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

  3. 深入.net平台和c#编程 学习笔记

    深入.net平台和c#编程 一:理解.nteFramwork与c# 1.1,:Microsoft.net框架概述 1.2:.net框架结构 1.3.:c#语言概述 1.4:体验框架类库的强大功能 二: ...

  4. Jquery 输入金额格式限制 插件

    (function($) { $.fn.extend({ money_mode: function(options) { var defaults = { decimal_length: 2,//小数 ...

  5. 【转】Ubuntu安装基础教程

    原文网址:http://teliute.org/linux/Ubsetup/lesson23/lesson23.html 二十三.安装Ubuntu14.04 返回目录 下一课 14.04 版安装与前面 ...

  6. C#创建https请求并使用pfx证书

    常规情况下创建Web请求,并获取请求数据的代码如下: WebRequest req = WebRequest.Create(url); req.Timeout = 15000; WebResponse ...

  7. ruby编程语言-学习笔记2（第4章 表达式和操作符）

    对属性和数组元素的赋值 o.m + = 1  ===>o.m = (o.m()+ 1)  # 对 o.m()这个方法的结果+1 对数组元素的赋值也是通过 方法调用来完成. 0.[] = 1 == ...

  8. 深入理解OAuth2.0

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  9. BZOJ 2588: Spoj 10628. Count on a tree 主席树+lca

    分析:树上第k小,然后我想说的是主席树并不局限于线性表 详细分析请看http://www.cnblogs.com/rausen/p/4006116.html,讲的很好, 然后因为这个熟悉了主席树,真是 ...

  10. javascript 关于cookie的操作

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