码迷,mamicode.com
首页 > 其他好文 > 详细

理解响应式设计。

时间:2014-11-04 12:57:20      阅读:210      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   color   ar   os   使用   

学习要点:

移动端风起的趋势,web 和 移动端 统一共进的实现方式:响应式。

利用媒体查询,兼容web 和 不同移动端。
主要是从响应式布局 和 响应式图片处理。
不用像素、用百分比。

重点记忆:设备类型、设备特性。以及 高分辨率屏的处理。

响应式网页设计(RWD)

开发成本低,门槛低

  • Native APP:Objective-C or Java – 学习成本高
  • Hybrid APP: 外壳+Web APP,需安装。
  • 响应式Web APP:HTML5+JS+CSS – 门槛低,极易上手,迭代快

跨平台和终端且不需要分配子域

本地存储

Web App可以利用本地存储的特性将重要和重复的数据保存在本地,避免页面的重复刷新,减少重要信息在传输过程中被泄露,增量传输修改内容。

实施

首先我们应该遵循移动优先原则,交互&设计应以移动端为主,PC则作为移动端的一个扩展;
一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:

  1. 响应式布局
  2. 响应式内容(图片、多媒体)

响应式布局

需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)
布局应该是一种弹性的栅格布局,不同尺寸下弹性适应

Meta标签定义

使用 viewport meta 标签在手机浏览器上控制布局

1
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />

通过快捷方式打开时全屏显示

1
<meta name="apple-mobile-web-app-capable" content="yes" />

隐藏状态栏

1
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />

iPhone会将看起来像电话号码的数字添加电话连接,应当关闭

1
<meta name="format-detection" content="telephone=no" />

神飞:很多人常常使用initial-scale=1 到非响应式网 站上,这会让网站以100%宽度渲染而不会自动缩放,用户需要手动移动页面或者缩放。最差的是和initial-scale=1同时使用 user- scalable=no或maximum-scale=1,这将使你的网站不能被缩放——用户不能放大/缩小网页来看到全部的内容。所 以,请记住:如果你 的网站不是响应式的,请不要使用initial-scale或者禁用缩放。


使用 Media Queries 适配对应样式

常用于布局的CSS Media Queries有以下几种

设备类型(media type):

all所有设备
screen 电脑显示器
print打印用纸或打印预览视图
handheld便携设备
tv电视机类型的设备
speech语意和音频盒成器
braille盲人用点字法触觉回馈设备
embossed盲文打印机
projection各种投影设备
tty使用固定密度字母栅格的媒介,比如电传打字机和终端

设备特性(media feature):

width浏览器宽度
height浏览器高度
device-width设备屏幕分辨率的宽度值
device-height设备屏幕分辨率的高度值
orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为 portrait,否则为landscape
aspect-ratio比例值,浏览器的纵横比
device-aspect-ratio比例值,屏幕的纵横比

example:

1
2
3
4
/* for 240 px width screen */
@media only screen and (max-device-width:240px){
	selector{ ... }
}
1
2
3
4
/* for 320px width screen */
@media only screen and (min-device-width:241px) and (max-device-width:320px){
	selector{ ... }
}
1
2
3
4
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
	selector{ ... }
}


栅格框架推荐

响应式图片

 

处理原理:浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片,如屏幕分辨率 320*480,那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI 详解值很高,也就是高清屏,那么我们就得输出2倍分辨率的图形(宽:640px);以保证在高清屏下图形的清晰 度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查 询。

解决方案:其实W3C已经有一个用于响应式图形的草案:新定义标签<picture>, 因为它还只是草案,目前还没有支持的浏览器,期待在不久的未来我们能用上。虽然目前不支持,但我们还是来了解下,为之后的内容做个铺垫。

<picture>是一个图形element,内容由多个源图组成,并由CSS Media Queries来适配出合理图形,代码规范如下:


1
2
3
4
5
6
7
8
9
10
11
<picture width="500" height="500">
   <source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
   <source srcset="small-1.jpg 1x, small-2.jpg 2x">
   <img src="small-1.jpg" >
   <p>Accessible text</p>
   <!-- Fallback content-->
   <noscript>
      <img src="external/imgs/small.jpg" alt="Team photo">
   </noscript>
</picture>

source: 一个图片源;media: 媒体查询,用于适配屏幕尺寸;srcset: 图片链接,1x适应普通屏,2x适应高清屏;<noscript/>: 当浏览器不支持脚本时的一个替代方案;<img/>: 初始图片;另外还有一个无障碍文本,类似<img/>alt属 性。

<picture>目前还不支持,但它的原理我们是可借鉴的,所以就诞生了一个用于图片响应式处理 的类库Picturefill

1
2
3
4
5
6
7
8
9
10
<span data-picture data-alt="图片描述文本">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
    <!-- 浏览器不支持JS时的备用方案. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="图片描述文本">
    </noscript>
</span>

其原理就是JS获取Source的源以及CSS Media Queries规则,输出适应图片, 逻辑细节这里不再解析,感兴趣的可查看其JS代码,逻辑不是很复杂,也可以自己封装一个类库,以适用于自身产品,例如图片加载失败的替代方案。

当然,在未来的 CSS Image Level 4 中已经实现了响应式图片的原生语法:image-set
1
2
<image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
<image-set-decl> = [ <image> | <string> ] <resolution>
那么我们的响应式图片可以这样重写了
1
2
background-image:url(default.jpg);  /* 普通幕 */
background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x);  /* Retina高清屏 */

注:Webkit 目前只实现了 url() 形式的取值,且dppx值取负值[-2x]貌似也是合法的。


其他的响应式处理,如服务端user-agent嗅探
以下是部分项目地址,感兴趣的可以了解下:

高分辨率(DPI)下的响应式处理

  1. SVG:优点可承载色彩丰富、设计复杂图形,且渲染不会出现边缘不顺滑;缺点是IE的支持不完美,在我大中华这是硬伤。
  2. Icon fonts:支持多浏览器,图形颜色大小的修改成本低,易于维护;图形表现单一,不支持色彩丰富且复杂的图形,IE6渲染有毛边。
  3. -webkit-image-set:只支持单个图形的适配,不利于图形合并,兼容不完美(Safari 6+, Chrome 21+)

JS检测:var retina = window.devicePixelRatio > 1;

CSS Media Query:

1
2
3
4
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */

高DPI媒体查询规则将在下一篇文章中做详解,敬请期待

高分辨率下的1px border

bubuko.com,布布扣

由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,与设 计稿有出入,为了追求1px精准还原,我们就不得不拿出一个完美的解决方案

在Photoshop中,如果需要看似0.5px的边框,常见的方法就是对1px边框加上阴影模糊1px。同理,我们在retina屏下需 要做到真实的1px边框,可利用box-shadow属性模拟。 这个可能有问题。。。

1
2
3
4
5
6
7
8
9
10
11
12
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
       only screen and (min-device-pixel-ratio:1.5) {
 
  button {
    border:none;
    padding:0 16px;
    box-shadow: inset 0 0 1px #000,
                inset 0 1px 0 #75c2f8,
                0 1px 1px -1px rgba(0, 0, 0, .5);
  }
 
}



 

理解响应式设计。

标签:des   style   blog   http   io   color   ar   os   使用   

原文地址:http://www.cnblogs.com/hanyuxinting/p/4073122.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!