Day8

Posted 2020-08-10

一、 web在App端的实现：

CSS原生代码的方式

注意事项及写法：

1.需要在head标签里面添加<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
2.需要我们在CSS样式里面添加适应各种屏幕尺寸的样式：

例：

@media screen and (min-width: 960px){html{font-size: 30px;}}
@media screen and (max-width: 750px){html{font-size: 23.4375px;}}
@media screen and (max-width: 640px){html{font-size:20px;}}
@media screen and (max-width: 414px){html{font-size:12.9375px;}}
@media screen and (max-width: 360px){html{font-size:11.25px;}}
@media screen and (max-width: 320px){html{font-size:10px;}}
3.CSS里面的所有宽度都用百分比表示
4.除了宽度以外的所有单位我们都用rew来表达
5.在App端的网页因为图片居多，我们最好使用雪碧图

二、优雅降级概念

优雅降级是针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或者有功能
缺失的浏览器的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如IE/Moz等）
的前一个版本。简单来说就是一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

三、渐进增强概念

渐进增强认为应关注于内容的本身，针对低版本浏览器进行构建页面，保证最基本的功能，
然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。