关于响应式设计

响应式网页设计responsive web design(RWD)的流行已经有挺长一段时间了,过去的2012年,响应式设计已深入人心,2013年仍是网页设计的一大热门并且是将来的一种趋势。当用移动设备浏览网页看到的是普通电脑缩小版的网页并且无法使用阅读器时,多数人通常的做法是直接离开。关于响应式设计研究的文章不尽其数,比如前端观察的响应式网页设计这篇文章,是我认识响应式设计的第一篇文章,介绍得比较全面。Web designer wall 三步实现响应式设计教你快速入门。

由于工作需要,自己也做了一些响应式的web app,公司的开发模式属于快速开发,于是2012年中旬开始认识响应式设计的我目前对它的研究并不深,只是在工作中碰到不少问题,面对这些问题,google是个不错的选择,不知是否搜索技巧有问题,总觉得找的答案并不恰恰就是我想要的,于是决定把一些问题和解决方案及从别人那里学到的有用的小经验分享出来,希望能获得更大的进步。

实现响应式的网页,我主要依赖于css3的Media Queries, 虽说一些人痛恨Media Queries, 也有人提出,响应式设计不应该只是Media Queries(还有图片处理技术<img srcset>和<picture>),但不得不承认,这几乎是我展开工作的全部。

一般响应式网页设计会有一个基础html框架: header, navigation, content, aside, footer. 作为响应式设计,其核心是根据屏幕尺寸保留网页主要内容(content),相应隐藏其他非重要内容,以保证网站内容的可读性(个人意见)。而一个web app,设计感更浓重,图片更多更大,其响应的难度要远远大于一个博客式的website。

1.字体。

web app要求内容的趣味性,设计师通常会使用一些与设计风格相匹配的字形(而这些字体通常不是google web font),如果目标用户非移动用户,这个可以用图片来解决(css sprite),但如果需要一个responsive的web app,这是个非常糟糕的选择。css sprite对其背景定位和大小尺寸需要相当准确,无法适应对尺寸要求极度宽松的响应式,并且多而大的图片对加载速度影响很大。因此,建议使用google web font(上面有很多漂亮的字形,限英文)或系统默认字体。当然也有嵌入字体只说,但如果是中文,可要考虑字库大小哦~

对于字号,应至少设置为14px,通常网页上的12px在移动设备上浏览还是有些吃力的。

2.图片。

对于背景图的设计,应尽量使用可以平铺的小图案,或者规律的渐变,这些渐变可以用css3来实现,也可以使用那些即使被切掉也无关紧要的图片,以减少屏幕尺寸变换时对图片的频繁切换。

3.导航。

导航在引导用户浏览网站或者app中起着非常重要的作用,除了导航数量少,字数简短的情况下,一般导航在电脑版切换到移动版时,需要更适合的UI。这里教你如何创建合适的响应式导航。

4.移动应用的特性:touch。

不同于website, web app 在手机上的需求更高,例如浏览一个图片slider,网页上通常通过点击左右键来切换图片,而在手机上,左右滑动的手势更符合用户习惯,因此可以选择一些响应式的jquery插件,例如FlexSlider

5.禁止缩放。

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>

width                      – viewport的宽度

height                     – viewport的高度

initial-scale          – 初始的缩放比例

minimum-scale  – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable       – 用户是否可以手动缩放

6.IOS中Safari允许全屏浏览。

<meta content=”yes” name=”apple-mobile-web-app-capable”>

7.IOS中Safari顶端状态条样式

<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>

content=”black”即设置为黑色。

8.忽略将数字变为电话号码

<meta content=”telephone=no” name=”format-detection”>

9.IOS中Safari设置保存到桌面图标

<link rel=”apple-touch-icon” href=”custom_icon.png”>

添加到主屏幕UI:图标参考:

图标会自动添加高亮效果,如果不需要,可以在plist中明确指定UIPrerenderedIcon的键值去掉

57像素的普屏的iPhone图标,图标圆角的半径为10像素

