1、响应式设计(RWD): Response Web Design -> 其也是响应式布局的依据
随着用户访问web页面终端的多样化，web页面设计无法适应多样化的终端设备，为了提高开发效率，满足用户需求，Ethan Marcottee在A List Apart发表了一篇开创性的文章，将弹性网格布局、弹性图片、媒体/媒体查询整合起来，称其为响应式设计；
- - - >>> 响应式设计的三个条件：(1).网站必须建立灵活的网格基础(设置的宽高不能是固定的)；(2).网页图片必须是可伸缩的(页面中图片不固定宽/高)；(3).媒体查询(MediaQuery)，不同终端上正常展示页面，用户体验不改变；
- - - >>>响应式设计中的术语：(1).流体网格：多个自适应盒子形成的便是"网格";(宽/高可伸缩[相对单位]，可用flex布局)；(2).弹性图片：图片自适应，可将引入的img图片变为使用背景图片，随div自适应；(3).媒体查询：网页在不同终端上呈现效果相同;(聚焦点并非是不同终端展示效果一模一样，而是强调用户体验相同)；(4).屏幕分辨率：越大越清晰；(5).主要断点：设备宽/高的临界点(例如：600px 1000px)；
- - ->>>响应式布局的技巧：结构上不要冗余，不要使用内联元素，形成简单有语义的核心布局；样式上丢弃没用的绝对定位和浮动样式；尽量少的使用JS、Flash；
2、响应式布局
(1).模拟移动端的meta标签(响应式布局，使用户在不同设备上体验尽量相同) viewport:视口设置；content:页面内容；width=device-width;//视口宽度=设备宽度；height=device-height；initial-scale=1.0;//不缩放；minimum-scale=1.0;//最小缩放比；maximum-scale=1.0;//最大缩放比；user-scalable=yes/no;//是否允许用户缩放；
(2).媒体查询：-> 响应式布局的解决方案
[1].media type;//CSS2属性(其可对不同设备指定特定的样式)；
[2].media query;//CSS3属性 ->其是对media type的增强(可理解为media type + css属性)，CSS3中同媒体类型下可继续划分，等同于其对响应式布局情况更加“细分”；
- - - >>>CSS样式中会有“同权重”覆盖现象，所以建议媒体查询写在“基础样式”的后面，媒体查询自身没有所谓的“权重”(其就是普通CSS样式)；
- ->>多个媒体查询使用逗号分隔，@media screen and(max-width:200px),print (min-width: 500px){};(max-width: 200px);称之为特性、主要断点，必须加括号；
[3].media type: 常用all;/screen
[4].media features;//媒体特性，常用属性width(视口)，device-width(设备)；
[5].逻辑操作符 @media screen and (max-width:1000px) and(min-width:600px); @media screen and (min-width: 769px), print and (min-width: 6in); @media not screen and (monochrome);//除单色屏幕外的所有设备，monochrome://单色屏幕 @media only screen and (min-width: 401px) and (max-width: 600px);//向早期浏览器隐藏媒体查询 -> 因为没有only这样的媒体类型，所以样式表被忽略;//早期浏览器不能识别，所以忽略此样式
(3).分辨率/像素 -> 设备像素比dpr = 物理像素/设备独立像素；window.devicePixelRatio;//可查看dpr
分辨率变大 -> 同样的元素 -> 分拆四个位置放置 -> 更加清晰
(4).相对单位/绝对单位：
补充：微信小程序中使用的相对单位rpx -> web网页开发中不使用，聚焦小程序 ->小程序中默认所有机型宽为750rpx,高为1334rpx,例如iphone6 375px*750px,那在iphone6上1px=2rpx; 也就是若一张图片设置12px*12px,iphone6的小程序开发中需设置为24rpx*24rpx; ->1rpx = 屏幕宽度(px)/750;
- - - >>>响应式开发是很重要的思想，但实战开发中往往做不到开发一套源代码，兼容所有网页；
3、企业级应用响应式开发手段
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验 ->先满足低版本基础功能，再向上兼容 ->例如iphone6，然后再开发iphone 7,8等
优雅降级：先构建完整的功能，然后再针对低版本浏览器进行兼容。
设备选择：先移动端后PC端 ->移动端往往以iphone6为初始原型，再开方其它版本也就是渐进增强
- - - >>>选择 "渐进增强" OR "优雅降级" -> 需要从不同维度来分析考量：项目预算(人力、财力、时间成本等)、目标用户、产品定位等；
网友评论