Tagged

media query

A collection of 3 posts

media query

媒体查询与http请求

Jason Grigsby发表了篇文章,《CSS Media Query for Mobile is Fool’s Gold》对媒体查询(media query)吐槽,大意是在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源,然后写了一些测试用例测试一些可用方法。然后Tim Kadlec写了篇《Media Query & Asset Downloading Results》,用js自动化的测试了Jason Grigsby的用例。 本文主要整理自Tim的这篇文章。我们来看看到底会不会浪费资源,并寻找下最优的方案。 直接看结果吧~~ 测试一:img标签 运行测试 本测试尝试通过对img标签的父级元素使用display:none来隐藏图片。HTML和CSS代码如下: @media all and (max-width: 600px) { #test1 { display:none; } } 测试结果 如果有一种应该100%避免的隐藏图片的方法,那就是display:

media query

media type与media query

media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面。media query(媒体查询)是对media type的一种增强,是CSS 3的重要内容之一。随着移动互联网的发展,media query开始得到大家的重视。 media type 让我们先了解一下media type,其实这个大家会比较熟悉一点,我们通常会用到的media type会是all 和screen,然后是print,一些网站会专门通过print类型为页面的打印格式提供更友好的界面。 其实,media type有很多种: 类型解释all所有设备braille盲文embossed盲文打印handheld手持设备print文档打印或打印预览模式projection项目演示,比如幻灯screen彩色电脑屏幕speech演讲tty固定字母间距的网格的媒体,比如电传打字机tv电视### media type的几种使用方法 我们可以通过几种方法来声明media type: 方法一 方法二 @import url("style.css"); #### 方法五 @media screen{ selector{rules} } 当然,

iPad

PPK:orientation媒体查询

译自:[The orientation media query](http://www.quirksmode.org/blog/archives/2010/04/the_orientation.html) 中文:[PPK:orientation媒体查询](http://www.qianduan.net/ppk-orientation-vs-device-width.html) 原作者:PPK[Peter Paul Koch] 请尊重版权,转载请注明来源,多谢! - - - - - - 最近[Jason Grigby关于orientation媒体查询的概述](http://www.qianduan.net/ipad-orientation-css.html)在博客圈和twitter中疯传,那确实很棒。