Tagged

响应式设计

Responsive design

媒体查询

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

苹果定义高分屏(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.

书签

20款超棒的响应式设计测试书签应用

2013年注定了响应式设计流行,它是网站设计的新的方向,从去年开始越来越多的网站开始使用响应式的设计理念,它能够帮助你开发一套界面并且能运行在所有不同分辨率的设备上,包括,PC,平板,或者移动手机。今天我们继续推荐给大家5款书签类型的测试工具,你可以方便的添加到你的书签中,并且在测试响应式网站的时候方便的使用。 Viewport Resizer 这个书签号称拥有158个国家3万多活跃的用户,主要特性: 完全自定制 方便的添加自定义尺寸 手动的横竖屏切换 自动的横竖屏切换 (portrait | landscape) 支持Media query 自适应Meta的viewport设置 手动重新加载页面 移除页面工具栏 Viewport相关信息显示 (尺寸,分辨率,横纵屏,user agent) 支持触摸设备 支持vector Resizer 这个在线书签允许你快速的修改页面的尺寸来测试响应式的设计. 并且支持Chrome的扩展! Bricss 另外一个方便的测试响应式的书签,你可以自己指定自己的几套显示窗口的尺寸。 Responsinator 这个工具提供了仿真的web界面来测试你的响应式设计,不过呢,只是界面外面套了一个设备的壳子图片,如果你想查看实际的设备展示情况,还是应该使用真实的设备。同时,提供了一个书签,你可以方便的添加到浏览器中。 ish

响应式设计

非响应式设计的viewport

整理自:Viewport Meta Tag For Non-Responsive Design 中文原文:非响应式设计的viewport 请尊重版权,转载请注明来源,多谢~~ 大家已经非常熟悉响应式网页设计了吧,但是我们通常会忽略很多旧的没有采用响应式设计的网站,其实这类网站在移动终端的用户体验更为关键——因为它们没有对移动设备做任何优化。 通用viewport 对于响应式网站,大家通常都会这样定义: <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta> 非响应式网站 但是你或许会知道,iPhone(包括android)通常会把网站默认以980px的宽度来渲染,这就是说,如果你没有定义viewport,如果你的网站的宽度大于980或者小于980,iPhone会把它默认以980px的窗口来缩放和渲染,这样就会有各种问题。 比如: 前面图片是没有设置viewport的情况,页面宽度大于980px的部分会被截断,

iphone

主流移动设备的屏幕参数

iPhone 5昨夜发布,早上起来看到了一些新iPhone的参数信息,于是好奇历代iPhone的屏幕参数,然后在维基百科发现了大部分主流移动设备的屏幕信息,这比iPhone 5本身给我的惊喜还要大!! 这些信息包括屏幕分辨率、宽高比、ppi、aspect ratio、css pixel ratio等,对我们开发面向移动终端的网站比如响应式设计可以提供比较全面的参考信息。 这里不多罗列,直接访问维基百科的页面吧~~

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:

移动互联网

85个很赞的响应式网页设计

整理自:85 Amazing Showcase of Responsive Web Design 中文原文:85个很赞的响应式网页设计 请尊重版权,转载请注明来源,多谢! 上一篇中我们了解了一下响应式网页设计是什么,现在趁热打铁,来欣赏一些国外的一些很赞的响应式网页设计,看看他们是如何实现对PC端浏览器和移动终端的全面支持的。 想要查看效果很简单,打开这些页面,然后缩放浏览器窗口就可以了——当然,要用 chrome/safari/firefox/opera 等浏览器,IE请绕道~~ 当然,如果你有发现国内有好的类似设计,欢迎推荐! 前端观察 food sense Forefathers Form CMS Havoc Inspired Jet Cooper Filidor Wiese Conferencia Rails Designing With Data The Happy

移动互联网

响应式网页设计

这个话题最近很火爆,我也一直在关注,响应式网页设计和移动互联网密切相关,并因移动终端的丰富和普及而兴盛,并且是一个颇具争议的话题,我今天将和大家探讨下。 上周写了个简单的ppt在组内大概介绍了下,感兴趣的话可以先看下这个PPT。 移动互联网的现状和未来 在说到这个话题前,我们先看下网页设计和前端开发的现状: 全球有超过53亿手机用户(包括传统手机) 国内3G用户超过1亿 iPhone4手机在2010年出货量超过3000万部; iPhone 4S上市前3天卖掉400万部; Android手机每天激活超过50万部; iPad出货量已经超过2.5亿部; 预计到2015年,移动互联网的数据流量将超越桌面端的流量。 。。。 嗯,大家也许已经开始注意到,自己和身边的朋友也都越来越多的用上了iPhone或者android手机或平板——一两年前我们预料的移动互联网时代即将来临,现在已然实现了——我们正处在移动互联网快速发展的时代——已经不再是起步阶段了。 那么,什么是响应式网页设计? 响应式网页设计是Ethan Marcotte在去年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念可以说是是为移动互联网而生的! 或许大家之前会注意到,有很多知名网站都推出了iPhone或针对智能手机的专门网站,比如3g.qq.com、m.taobao.com、ipad.xxx.com等等。。。甚至前端观察之前也尝试过用wordpress插件实现m.qianduan.