移动终端学习之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. [转]响应式web设计之CSS3 Media Queries

    开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...

  8. CSS3 Media Queries模板:max-width和min-width

    CSS3 Media Queries模板 CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满 ...

  9. CSS3 Media Queries 片段

    CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...

随机推荐

  1. Ajax实例

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs& ...

  2. response.getWriter().write()与out.print()的区别 (转)

    来自:http://www.cnblogs.com/zhwl/p/3623688.html 1.首先介绍write()和print()方法的区别:  (1).write():仅支持输出字符类型数据,字 ...

  3. ORACLE union order by

    select * from ( select a.id,a.oacode,a.custid,a.custname,a.xsz,a.salename,a.communicationtheme,a.com ...

  4. Openjudge-计算概论(A)-过滤多余的空格

    描述: 一个句子中也许有多个连续空格,过滤掉多余的空格,只留下一个空格. 输入一行,一个字符串(长度不超过200),句子的头和尾都没有空格.输出过滤之后的句子. 样例输入 Hello world.Th ...

  5. 关于label和span设置width无效问题解决方法

    转:http://www.jb51.net/web/113507.html 大家可能不知道默认情况下label.span 设置width 是无效的,只有当display:block时,我们所设置的wi ...

  6. 948. Bag of Tokens

    https://leetcode.com/problems/bag-of-tokens/ 一开始觉得应该是个dp 题,把所有结果搜出来然后max 一下.实现以后发现组合太多了,非常慢,即使加上memo ...

  7. Centos下添加静态路由(临时和永久有效)的操作记录

    公司IDC机房服务器上部署了一套外网LB环境,默认配置的是外网ip的路由地址,由于要和其他内网机器通信,所以需要配置内网ip的路由地址.整个操作过程,记录如下,以供以后参考学习: 1)内网网卡绑定 [ ...

  8. 【Docker】docker常用指令

    开启docker,并设置开机自启动 老式写法: service docker start chkconfig docker on 新式写法: systemctl start docker.servic ...

  9. nodejs mongodb 数据库封装DB类 -转

    使用到了nodejs的插件mongoose,用mongoose操作mongodb其实蛮方便的. 关于mongoose的安装就是 npm install -g mongoose 这个DB类的数据库配置是 ...

  10. 标准的sql执行顺序

    正常情况下是先join再进行where过滤