响应式网页设计分析

《响应式网页设计分析》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、响应式网页设计概念响应式网页设计最初是由 EthanMarcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。背景PC互联网加速向移动端迁移：2012年12月底我国网民规模达到5.64亿，互联网普及率为42.1%，手机用户占网民总数的74.5%。预计到2015年，移动互联网的数据流量将超越PC端的流量。移动端入口：当用户

2、希望通过手机来完成PC页的操作时，常见的是商家的运营微博，期文案足够吸引用户点击链接参加活动，如果该活动页没做响应式处理：页面体积大、请求多、体验差、兼容性差，层层阻碍最终导致用户放弃参加。优势开发成本低，门槛低·NativeAPP：Objective-CorJava–学习成本高·HybridAPP：外壳+WebAPP，需安装。·响应式WebAPP：HTML5+JS+CSS–门槛低，极易上手，迭代快跨平台和终端且不需要分配子域虽然可通过监测用户UA来判断用户终端后做跳转，但它还是分配了多个域，而响应式无需监测用户UA没有域的切换，

3、只需根据终端类型来适配不同的功能模块与表现样式，它是跨平台和终端的，1页面适配多终端。·PC– http://www.topzhong.com·Mobile– http://map.topzhon.com·响应式：PC&Mobile– http://www.topzhong.com 无需跳转本地存储WebApp可以利用本地存储的特性将重要和重复的数据保存在本地，避免页面的重复刷新，减少重要信息在传输过程中被泄露，增量传输修改内容。无需安装成本，迭代更新容易更灵活、更方便的APP使用及安装方式将成为HTML5在移动平台上大放异彩的保

4、障之一实施首先我们应该遵循移动优先原则，交互&设计应以移动端为主，PC则作为移动端的一个扩展；一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：1.响应式布局2.响应式内容（图片、多媒体）响应式布局如我们需要兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，怎样才能做到让一种设计方案满足所有情况？那么我们的布局应该是一种弹性的栅格布局，不同尺寸下弹性适应，如以下页面中各模块在不同尺寸下的位置：那么我们要怎么做？Meta标签定义使用 viewportmeta 标签在手机

5、浏览器上控制布局1通过快捷方式打开时全屏显示1隐藏状态栏1iPhone会将看起来像电话号码的数字添加电话连接，应当关闭1

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

7、s适配对应样式常用于布局的CSSMediaQueries有以下几种设备类型(mediatype):all所有设备screen电脑显示器print打印用纸或打印预览视图handheld便携设备tv电视机类型的设备speech语意和音频盒成器braille盲人用点字法触觉回馈设备embossed盲文打印机projection各种投影设备tty使用固定密度字母栅格的媒介，比如电传打字机和终端设备特性(mediafeature):width浏览器宽度height浏览器高度device-width设备屏幕分辨率的宽度值device-heig

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