CSS3 Media Queries模板:max-width和min-width
CSS3 Media Queries模板
CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满足就调用相应的样式。打个比方来说,如果你的Web页面在960px的显屏下显示,那么首先会通过CSS3 Media Queries进行查询,看看有没有设置这个条件样式,如果找到相应的,就会采用对应下的样式,其他的设备是一样的道理。下面具体看看“max-width”和“min-width”模板:
使用max-width
@media screen and (max-width: 600px) { //你的样式放在这里.... }
使用min-width
@media screen and (min-width: 900px) { //你的样式放在这里... }
max-width和min-width的混合使用
@media screen and (min-width: 600px) and (max-width: 900px) { //你的样式放在这里... }
同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用,这个主要用在iPhone,iPads设备上,比如像下面的应用:
iPhone和Smartphones上的运用
/* iPhone and Smartphones (portrait and landscape) */ @media screen and (min-device-width : 320px) and (max-device-width: 480px) { //你的样式放在这里... }
max-device-width指的是设备整个渲染区宽度(设备的实际宽度)
iPads上的运用
/* iPads (landscape) */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { //你的样式放在这里... } /* iPads (portrait) */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { //你的样式放在这里... }
针对移动设备的运用,如果你想让样式工作得比较正常,需要在“<head>”添加“viewport”的meta标签:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。
调用独立的样式表
你可能希望在不同的设备下调用不同的样式文件,方便管理或者维护,那么你可以按下面的这种方式进行调用:
<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" /> <link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />
CSS3 Media Queries在标准设备上的运用
下面我们一起来看看CSS3 Meida Queries在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求:
1、1024px显屏
@media screen and (max-width : 1024px) { /* CSS Styles */ }
2、800px显屏
@media screen and (max-width : 800px) { /* CSS Styles */ }
3、640px显屏
@media screen and (max-width : 640px) { /* CSS Styles */ }
4、iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* CSS Styles */ }
5、iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) { /* CSS Styles */ }
iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* CSS Styles */ }
现在有关于这方面的运用也是相当的成熟,twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下:
// Landscape phones and down @media (max-width: 480px) { ... } // Landscape phone to portrait tablet @media (max-width: 768px) { ... } // Portrait tablet to landscape and desktop @media (min-width: 768px) and (max-width: 980px) { ... } // Large desktop @media (min-width: 1200px) { .. }
在bootstrap中的responsive.css采用的是网格布局,大家可以到官网查看或下载其源码进行学习。另外960gs为大家提供了一个Adapt.js也很方便的帮大家实现上述效果。感兴趣的同学可以去了解了解。
更新CSS3 Media Queries模板查询
1、Smartphones (portrait and landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }
2、Smartphones (landscape)
@media only screen and (min-width : 321px) { /* Styles */ }
3、Smartphones (portrait)
@media only screen and (max-width : 320px) { /* Styles */ }
4、iPads (portrait and landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
5、iPads (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ }
6、iPads (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }
7、iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
8、640px显屏
@media screen and (max-width : 640px) { /* CSS Styles */ }
9、800px显屏
@media screen and (max-width : 800px) { /* CSS Styles */ }
10、1024显屏
@media screen and (max-width : 1024px) { /* CSS Styles */ }
11、Desktops and laptops
@media only screen and (min-width : 1224px) { /* Styles */ }
12、Large screens
@media only screen and (min-width : 1824px) { /* Styles */ }
@media only screen and (min-width: 320px) { /* Small screen, non-retina */ } @media
CSS3 Media Queries模板:max-width和min-width的更多相关文章
- CSS3 Media Queries模板
使用max-width @media screen and (max-width: 600px) { //你的样式放在这里.... } 使用min-width @media screen and (m ...
- CSS3 Media Queries在iPhone4和iPad上的运用
CSS3 Media Queries的介绍在W3CPlus上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少.前几天在<修复iPhone上submit按钮bug>上介绍了 ...
- CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- 【CSS3 入门教程系列】CSS3 Media Queries 实现响应式设计
在 CSS2 中,你可以为不同的媒介设备(如屏幕.打印机)指定专用的样式表,而现在借助 CSS3 的 Media Queries 特性,可以更为有效的实现这个功能.你可以为媒介类型添加某些条件,检测设 ...
- [转]How To Use CSS3 Media Queries To Create a Mobile Version of Your Website
CSS3 continues to both excite and frustrate web designers and developers. We are excited about the p ...
- CSS3 Media Queries 详解
说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...
- 【css】CSS3 Media Queries 详解【转】
说起CSS3的新特性,就不得不提到 Media Queries .最近 Max Design 更新的一个泛读列表里,赫然就有关于 Media Queries 的文章.同时位列其中的也有前天我刚刚翻译的 ...
- HTML5实践 -- 使用CSS3 Media Queries实现响应式设计
CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...
- Css3 Media Queries移动页面的样式和图片的适配问题(转)
CSS3 Media Queries 摘自:http://www.w3cplus.com/content/css3-media-queries Media Queries直译过来就是“媒体查询”,在我 ...
随机推荐
- git push 报错:failed to push some refs to 'git@git.xxxx:devops/thor.git'
error: failed to push some refs to 'git@git.caicaivip.com:devops/thor.git' hint: Updates were reject ...
- PHP面试 PHP基础知识 十一(开发环境及相关配置)
开发环境及相关配置 版本控制软件 集中式和分布式 集中式:集中式版本控制工具,版本库集中存放在中央服务器,团队成员里的每个人工作时从中央服务器下载代码,个人修改后再提交到中央服务器 分布式:分布式版本 ...
- python学习笔记:函数
一.函数是什么 函数一词来源于数学,但编程中的「函数」概念,与数学中的函数是有很大不同的,编程中的函数在英文中也有很多不同的叫法.在BASIC中叫做subroutine(子过程或子程序),在Pasca ...
- 第四周总结和实验二Java简单类与对象
实验目的 掌握类的定义,熟悉属性.构造函数.方法的使用,掌握用类作为类型声明变量和方法返回值: 理解类和对象的区别,掌握构造函数的使用,熟悉通过对象名引用实列的方法和属性: 理解static修饰对类. ...
- Android/IOS APP界面设计之尺寸规范
1.尺寸以及分辨率 iPhone的界面尺寸不用多说,640*960是基本OK的,也可以是适应5S的640*1136,马上iPhone 6也快来了(随便吐槽一下网上曝的真机谍照,真是丑到离谱...),只 ...
- Emacs 25.1 error solved: url-http-create-request: Multibyte text in HTTP request
Emacs 25.1 error solved: url-http-create-request: Multibyte text in HTTP request */--> code {colo ...
- python面试题之下面这些是什么意思:@classmethod, @staticmethod, @property?
回答背景知识 这些都是装饰器(decorator).装饰器是一种特殊的函数,要么接受函数作为输入参数,并返回一个函数,要么接受一个类作为输入参数,并返回一个类. @标记是语法糖(syntactic s ...
- webpack--前端自动化工具
一.下载与安装 //全局安装webpack (不推荐) npm i webpack -g npm i webpack-cli -g //局部安装(推荐) npm i webpack -D npm i ...
- Exist/In 使用
exists表示()内子查询语句返回结果不为空说明where条件成立就会执行主sql语句,如果为空就表示where条件不成立,sql语句就 不会执行.not exists和exists相反,子查询语句 ...
- Android应用图标尺寸规范(转)
转自:http://blog.sina.com.cn/s/blog_4b20ae2e0101h84o.html Android Icon Size and Location for Apps DENS ...