css 媒体查询 注意点

1, 媒体查询表达式之间还可以用逗号,@media (max-width:800px), print  它表示或的意思 @media (max-width: 800px) OR print;

2, not 是对整个表达式的否定 @media not all and (min-width: 765px),  相当于 @media not (all and (min-width: 765px)) 如果不想这样的做,可以用,进行分割,@media not all, min-width:765px

3, only: 防止老旧的浏览器,它不支持媒体查询,而应用到给定的样式。

  media = “only screen and (max-width:800px)”

老旧的浏览器,它会在第一个空格处,也就是only 的后面,把后面的文字忽略掉,解析为 media=”only”,  它只会解析第一个单词,media 属性中没有定义only, 所以这里设置的样式就会被忽略掉。

media =“ screen and (max-width:800px)”

老旧的浏览器,它只会解析第一个单词 所以成为了 media =”screen” ,可以看到这里定义的样式,就会应用到html 文件中。

时间: 2024-11-06 14:28:29

css 媒体查询 注意点的相关文章

ie浏览器不兼容css媒体查询的解决办法

考虑到在不同分辨率下,网站页面依然能显示一致,除了通过js来控制,css媒体查询更为方便,而痛点在于ie8不支持. 我们可以通过respond.js库来解决,这个插件的原理很简单: 将head中所有外部引入的css文件路径取出来存储在一个数组中,遍历数组,并一个个发送AJAX请求,AJAX回调后,分析response中的media query的min-width和max-width语法,它仅仅支持min-width和max-width,分析出viewport变化区间对应相应的css块,页面初始化

CSS 媒体查询 响应式

媒体查询 从 CSS 版本 2 开始,就可以通过媒体类型在 CSS 中获得媒体支持.如果您曾经使用过打印样式表,那么您可能已经使用过媒体类型.清单 1 展示了一个示例. 清单 1. 使用媒体类型 <link rel="stylesheet" type="text/css" href="site.css" media="screen" /> <link rel="stylesheet" ty

CSS媒体查询:菜鸟笔记

CSS媒体查询 媒体查询包含了一个媒体类型和至少一个使用如高度.宽度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. 语法 媒体查询包含了一个媒体类型和如css3规范中描述的包含了一个或多个表达式的媒体属性,这些媒体属性会被解析成真或假.如果媒体查询中的媒体类型与文档要展示的设备相符则查询结果为真,并且媒体查询中的所有表达式为真. <!--link元素中的css媒体查询--> <link rel="style

巧妙使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的好方法

有无数的理由要求我们在任何时候都应该知道用户是使用的什么设备浏览我们的网站——宽屏,普通屏,平板,手机?知道这些特征,我们web应用的CSS和JavaScript才能同步做相应的操作.在给Mozilla Developer Networks改版设计的过程中,我发现使用CSS媒体查询(media queries)虽然非常的有效,但有时,JavaScript却不能及时知道用户浏览设备的状态.浏览网站的用户使用的是桌面电脑,还是平板,还是手机?这对于CSS来说很容易,但CSS却无法将这些信息告诉Jav

css媒体查询:响应式网站

css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. 参考文章:https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

使用 CSS 媒体查询创建响应式网站

来自:http://www.ibm.com/developerworks/cn/web/wa-cssqueries/ 适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网站,都可以呈现一个可用的界面.响应式设计可以响应各种屏幕大小,因此也成为了 “前瞻性” 的网站,屏幕将随着新的智能手机和平板电脑的问世而快速演变.实现响应式设计的主要途径是使用 CSS 媒体查询.在本文中,我们将了解如何将

CSS媒体查询总结

1媒体查询概念 一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能限制样式表范围的表达式组成, 例如 宽度,高度和颜色.在CSS3中添加的媒体查询,允许内容的呈现针对一个特定范围的输出设备而定制,而不必改变内容本身. 2媒体查询的两种引入方式 <!-- link元素中的CSS媒体查询 --> <link rel="stylesheet" media="(max-width: 800px)" href="example.css&quo

移动端1像素边框问题与CSS媒体查询

做移动端页面开发时,我们是按照UI设计图上的尺寸来做的. 比如说,UI给的图是750x1344(Iphone6标准),我们在浏览器做适配时,按照375x667来裁切,设计图上30像素的高度,开发时使用的是15px,这是因为Iphone6的设备像素比为2,css中的1px在设备中的像素为2px.当我们需要实现设计图中1px高度的边框时,在css中的1px实际上变成了2px边框,由此产生了1像素边框问题. 1.window.devicePixelRatio设备像素比 定义: window.devic

css媒体查询

1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于检测的媒体特性有 width . height 和 color (等).使用媒体查询,可以在不改变页面内容的情况下,为特定的一些输出设备定制显示效果. 2.为什么响应式设计需要,媒体查询如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式 3.如何在CSS文件中引入媒

CSS媒体查询,CSS根据不同的分辨率显示不同的样式

在写自适应网页的时候,我们需要网页有几种显示方式,我们可以用CSS实现这个功能 使用CSS提供的媒体查询,我们可以根据屏幕分辨率来使用相应的CSS样式 @media screen and (max-width: 1000px) { /*此条件表示最大宽度为1000,也就是如果宽度小于1000则执行以下CSS代码*/ #idming{ color:#f00; } .leiming{ color:#f66; } }