什么是响应式设计
为什么要设计响应式界面
即便是PC或Mac用户，有查显示只有一半的人会将浏览器全屏显示，而剩下的一般人使用多大的浏览器，很难预知；
台式机、投影、电视、笔记本、手机、平板、手表、VR……智能设备正在不断增加，“主流设备”的概念正在消失；
屏幕分辨率正飞速发展，同一张图片在不同设备上看起来，大小可能天差地别；
鼠标、触屏、笔、摄像头手势……不可预期的操控方式正在不断出现。
响应式界面的四个层次
同一页面在不同大小和比例上看起来都应该是舒适的；
同一页面在不同分辨率上看起来都应该是合理;
同一页面在不同操作方式（如鼠标和触屏）下，体验应该是统一的；
同一页面在不同类型的设备（手机、平板、电脑）上，交互方式应该是符合习惯的。
响应式界面的基本规则
可伸缩的内容区块：内容区块的在一定程度上能够自动调整，以确保填满整个页
可自由排布的内容区块：当页面尺寸变动较大时，能够减少/增加排布的列
适应页面尺寸的边距：到页面尺寸发生更大变化时，区块的边距也应该变化
能够适应比例变化的图片：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用
能够自动隐藏/部分显示的内容：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏
能自动折叠的导航和菜单：展开还是收起，应该根据页面尺寸来判断
放弃使用像素作为尺寸单位：用dp(对于前端来说，这里可能是rem)尺寸等方法来确保页面在分辨率相差很大的设备上，看起来也能保持一致。同时也要求提供的图片应该比预想的更大，才能适应高分辨率的屏幕。
媒体查询，边界断点的规则设定（Media queries && break point）
内容的可伸缩性效果（Flexibel visuals）
流式网格布局(Fluid grids)
主要内容呈现及图片的高质量(Main content and high quality)
响应式 vs. 自适应
渐进增强 vs. 优雅降级
渐进增强（progressive enhancement）：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级（graceful degradation）：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
移动端屏幕适配方案
DPR（Device Pixel Ratio） 设备像素比
适配不同屏幕大小，也就是适配不同屏幕下的 CSS 像素
适配不同像素密度，也就是适配不同屏幕下 dpr 不一致导致的一些问题
适配不同屏幕大小
图片适配及优化
消除多余的图像资源
尽可能利用 CSS3\SVG 矢量图像替代某些光栅图像
谨慎使用字体图标，使用网页字体取代在图像中进行文本编码
选择正确的图片格式
为不同 DPR 屏幕提供最适合的图片尺寸
字体大小
PC上最小 font-size=12px
手机上最小 font-size=8px
兼顾各个操作系统
優網科技秉承"專業團隊、品質服務" 的經營理念，誠信務實的服務了近萬家客戶，成為眾多世界500強、集團和上市公司的長期合作伙伴！
優網科技成立于2001年，擅長網站建設、網站與各類業務系統深度整合，致力于提供完善的企業互聯網解決方案。優網科技提供PC端網站建設（品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發、移動端應用（手機站、APP開發）、微信定制開發（微信官網、微信商城、企業微信）等一系列互聯網應用服務。
公安局備案號：
專屬顧問
