标签:
1.web端、app端 目前实现响应式布局,主要用以下两种方式。
CSS原生代码响应式布局 @media screen。
bootstrap移动设备优先、自带框架。
兼容性 用原生代码的话 根据不同的屏幕尺寸,用@media screen引入不同的值
用bootstrap,js文件自适应,优点是不用分屏幕尺寸,只用改一些小的数据。
web和app图不能相同,为了浏览速度最好使用雪碧图。
APP端。
CSS原生代码写 需要注意:①宽高,使用百分比的方式。
②宽的话,使用rem,不能在一套css里面使用两个单位,使用rem,最好用百分比。
③@media screen格式
④margin padding建议也用百分比
⑤meta viewport一定要加。允许(不允许)用户缩放
优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容
渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
标签:
原文地址:http://www.cnblogs.com/cherry325/p/5937087.html