初入web知识点（八）

标签：

◆APP端
/**CSS原生代码**/
TIP：
① 还是要在head部分加入
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
网页自适应移动端
② 宽高使用百分比
③ 高也可以使用rem
④ CSS文件开头要用@media
比如：
@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;}}
@media screen and (max-width: 412px){html{font-size:12.875px;}}
换算方法
屏幕分辨率宽度/640*20就是设置的font-size的大小 如：960/640*20=30 750/640*20=23.4375
这样 在编写代码的时候 高度就是按照20px来计算rem
⑤ margin和padding也用百分比或rem
◆优雅降级和渐进增强
优雅降级：graceful degradation 一开始就构建完整的功能，然后在针对低版本浏览器进行兼容；
渐进增强：progressive enhancement 先针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户的体验。‘’

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

/**JS文件**/
用auto-size.js文件来适应的所有的屏幕尺寸
①获取实际的宽度来 改变js文件的值
②js文件中font-size默认值为100px，即1rem=100px
doc.documentElement.style.font-size=（width/获取的实际的宽度）*100+“px”
③在head加入<meta name=viewport …………………>
④ 按PC端的高端来写

初入web知识点（八）

标签：

原文地址：http://www.cnblogs.com/plainsailing/p/5906629.html