通用媒体查询

/* Smartphones (portrait and landscape) ----------- */ @media only screen  and (min-device-width : 320px) and (max-device-width : 480px) {   /* Styles */ }  /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) {   /* Styles */ }  /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) {   /* Styles */ }  /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {   /* Styles */ }  /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {   /* Styles */ }  /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {   /* Styles */ }  /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) {   /* Styles */ }  /* Large screens ----------- */ @media only screen and (min-width : 1824px) {   /* Styles */ }  /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {   /* Styles */ }

时间： 2025-01-02 14:07:39

通用媒体查询的相关文章

总结CSS3新特性(媒体查询篇)

CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; media query 与 media type 的区别在于: media query是一个值或一个范围的值,而media type仅仅是设备的匹配(所以media type 是一个单词,而media query 后边需要跟着一个数值,两者可以混合使用); media可用于link标签属性 [media]

html5 响应式布局（媒体查询）

响应式布局响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的

css媒体查询

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

css3 媒体查询的学习。

@meda媒体查询

定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面. 浏览器支持表格中的数字表示支持 @media 规则的第一个浏览器的版本号. Rule Chrome IE FireFox Safari Opera @media 21 9 3.5 4.0 9 CSS 语法 @medi

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,

bootstrap在ie8下，兼容媒体查询

最近使用bootstrap做网站的时候发现,在ie8下的媒体查询一直失效: 后来解决了,做如下记录: 1.必须运行在服务器下 2.hack 条件语法,如下:  这样

媒体查询

媒体查询规则: @media all{}将样式应用于所有类型, @media(min-width:800px){}将样式应用于最小宽度为800的 @media(min-width:800px) and (max-width:1200px) and (orientation:potrait){}宽度为800-1200且方向是纵向(and 表示同时满足时才会显示,or只要满足其中一个条件即可) @media(not min-width:800px){} orientation 媒体查询 @media

css3媒体查询

@media (min-width: 320px) { html { font-size: 100px; }}@media (min-width: 360px) { html { font-size: 112.5px; }}@media (min-width: 400px) { html { font-size: 125px; }} 1号店的媒体查询,也可以用淘宝的js代码,但是加载JS会在JS未完全加载好前布局是乱的,所以还是用css3直接做媒体查询把...