移动终端学习一:css3 Media Queries简介
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>
width - viewport的宽度 height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
移动终端学习一:css3 Media Queries简介的更多相关文章
- 移动终端学习1:css3 Media Queries简介
移动终端学习之1:css3 Media Queries简介 1.简介 这篇文章写的不错,我就不重复了,来个链接:http://www.w3cplus.com/content/css3-media-qu ...
- CSS3 Media Queries 简介
原文链接:Introduction to CSS3 Media Queries 原文日期: 2014年2月21日 翻译日期: 2014年2月26日 翻译人员: 铁锚 简介 随着移动设备的日益普及,we ...
- CSS3学习教程:Media Queries详解
说起CSS3的新特性,就不得不提到 Media Queries . Media Queries 的引入,其作用就是允许添加表达式用以确定媒体的情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- [转]响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- CSS3 Media Queries模板:max-width和min-width
CSS3 Media Queries模板 CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满 ...
- CSS3 Media Queries 片段
CSS3 Media Queries片段 在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段. 移动端Media Queries片段 iPhone5 @medi ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
随机推荐
- Outlook接收qq的邮件
1.先去qq邮箱,设置,账户 开启pop3服务,假如之前开启过,最好关闭之后重新开启 最新版本的必须使用邮箱的独立密码才可以收取邮件 (否则就算你之前开通了,也无法用你的qq账号和密码收取邮件的) 2 ...
- 开源的文件比较工具:WinMerge,KDiff3,diffuse
为了寻找免费的BeyondCompare的替代品,最后经过实用,找到如下一些: 1.diffuse 感受:如果仅仅是比较两个文本类的文件,这个软件也就够用了. 安装好后,对着文件点击右键,会出现&qu ...
- scaleform 注意事项
在使用 自带的UI .fla 里面的组建时 需要把自己建立的fla进行如下设置. 文件-发布设置-flash-脚本actionscript3.0设置——舞台:自动声明舞台实例
- values of type NSInteger should not be used as format arguments; 关于Xcode中烦人的32位与64位警告处理方法.
http://stackoverflow.com/questions/16075559/why-does-an-nsinteger-variable-have-to-be-casted-to-long ...
- 基于WebForm+EasyUI的业务管理系统形成之旅 -- 施工计划安排(Ⅶ)
上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 首页Portal界面拖拽>,主要介绍首页随客户喜好安排区块位置,更好的实现用户体验. 这两天将项目中施工计划管理归纳总结 ...
- GIS数据格式:Shapefile
转自:http://lab.osgeo.cn/2449.html Shapefile是ESRI提出的数据格式,随着ArcView GIS 3.x发布,属于简单要素类.Shapefile由于其数据结构简 ...
- LightOJ 1214 Large Division 水题
java有大数模板 import java.util.Scanner; import java.math.*; public class Main { public static void main( ...
- vs212创建mvc3项目,添加ADO.NET实体数据模型时产生 XXXX.Desiger.cs 文件为空
vs212创建mvc3项目,发现添加ADO.NET实体数据模型时,产生StoreDB.Desiger.cs文件为空 产生StoreDB.Desiger.cs文件为空 原因是,在vs2012中,添加AD ...
- sr4000自带API和opencv结合获取图像
/* * ===================================================================================== * * Filen ...
- Javaweb之JavaScript结合(二)
1.js的String对象 ** 创建String对象 *** var str = "abc"; ** 方法和属性(文档) *** 属性 length:字符串的长度 *** 方法 ...