CSS3 之 Media(媒体查询器)
1.响应式Media(媒体查询器)
(1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css” /> 当页面宽度小于或等于600px,调用small.css
转换成css3中的写法为:
@media screen and (max-width: 600px) {
选择器 {
属性:属性值;
}
}
就是将small.css文件的内容放在@media 里
(2)<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" /> 当页面宽度大于等于900px,调用big.css
@media sreen and (min-width: 900px) {
….
}
(3)多个Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
@media (min-width:600px) and (max-width:900px) {
…
}
css3中Media标签的语法: @media mediaType and|not|only (media feature) {
/*CSS-code*/
}
MediaType: (常用)
all : 用于所有设备
Print:用于打印机和打印预览
screen: 用于电脑屏幕,平板电脑,智能手机 (最常用)
speech: 应用于屏幕阅读器等发声设备
Media feature:(常用)
max-width: 定义输出设备中页面最大可见区域宽度
min-width: 定义设备中页面最小可见区域宽度
正式在项目中使用Media
在写media之前,首先设置好<meta>标签
(1)<meta name=“viewport” content=“width=device-width,initial-scale=1.0,user-scalable=no” />
width=device-width : 宽度等于当前设备的宽度
Initial-scale: 初始的缩放比例 (默认1.0,不缩放)
User-scalable: 用户是否可以手动缩放
(2)因为IE8既不支持HTML5也不支持CSS3 @media ,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
(3)现在有很多人的IE浏览器都升级到IE9以上了,所以这个时候就有又很多诡异的事情发生了,例如现在是IE9的浏览器,但是浏览器的文档模式却是IE8 为了防止这种情况,我们需要下面这段代码来让IE的文档渲染模式永远都是最新的
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。
然后在项目中使用
$mobileWidth: calc(100% - 40px); //手机屏幕两边各有20px的空白
@media
only screen and (max-width: $mobileWidth),
only screen and (max-device-width: 720px) {
}
注意下写的这个顺序,以免被覆盖样式:
用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面
@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 992px){ //>=992的设备 }
@media (min-width: 1200){ //>=1200的设备 }
@media (max-width: 1199){ //<=1199的设备 }
@media (max-width: 991px){ //<=991的设备 }
@media (max-width: 767px){ //<=768的设备 }
H5小组合伙研究者咱们出一个新属性吧让他的width:100%;变得更强大,哥几个一拍巴掌合计着成就这样flex(伸缩盒)也横空出世了.
Flex:
设置父元素为display:flex;如果想设置元素的排列方向呢是自上而下还是自下而上呢是从左到右呢还是从右至左呢只需要设置属性flex-direction:row|column;flex-flow: flex-direction flex-wrap|initial|inherit;
CSS3 之 Media(媒体查询器)的更多相关文章
- css3 media媒体查询器用法总结
随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错了,如今淘宝,凡客,携程等等公司都已经在大胆 ...
- css3 media媒体查询器用法总结 兼容ie8以下的方法
总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. http://www.360doc.com/content/14/0704/06/10734150_391862769.shtml ...
- css3 media媒体查询器用法总结(附js兼容方法)
css3 media媒体查询器用法总结 标签:class 代码 style html sp src 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得 ...
- CSS3 media媒体查询器的使用方法
最近几年随着响应式布局的发展,一次开发多次使用,自适应屏幕的响应式网站的需求越来越多.但是怎样使得网站能自适应屏幕呢?这里就需要提到一个css3里面新增的技术了-media媒体查询器. 那么什么是me ...
- 控制页面打印的2种方法(css3的media媒体查询和window.print())
在实际开发中,有时可能会有打印的需求.下面我总结了2种打印的方法,希望对各位小伙伴有所帮助. ①:直接用window.print()方法就可以打印整个页面,下面是一个小demo <!DOCTYP ...
- 总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。(转)
<meta http-equiv="X-UA-Compatible" content="IE=edge"><!--兼容ie-->< ...
- css3的@media媒体查询
css3新功能,根据屏幕大小进行识别. 参考: http://www.runoob.com/cssref/css3-pr-mediaquery.html
- CSS3@media媒体查询
CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...
- CSS Media媒体查询使用大全,完整媒体查询总结
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
随机推荐
- sql业务分割
create Function StrToTable(@str varchar(1000)) Returns @tableName Table ( str2table varchar(50) ) As ...
- 终于开始我的java旅程了!
首先今天先装了jdk1.7 ,找了半天,因为官网是都是让你装1.8的最新版本,地址如下: 所有jdk的历史版本: http://www.oracle.com/technetwork/java/java ...
- 获取Xcode工程所有的类名
有的时候在需求中需要获取工程中所有的类名.例如在获取工程中继承某个类的列表. 核心代码如下: unsigned ; const char **classes = nil; Dl_info info; ...
- 使用C语言开发PHP扩展(转)
本篇文章给大家带来的内容是介绍如何使用C语言给PHP写扩展,,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.在php源码路径的ext文件夹下,新建一个extend_test.de ...
- GitHub看板系统(Project)
/********************************************************************** * GitHub看板系统(Project) * 说明: ...
- .net 程序 动态 控制IIS 站点域名绑定
第一步:引用 导入 System.EnterpriseServices及System.DirectoryServices 两个引用 程序引用: using System.DirectoryServic ...
- knockout为绑定元素生成id
knockout 提供生成了uniqueName的方法,但没有提供生成Id的方法. 感谢stackoverflow提供的思路与方法. 下面是uniqueName的实现方法. ko.bindingHan ...
- 游戏 & Github Page
1. snakewizard.github.io 贪吃蛇小游戏 2. mattbasile.github.io 龙珠 DragonballZ-Battle 3. nathandhyou.github. ...
- Restful levels&HATEOAS详解
RESTful: Rest是一种软件架构风格.设计风格,而不是标准,只是提供了一组设计原则和约束条件.它主要用于客户端和服务器交互类的软件.基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等 ...
- Hello2实例的分析
首先: java EE 上的hello2项目是一个部署在glass fish上的开发源码的java web项目,在终端通过命令行使用maven进行打包成.war文件,最后部署到相关的glass fis ...