响应式页面实现
来源:互联网 发布:spark sql hive 编辑:程序博客网 时间:2024/05/20 18:54
响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等,它更像是一种对于设计的全新思维模式;我们应当向下兼容、移动优先。
首先我们应该遵循移动优先原则,交互&设计应以移动端为主,PC则作为移动端的一个扩展;一个页面需要兼容不同终端,那么有两个关键点是我们需要去做到响应式的:
1. 响应式布局
2. 响应式内容(图片、多媒体)
一、响应式布局
如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape),怎样才能做到让一种设计方案满足所有情况?
柵格布局
那么我们的布局应该是一种弹性的栅格布局,不同尺寸下弹性适应,如以下页面中各模块在不同尺寸下的位置:
Meta标签定义
使用 viewport meta 标签在手机浏览器上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
通过快捷方式打开时全屏显示
<meta name="apple-mobile-web-app-capable" content="yes" />
隐藏状态栏
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
iPhone会将看起来像电话号码的数字添加电话连接,应当关闭
<meta name="format-detection" content="telephone=no" />
使用 Media Queries 适配对应样式
常用于布局的CSS Media Queries有以下几种
设备类型(media type):
- all所有设备
- screen 电脑显示器
- print打印用纸或打印预览视图
- tv电视机类型的设备
- speech语意和音频盒成器
- braille盲人用点字法触觉回馈设备
- embossed盲文打印机
- projection各种投影设备
- tty使用固定密度字母栅格的媒介,比如电传打字机和终端
设备特性(media feature):
- width浏览器宽度
- height浏览器高度
- device-width设备屏幕分辨率的宽度值
- device-height设备屏幕分辨率的高度值
- orientation浏览器窗口的方向纵向还是横向,当窗口的高度值大于等于宽度时该特性值为portrait,否则为landscape
- aspect-ratio比例值,浏览器的纵横比
- device-aspect-ratio比例值,屏幕的纵横比
代码示例:
/* for 240 px width screen */@media only screen and (max-device-width:240px){ selector{ ... }}/* for 320px width screen */@media only screen and (min-device-width:241px) and (max-device-width:320px){ selector{ ... }}/* 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来适配出合理图形,代码规范如下:
<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" alt=""> <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
<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代码,逻辑不是很复杂,也可以自己封装一个类库,以适用于自身产品,例如图片加载失败的替代方案。
http://www.5icool.org/a/201309/a2517.html
- 响应式页面实现
- css响应式页面实现
- 前端页面响应式布局 简单实现
- 响应式页面设计
- 关于响应式页面
- 关于响应式页面
- 关于响应式页面
- 响应式 页面
- 简述响应式页面
- 响应式页面布局
- 关于响应式页面
- 使用css3的@media属性实现页面响应式布局
- Bootstrap实现的响应式APP下载页面代码
- 第30篇 移动端响应式布局页面实现
- css3-自适应页面的实现(响应式设计、响应不同类型设备)、浏览器适配
- 响应式页面设计思路
- 响应式页面设计小结
- 响应式页面制作总结
- Selenium IDE下载
- Java原子操作AtomicInteger的用法
- CNKI学术不端检测系统常见问题解答
- Linux_git定时更新代码脚本(crontab)
- ZOJ 1104Leaps Tall Buildings
- 响应式页面实现
- 使用commons-configuration2实现xml文件读取为对象
- 【数字图像处理之(二)】图像的分类
- 第三十六讲项目四 血型统计
- JSTL标签遍历二维数组
- 什么是知网小论文查重系统?
- rebar3 简单使用
- HDU1556 Color the ball(树状数组+抖机灵)
- TCP/IP、Http、Socket以及UDP