码迷,mamicode.com
首页 > Web开发 > 详细

web前端基础篇⑨

时间:2016-10-08 02:09:14      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

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

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

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

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

web前端基础篇⑨

标签:

原文地址:http://www.cnblogs.com/cherry325/p/5937087.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!