CSS之media query模板
本文共 1036 字，大约阅读时间需要 3 分钟。
在Responsiv的设计中，CSS3的Media是起着非常关键性的作用，也可以说没有CSS3 Media这个属性，Responsiv设计是玩不起来，也是玩不转的。大家都知道Responsiv是为各种不同的设备进行样式设计的，但有一个问题大家或许还处在模糊状态，这个CSS3 Media要如何设置各自的临界点？
那么今天我们就针对上面的问题，一起来探讨一下CSS3 Media Queries在各种不同设备（桌面，手机，笔记本，ios等）下的模板制作。那么Media Queries是如何工作的？那么有关于他的工作原理大家要是感兴趣的话可以参考《CSS3 Media Queries》一文，里面已经做过详细的介绍，这里就不在进行过多的阐述
1.CSS3 Media Queries模板
CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足，如果满足就调用相应的样式。打个比方来说，如果你的Web页面在960px的显屏下显示，那么首先会通过CSS3 Media Queries进行查询，看看有没有设置这个条件样式，如果找到相应的，就会采用对应下的样式，其他的设备是一样的道理。下面具体看看“max-width”和“min-width”模板
1.1 使用max-width
1.2 使用min-width
1.3 max-width和min-width的混合使用
同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用，这个主要用在iPhone,iPads设备上，比如像下面的应用
1.4 iPhone和Smartphones上的运用
max-device-width指的是设备整个渲染区宽度（设备的实际宽度）
1.5 iPads上的运用
针对移动设备的运用，如果你想让样式工作得比较正常，需要在<head>添加“viewport”的meta标签
2.CSS3 Media Queries在标准设备上的运用
下面我们一起来看看CSS3 Meida Queries在标准设备上的运用，大家可以把这些样式加到你的样式文件中，或者单独创建一个名为“responsive.css”文件，并在相应的条件中写上你的样式，让他适合你的设计需求
2.1 1024px显屏
2.2 640px显屏
2.3 iPad横板显屏
2.4 iPad竖板显屏
你可能感兴趣的文章
九度OJ 1091：棋盘游戏 （DP、BFS、DFS、剪枝）
查看>>
九度OJ 1092：Fibonacci （递归）
查看>>
九度OJ 1093：WERTYU （翻译）
查看>>
九度OJ 1094：String Matching（字符串匹配） （计数）
查看>>
九度OJ 1095：2的幂次方 （递归）
查看>>
九度OJ 1471-1480（10/10）
查看>>
九度OJ 1481-1490（7/10）
查看>>
九度OJ 1491-1500（5/10）
查看>>
九度OJ 1501-1510（10/10）
查看>>
业务系统中，报表统计功能如何组织--统计分析模块参考
查看>>
面向数据集成的ETL技术研究
查看>>
DataStage（ETL）技术总结 -- 介绍篇(转载)
查看>>
Greenplum技术浅析--vs oracle RAC
查看>>
框架一
查看>>
Oracle-内存管理解读
查看>>
Oracle-PFILE和SPFILE解读
查看>>
leetcode 13: Roman to Integer
查看>>
a标签中调用js方法
查看>>
js函数中传入的event参数
查看>>
[hive]优化策略
查看>>