114像素Retina屏的iPhone图标,图标圆角的半径为20像素

512像素的用于iTunes/App Store的图标,在实际显示是会被缩放到175像素进行显示(但提交是不可以提交175像素)

72像素的普屏iPad图标,图标圆角的半径为13像素

144像素Retina屏iPad图标,图标圆角的半径为26像素

50像素iPad的Spotlight搜索图标的最终视觉大小是48像素,原因是iOS会对图标的每个边去掉1个像素,添加阴影效果

100像素Retina屏的Spotlight搜索图标的最终视觉大小是96像素,原因同上,这次是每边减2个像素

10.关闭Input键盘默认首字母大写

autocapitalize=”off”

例如: <input type=”text” value=“” name=”” autocapitalize=”off” />

根据需要设置,因为有一些输入框还是需要首字母大写的,如姓名。

11.去除Android平台中对邮箱地址的识别

<meta content=”email=no” name=”format-detection” />

12.-webkit-box-sizing

在 移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像 素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

13.禁止iphone字体大小调整

html { -webkit-text-size-adjust: none; }

14.图片在retina高清屏下的显示

为了保证图片在retina下的高清显示,需要准备一张原始图和一个比原图大一倍的图。

 image{ background-image:url( image_url );/*用于普通屏幕*/
/* ———— Retina ———— */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min–moz-device-pixel-ratio: 2),        /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2),    /* Webkit */
only screen and (min-resolution: 240dpi),                    /* 标准 */
only screen and (min-resolution: 2dppx)                      /* 标准 */
{
image{
background-image:url( image_url );
background-size: 50% 50%;
}
}
另外,无图片(no images)是开发的趋势,圆形,三角,渐变,阴影,如果是移动应用开发,请把它们变成css代码,因为它的灵活性足够适应不同尺寸的屏幕并且图像质量不会下降。

响应式图片切换加载方式

作为一个PS保存图片时,在图片质量和大小之间周旋良久的前端小妹,实在不能忍受响应式页面需要同时加载桌面版和手机版所需的图片或资源。那么多图片,得要拖慢多少时间?得要耗费多少流量?!好吧,我承认我总是要么很迷糊要么很爱钻牛角尖。。。

加载图片要么img标签,要么写在css背景图片里。

如果桌面版需要加载这三张大图(实际宽940px,高400px,下图已缩小做展示用):

img01 img02 img03

而手机上需要换成另外三张(宽300px,高200px):

img02_mobile img03_mobile img01_mobile

 

一,html加载图片

Demo:   http://kittywei.com/apps/img_loading/index_mediaquery_02.html

用media query将图片显示和隐藏(display)。

电脑浏览器打开页面,桌面版图片显示,手机版图片隐藏。手机浏览器打开,桌面版图片隐藏,手机版图片显示。于是,无论电脑、手机,把所有图片都下载下来勒>.<

1

 

二,css加载图片

将三张大图当作背景加到css文件,在用media query将小图同样以背景图的方式在手机上显示出来(background)。

Demo:   http://kittywei.com/apps/img_loading/index_mediaquery.html

电脑:

2

手机:

3

妈妈再也不用担心我手机上把电脑用的图也加载出来啦!

 

三,如果这些图片真的不能做背景用呢?一定要做成img呢?JS条件判断一下!

如果你用modernizr.js就太好了!耶!鼓掌欢迎!这家伙真让人省心省力。。

Demo:http://apps5.asiaappdeveloper.com/test/media_query/index_js.html

它给html加上的浏览器所支持属性的class名,任你潇洒地修改样式。

Chome:

4

IE8:

5

电脑图片加载:

6

手机图片加载:7

于是,即使是img,也不用display none block 啦!

 

之所以写这篇小文,是因为曾以为只要是写在css中的背景图片,无论是media query之外还是以内,全部都会被同时加载>.<  业界大牛请勿鄙视之。

 

Quote

响应式设计移动优先原则(mobile first)

