移动终端学习一: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 ...
随机推荐
- Android开发UI之补间动画-Tween Animation
Tween Animation-补间动画 官网链接-http://developer.android.com/reference/android/view/animation/Animation.ht ...
- MySQL sql_slave_skip_counter
因为mysql的主从复制是逻辑复制,所以slave在apply relay log的过程中,经常会遇到错误,而参数sql_slave_skip_counter可以设置跳过多少个event,让slave ...
- 借助 ASR 和 System Center 执行基于 SAN 复制的企业级灾难恢复
Abhishek A. Hemrajani 云 + Enterprise项目经理 对于Azure Site Recovery,我们的优先级已经提升为每个人都可以在任意地点获取易于使用的灾难恢复 (DR ...
- chm 字体修改
今天打开从网络下载的“[MSDN]Csharp编程指南+参考手册.chm”文件,以为看看里面所提供的一些知识点,但是发现文件显示的字体觉得有点别扭,以为能够像网页那样ctrl键+鼠标滚轮就能进行字体的 ...
- 重装mysql步骤
, 卸载MySQL 2, 删除目录 C:\Documents and Settings\All Users\Application Data\MySQL (这个真的有,原先没注意到,删掉!) 如果没有 ...
- oracle 分区和分区索引
一.个人理解:建表时一般都会指定在一个表空间上,但是可能随着表空间扩大,查询越来越慢,分区表就是将一个表实际存在不同的表空间,oracle存储分为块,断,表空间.新建一个表,会给表分配指定大小的段,段 ...
- openstack 虚拟机流量
- OpenSSH 高级运用两则
00×0.相关介绍 OpenSSH(OpenBSD Secure Shell)使用 SSH 通过计算机网络加密通信的实现. 它是替换由 SSH Communications Security 所提供的 ...
- java-1-java开发环境安装及配置-绝对权威
1,下载安装jdk1.8u45 http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html 一般安装目录 ...
- Windows上常见的集中布尔类型的比较
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:Windows上常见的集中布尔类型的比较.