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 ...
最新文章
- 前端入门(雷云特效,css)
- 深度学习初学者使用Keras构建和部署CNN模型
- Centos7安装配置Xhgui
- f12控制台如何查看consul_如何打印consul的错误信息
- linux端口命令是什么意思,cmd和linux的查看端口命令是什么?
- 为什么写C语言弹不出窗口,居然还有SB说C写不出窗口的..
- MQ如何防止消息丢失
- nginx安装和配置实例
- linux常用命令笔记大全
- 数据--第34课 - 二叉树的深层性质
- 几个找pdf资源的网站
- 计算机考试怎么做word,word怎么做弧形文字
- 中国象棋棋盘java_JAVA中用程序绘制国际象棋与中国象棋棋盘
- 连接到物联网的12中通信技术
- 互联网创业成功之道(三):网站支付功能配置
- 网易云课堂 Service Worker 运用与实践
- struts2+Hibernate实现名片管理系统
- SpaceX 预计2至3年内开始环球客运测试;北斗卫星导航系统完成全球组网
- 国际营销管理驾驶舱的设计
- 基于Simulink搭建的汽车14自由度整车动力学模型,适用于研究各种工况下面的车辆动力学仿真,包含汽车侧倾行为
热门文章
- boost线程指南手册
- 【Django 2021年最新版教程15】数据库定义 models字段类型 限制 用法 总结
- gradle错误 dependency.systemPath‘ for com.alibaba:jconsole:jar must specify an absolute path
- 将linux系统分区变成逻辑卷,linux运维基础知识-系统分区及LVM逻辑卷的创建
- MyBatis学习(四)MyBatis缓存
- JavaSE基础——面向对象
- 基于SSM的猫头鹰在线影院订票网站
- java用户登录窗口怎么删除_JAVA图形界面用户登录后如何关闭登录的对话框
- PHP面向对象之方法重写
- Jackson API 详细汇总 与 使用介绍