web前端基础篇⑨

1.web端、app端 目前实现响应式布局，主要用以下两种方式。
CSS原生代码响应式布局 @media screen。
bootstrap移动设备优先、自带框架。

兼容性 用原生代码的话 根据不同的屏幕尺寸，用@media screen引入不同的值
用bootstrap，js文件自适应，优点是不用分屏幕尺寸，只用改一些小的数据。
web和app图不能相同，为了浏览速度最好使用雪碧图。

APP端。
CSS原生代码写 需要注意：①宽高，使用百分比的方式。
②宽的话，使用rem，不能在一套css里面使用两个单位，使用rem，最好用百分比。
③@media screen格式
④margin padding建议也用百分比
⑤meta viewport一定要加。允许（不允许）用户缩放
优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。