@media媒体查询判断ipad和iPhone各版本
Media Queries这功能是非常强大的,他可以让你定制不同的分辨率和设备,并在不改变内容的情况下,让你制作的web页面在不同的分辨率和设备下都能显示正常,并且不会因此而丢失样式。
/* 判断ipad */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px){
/* style */
}
/* ipad横屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape){
/* style */
}
/* ipad竖屏 */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait){
/* style */
}
/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){
/* style */
}
/* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
/* style */
}
/* iphone5分辨率 */
screen Width = 320px (css像素)
screen Height = 568px (css像素)
screen Width = 640px (实际像素)
screen Height = 1136px (实际像素)
Device-pixel-ratio:2
/* iphone4-iphone4s分辨率 */
screen Width = 320px (css像素)
screen Height = 480px (css像素)
screen Width = 640px (实际像素)
screen Height = 960px (实际像素)
Device-pixel-ratio:2
一、最大宽度Max Width
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css" />
表示:当屏幕大于或等于900px时,将采用big.css样式来渲染Web页面。
二、多个Media Queries使用
<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
表示:当屏幕在600px-900px之间时采用style.css样式来渲染web页面。
三、设备屏幕的输出宽度Device Width
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />
表示:iphone.css样式适用于最大设备宽度为480px,比如说iPhone上的显示,这里的max-device-width所指的是设备的实际分辨率,也就是指可视面积分辨率
四、not关键字
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
表示:not关键字是用来排除某种制定的媒体类型,换句话来说就是用于排除符合表达式的设备。
五、only关键字
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
六、其他
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
表示:在Media Query中如果没有明确指定Media Type,那么其默认为all
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />
表示:另外还有使用逗号(,)被用来表示并列或者表示或, style.css样式被用在宽度小于或等于480px的手持设备上,或者被用于屏幕宽度大于或等于960px的设备上。
@media媒体查询判断ipad和iPhone各版本相关推荐
- 媒体查询判断ipad和iPhone各版本
/* 判断ipad */ @media only screen and(min-device-width :768px) and(max-device-width :1024px){ /* style ...
- 教你@media媒体查询来适配ipad iphone5678plus 各种屏幕
<style lang="less" rel="stylesheet/less" type="text/less" scoped> ...
- CSS3 @media媒体查询 适配不同尺寸设备的响应式布局(清晰详解)
随着宽屏的不断普及,CSS3出现了@media媒体查询技术 一.了解@Media 相关知识 1.了解Media Queries Media Queries能在不同的条件下使用不同的样式,使页面在不同在 ...
- @media媒体查询
@media媒体查询 媒体查询(media Query)是CSS3新语法 使用 @media 查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏 ...
- css3 media媒体查询器用法总结
原文地址:http://www.cnblogs.com/zhaodifont/p/3858657.html 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6 ...
- 前端CSS @media 媒体查询PC端
前端CSS @media 媒体查询PC端 注意and后面跟一个空格 @media screen and (min-width: 1024px){body{font-size: 12px} } /*&g ...
- @media媒体查询 响应式页面的简单实现
引言 忘记了媒体查询是怎么用的了, 看了一下文档, 随手写的最基本的实现思路, 超级简陋, 不要嫌弃. 图片替换一下就能看到效果.嗯- 还是把文件也存上来吧. 记一下, 下次再忘了直接看一眼就可以了. ...
- CSS Media媒体查询
媒介类型 在CSS2中,媒体查询只使用于<style>和<link>标签中,以media属性存在 media属性用于为不同的媒介类型规定不同的样式 screen 计算机屏幕(默 ...
- 深入理解CSS Media媒体查询
前面的话 一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了媒体属性和使用场景(IE8-浏览器不支持).本文将详细介绍媒体查 ...
最新文章
- “寒冬”下的金三银四跳槽季来了,帮你客观分析一下局面
- 监控神器Prometheus用不对,也就是把新手村的剑
- 第三组 通信一班 030 ISISv6
- PhpStorm代码格式化设置
- Matplotlib画图常用方法总结(全)
- C语言排序方法-----选择排序法
- 我的SWT与数字图像处理总结(3)—SWT如何得到图像某个位置的像素值和相应的RGB的值...
- pytest与unittest区别
- 网易云数据库容灾策略
- 如何使用迅雷下载电骡的资源
- 用纯SQL插入image文件
- mike21换成计算机名称,mike21
- ubuntu google earth 乱码 自动关闭
- 中山一院:华南第一综合性三甲医院的 IT 基础架构转型实践
- addr2line排查地址
- java混淆工具zelix比较_常用的5款java混淆器
- 【Java从零到架构师第③季】【30】SpringMVC-转发_重定向_路径问题总结
- arcgis for js4.x自定义图例位置添加到地图并导出
- 交换机 VLAN 端口类型
- 整合ssh时 犯的愚蠢问题