起初,响应式设计以桌面版为重点,并自适应小屏幕尺寸,如缩小图片,隐藏不必要内容。而最近一种创新的移动优先的响应式设计方式开始悄然流行。

相比从大的、臃肿的桌面版开始设计并不断缩小、丢弃内容以适应小屏幕设备,从移动优先显得更有意义。移动优先有个很重要的优势,就是你可以将注意力集中在网页的核心内容,也就是内容优先,无需将精力分散在侧边栏那些不是必不可少的元素上。

“At first, responsive design was applied to existing desktop-centric websites to allow the layout to adapt to smaller screen sizes. But more recently it has been combined with another innovative approach called mobile first.

Rather then starting with the big, bloated desktop site and then scaling down for smaller devices, it makes more sense to start with the constraints of the small screen and then scale up for larger viewports. Using this approach, your layout grid, your large images and your media queries are applied on top of the pre-existing small-screen design. It’s taking progressive enhancement to the next level.

One of the great advantages of the mobile-first approach is that it forces you to really focus on the core content of your page. It might be more accurate to think of this as a content-first approach. You don’t have the luxury of sidebars or multiple columns to fill up with content that’s just nice to have rather than essential.”

js判断移动设备类型

media query根据屏幕尺寸显示相应css,当需求不止是需要判断用户的屏幕是否适合手机或平板的尺寸(因为有可能用户缩小浏览器进行浏览),而需要确切知道用户是否从移动端进入并执行相应动作时,可以用以下js进行简单判断:

 

$(document).ready(function () {
    var isMobile = {
        Android: function () {
            return navigator.userAgent.match(/Android/i) ? true : false;
        },
        BlackBerry: function () {
            return navigator.userAgent.match(/BlackBerry/i) ? true : false;
        },
        iOS: function () {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
        },
        Windows: function () {
            return navigator.userAgent.match(/IEMobile/i) ? true : false;
        },
        any: function () {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
        }
    };
    if (isMobile.any()) { //判断是否为android,BlackBerry,ios,windows
        //要执行的代码
    }
});

关于响应式设计

响应式网页设计responsive web design(RWD)的流行已经有挺长一段时间了,过去的2012年,响应式设计已深入人心,2013年仍是网页设计的一大热门并且是将来的一种趋势。当用移动设备浏览网页看到的是普通电脑缩小版的网页并且无法使用阅读器时,多数人通常的做法是直接离开。关于响应式设计研究的文章不尽其数,比如前端观察的响应式网页设计这篇文章,是我认识响应式设计的第一篇文章,介绍得比较全面。Web designer wall 三步实现响应式设计教你快速入门。

由于工作需要,自己也做了一些响应式的web app,公司的开发模式属于快速开发,于是2012年中旬开始认识响应式设计的我目前对它的研究并不深,只是在工作中碰到不少问题,面对这些问题,google是个不错的选择,不知是否搜索技巧有问题,总觉得找的答案并不恰恰就是我想要的,于是决定把一些问题和解决方案及从别人那里学到的有用的小经验分享出来,希望能获得更大的进步。

实现响应式的网页,我主要依赖于css3的Media Queries, 虽说一些人痛恨Media Queries, 也有人提出,响应式设计不应该只是Media Queries(还有图片处理技术<img srcset>和<picture>),但不得不承认,这几乎是我展开工作的全部。

一般响应式网页设计会有一个基础html框架: header, navigation, content, aside, footer. 作为响应式设计,其核心是根据屏幕尺寸保留网页主要内容(content),相应隐藏其他非重要内容,以保证网站内容的可读性(个人意见)。而一个web app,设计感更浓重,图片更多更大,其响应的难度要远远大于一个博客式的website。

1.字体。

