移动终端学习一:css3 Media Queries简介
2024-08-27 04:21:53
移动终端学习之一
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 - 用户是否可以手动缩放
最新文章
- JDK,JRE,JVM,三者的区别于联系?
- 页面加载完成后,触发事件——trigger()
- c++中的<;<;函义
- 使用USRP探索无线世界 Part 1:USRP从入门到追踪飞机飞行轨迹
- [020] Android模拟器访问本地Web应用
- 从BAE到SAE,从SAE又回到BAE
- Codeforces Round #363 (Div. 2) 698B Fix a Tree
- 理解Python的*args, **kwargs
- Linux下Tomcat的安装配置 去掉应用名称
- 调度器(scheduler)
- MD5加密算法(信息摘要算法)、Base64算法
- webApi签名验证
- lazy ideas in programming(编程中的惰性思想)
- Java基础知识点(四)
- verilog-产生axis数据流
- [hive] hive 内部表和外部表
- 如何根据元素的className获取元素?
- React中Props 和 State用法
- 通过Windows Compatibility Pack补充.net core中缺失的api
- <;c:url>;标签相关知识点
热门文章
- 事件流处理框架NEsper for .NET z
- js打印的两种方法
- [Tommas] SQL 中 WITH AS 的用法
- Hacking Secret Ciphers with Python翻译序言
- VS2013 单元测试(使用VS2013自带的单元测试)
- C++之编码问题(Unicode,ASCII,本地默认)
- 【HTML】Advanced5:Accessible Forms
- noip 2014 子矩阵
- Codeforces Round #226 (Div. 2)A. Bear and Raspberry
- (Step by Step)How to setup IP Phone Server(VoIP Server) for free.