CSS3 Media Queries模板
使用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) { .. }
更新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 */ }
转载于:https://www.cnblogs.com/LoveOrHate/p/4474323.html
CSS3 Media Queries模板相关推荐
- CSS3 Media Queries在iPhone4和iPad上的运用
CSS3 Media Queries的介绍在W3CPlus上的介绍已有好几篇文章了,但自己碰到的问题与解决的文章还是相对的较少.前几天在<修复iPhone上submit按钮bug>上介绍了 ...
- css3 media queries
CSS3 Media Queries模板 作者:大漠 日期:2012-04-04 点击:3183 最早在<CSS3 Media Queries>一文中初探了CSS3的媒体类型和媒体特性 ...
- CSS3 Media Queries:移动 Web 的完美开端
移动时代,是任何 Web 设计与开发者都不能忽视的一个时代,总有一天,你设计的东西将被显示在两种屏幕上,桌面大屏幕和移动小屏幕,如何让同一个网站同时适应完全不同的两种尺寸的屏幕,这是一个很久以来都没有 ...
- CSS:媒体查询 CSS3 Media Queries
定义和使用 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
- CSS3 Media Queries 详细介绍与使用方法,Responsive Web Design 必备技术, 响应式设计
上一篇我们介绍了Responsive Web Design之后,这次要来详细介绍CSS3 Media Queries了. 在上一篇中,我们提到Responsive Web Desig n的实作方式有大 ...
- 响应式web设计之CSS3 Media Queries
开始研究响应式web设计,CSS3 Media Queries是入门. Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表.换句话说,其允许我们在不改变 ...
- CSS3 Media Queries 实现网页自适应
文章转载自:爱思资源网http://www.aseoe.com/show-10-261-1.html 导语 接下来会展示如何运用 HTML5 和 CSS3 来设计一个自适应网页.当今银屏分辨率从 32 ...
- CSS3 Media Queries详细介绍和使用实例
Media Queries直译过来就是"媒体查询",在我们平时的Web页面中head部分常看到这样的一段代码: 复制代码 代码如下: <link href="css ...
- CSS之Responsive设计和CSS3 Media Queries的结合
随着高科技的发展,现在我们浏览网页不在局限于PC机上了,用户可使用上网的设备是越来越多的品种:手机.小笔记本.iPad.Playbook,以及PC机,而且PC机的显展大小各不一致.这样一来不同的屏幕分 ...
- 实践 HTML5 的 CSS3 Media Queries
先来介绍下 media,确切的说应该是 CSS media queries(CSS 媒体查询),媒体查询包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3 ...
最新文章
- 关于服务器返回信息的Unicode转码的方法
- UA MATH571A QE练习 R语言 多重共线性与岭回归
- 【3.1】学习C++之再逢const
- ipad流水布局及其旋转界面view间隔布局调整
- struts2:在Action中使用Servlet的API,设置、读取各种内置对象的属性
- Apache CXF 3.0:JAX-RS 2.0和Bean验证1.1最终一起
- c语言实现配置文件的读写
- python 字符串操作list【:-1】的几种用法
- cdn dashjs_CSS以及JS各种库的在线CDN引用地址
- Asp.net MVC中如何获取控制器的名称
- artemis服务_artemis小结
- c语言源程序是系统,c语言管理系统源代码_图书管理系统c语言程序设计
- python内置高级数据结构
- 诺顿误杀导致系统崩溃--起因及对策
- MyBatis缓存介绍
- iOS自己实现二维码生成与扫描
- UVA 1589 xiangqi
- UVM中超时退出set_timeout函数
- 轻松搭建一个BI销售数据分析系统
- 漫谈程序员系列:怎么告别“混日子”
热门文章
- 区块链 智能合约是有状态的吗
- 大华平台linux命令,大华平台软件简介.docx
- qtvs添加qchart_如何使用Qt Designer在窗体中插入QChartView?
- java队列 notify_java使用线程做一个消息队列,wait,notify
- asp.net mysql数据库连接字符串_如何让您的ASP.NET数据库连接字符串是安全的
- java方法语句错误需要标识符_java错误需要标识符_Java错误 找不到符号
- 2020.10 小米赛第一场 A题
- 一个创建 docker java jar项目案例 docker-sentinel
- 实用———springmvc接收参数校验
- 阶段3 2.Spring_03.Spring的 IOC 和 DI_3 spring基于XML的IOC环境搭建和入门