web app要求内容的趣味性,设计师通常会使用一些与设计风格相匹配的字形(而这些字体通常不是google web font),如果目标用户非移动用户,这个可以用图片来解决(css sprite),但如果需要一个responsive的web app,这是个非常糟糕的选择。css sprite对其背景定位和大小尺寸需要相当准确,无法适应对尺寸要求极度宽松的响应式,并且多而大的图片对加载速度影响很大。因此,建议使用google web font(上面有很多漂亮的字形,限英文)或系统默认字体。当然也有嵌入字体只说,但如果是中文,可要考虑字库大小哦~

对于字号,应至少设置为14px,通常网页上的12px在移动设备上浏览还是有些吃力的。

2.图片。

对于背景图的设计,应尽量使用可以平铺的小图案,或者规律的渐变,这些渐变可以用css3来实现,也可以使用那些即使被切掉也无关紧要的图片,以减少屏幕尺寸变换时对图片的频繁切换。

3.导航。

导航在引导用户浏览网站或者app中起着非常重要的作用,除了导航数量少,字数简短的情况下,一般导航在电脑版切换到移动版时,需要更适合的UI。这里教你如何创建合适的响应式导航。

4.移动应用的特性:touch。

不同于website, web app 在手机上的需求更高,例如浏览一个图片slider,网页上通常通过点击左右键来切换图片,而在手机上,左右滑动的手势更符合用户习惯,因此可以选择一些响应式的jquery插件,例如FlexSlider

5.禁止缩放。

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>

width                      – viewport的宽度

height                     – viewport的高度

initial-scale          – 初始的缩放比例

minimum-scale  – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable       – 用户是否可以手动缩放

6.IOS中Safari允许全屏浏览。

<meta content=”yes” name=”apple-mobile-web-app-capable”>

7.IOS中Safari顶端状态条样式

<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>

content=”black”即设置为黑色。

8.忽略将数字变为电话号码

<meta content=”telephone=no” name=”format-detection”>

9.IOS中Safari设置保存到桌面图标

<link rel=”apple-touch-icon” href=”custom_icon.png”>

添加到主屏幕UI:图标参考:

图标会自动添加高亮效果,如果不需要,可以在plist中明确指定UIPrerenderedIcon的键值去掉

57像素的普屏的iPhone图标,图标圆角的半径为10像素

114像素Retina屏的iPhone图标,图标圆角的半径为20像素

512像素的用于iTunes/App Store的图标,在实际显示是会被缩放到175像素进行显示(但提交是不可以提交175像素)

72像素的普屏iPad图标,图标圆角的半径为13像素

144像素Retina屏iPad图标,图标圆角的半径为26像素

50像素iPad的Spotlight搜索图标的最终视觉大小是48像素,原因是iOS会对图标的每个边去掉1个像素,添加阴影效果

100像素Retina屏的Spotlight搜索图标的最终视觉大小是96像素,原因同上,这次是每边减2个像素

10.关闭Input键盘默认首字母大写

autocapitalize=”off”

例如: <input type=”text” value=“” name=”” autocapitalize=”off” />

根据需要设置,因为有一些输入框还是需要首字母大写的,如姓名。

11.去除Android平台中对邮箱地址的识别

<meta content=”email=no” name=”format-detection” />

12.-webkit-box-sizing

在 移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像 素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

13.禁止iphone字体大小调整

html { -webkit-text-size-adjust: none; }

14.图片在retina高清屏下的显示

为了保证图片在retina下的高清显示,需要准备一张原始图和一个比原图大一倍的图。

 image{ background-image:url( image_url );/*用于普通屏幕*/
/* ———— Retina ———— */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min–moz-device-pixel-ratio: 2),        /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2),    /* Webkit */
only screen and (min-resolution: 240dpi),                    /* 标准 */
only screen and (min-resolution: 2dppx)                      /* 标准 */
{
image{
background-image:url( image_url );
background-size: 50% 50%;
}
}
另外,无图片(no images)是开发的趋势,圆形,三角,渐变,阴影,如果是移动应用开发,请把它们变成css代码,因为它的灵活性足够适应不同尺寸的屏幕并且图像质量不会下降。