Tagged

媒体查询

A collection of 6 posts

媒体查询

针对高分辨率屏幕的样式优化

苹果定义高分屏(retina)已经好久了,只是最近才有越来越多的网站开始重视高分屏下的表现,QQ空间也早支持高分屏了,CSS Gaga也加入了对@2x图片的支持。嗯,迟到的文章,和大家简单的分享下。 首先,关于高分屏的基础知识,可以查看之前的文章《移动端webapp开发必备知识》 一般来说,内容类的资源并不需要对高分屏做什么优化,需要优化的是固定的图片类资源。而且通常现在有三种做法: 自定义字体,将扁平化的图标做成字体,可以原生的支持高分屏,因为字体是矢量的。比如**前端界**用的icon-font,所以在iPhone和rMBP上看起来图标都不会模糊;缺点是有些手机端浏览器不支持,比如“用户量最大的UC浏览器” 矢量图片,嗯,将图标做成SVG格式,也能很完美的兼容到主流手机系统,当然 Android 2.3以下版本支持很不好。 2倍图片,嗯,兼容性最好的方案,本文主要说这种方法。 使用媒体查询 这是最简单的方法: @media only screen and (min-device-pixel-ratio: 1.

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:

IEMobile

IEMobile条件注释

微软在IE5开始就引入了条件注释的功能,可以通过注释型的语法,来对不同版本的IE浏览器指定不同的样式和内容。而在Windows Phone7中,微软又引入了 IEMobile这个关键字,将条件注释功能带入了WP7手机浏览器中。 语法和普通的条件注释类似: 以为WP7有很多很酷的功能,顺便多玩了下,然后发现各种杯具: 不再支持media=”handheld”。我们知道,对于普通的移动终端,我们可以用media type来为其指定特殊的样式文件,在之前的Windows Mobile版本的系统中,media=”handheld”是被支持的,但是到了wp7,可能微软觉得自己的Mobile IE7可以和iOS的Safari以及Android的webkit lite媲美了?总之,它不再支持handheld类型了! wp7中的IEMobile不支持媒体查询(media query)!既然,IEMobile条件注释后面可以加版本号,那么,以微软的作风,估计以后大家可以不用在Windows Phone上纠结媒体查询的功能了! PS,关于条件注释,需要更多了解的请访问:条件注释使用指南 doubanclaim9261b07b87a120ff

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中疯传,那确实很棒。

css

iPad Orientation CSS

译自:[iPad Orientation CSS](http://www.cloudfour.com/ipad-orientation-css/)iPad终于发布了,那么如果用样式区分iPad和iPhone中的safari浏览器,Jason Grigsby做了一个有用的实验。 就绝大部分而言,iPad上的移动版safari和iPhone上的事一样的。我发现的一个不同是,iPad上的webkit支持基于方向(orientation)的CSS媒体查询(media query)声明。 我为iPad创建了一个简单的演示目标CSS的页面。 在CSS中使用orientation 非常简单,代码就行这样: 在这个例子中,两个CSS文件中的唯一不同就是隐藏其中的一个标题。该演示页面的HTML部分如下: You’re Viewing in Portrait Mode You’re Viewing in Landscape portrait.css中的CSS只是简单的隐藏landscape部分的: landscape {display:none} 当然,landscape.css的作用与之相反。 你可以在最新版本的Safari/Chrome和Firefox中看到这个CSS查询。