移动终端学习之一
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. bzoj1046

    首先这肯定是一道LIS的变形,这次求的是方案,还要求字典序最小 (注意这个字典序最小是指下标最小而不是数最小) 首先预处理以每个数为首,能组成多长的上升序列(这里我们用单调队列解决) 然后按照位置顺序 ...

  2. isIOS9

    function isIOS9() { //获取固件版本 var getOsv = function () { var reg = /OS ((\d+_?){2,3})\s/; if (navigat ...

  3. App Store 加急审核方式

    https://developer.apple.com/contact/app-store/?topic=expedite 1:理由一般是用户安全问题或者崩溃问题成功率会高一些. 如果是崩溃问题,你最 ...

  4. DNS----域名解析系统

    DNS就是域名解析系统,它可以将IP转换成域名,也可以将域名转换成IP 1. 安装DNS服务       开始—〉设置—〉控制面板—〉添加/删除程序—〉添加/删除Windows组件—〉“网络服务”—〉 ...

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

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

  6. [Tommas] UNION 和 UNION ALL 的区别

    UNION指令的目的是将两个 SQL 语句的结果合并起来.从这个角度来看,UNION跟 JOIN 有些许类似,因为这两个指令都可以由多个表格中撷取资料.UNION的一个限制是两个 SQL 语句所产生的 ...

  7. Upgrading to EF6

    In previous versions of EF the code was split between core libraries (primarily System.Data.Entity.d ...

  8. linux多线程大神博客网址

    http://blog.csdn.net/zjf280441589/article/details/43883055

  9. redis ltrim命令

    LTRIM key start stop 相关命令 BLPOP BRPOP BRPOPLPUSH LINDEX LINSERT LLEN LPOP LPUSH LPUSHX LRANGE LREM L ...

  10. HDU-4415 Assassin’s Creed 贪心

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4415 用贪心来解,开始分为两个集合的方法错了,没有考虑之间的相互影响,正确的姿势应该是这样的,分两种情 ...