现在想想，自己有时候还真的是不学无术。作为一个前端，连基本的适配都不清楚。
/*****************************关于viewpore适配***********************/
适配方面，有一个viewport适配方案：viewport方案适配就是指对于不同屏幕像素分辨率，都设置一个相同的viewport，其值最好与设计师给的设计稿保持一致。比如说，当你设置viewport的width等于320的时候，那么在你代码里面设计的时候，设置div的width等于320px的时候，这个div的宽度就充满整个屏幕。想必这个时候，大家会很奇怪，不管多大的屏幕，只要设置viewport的width就能实现适配，那么比如当前屏幕是iphone6的尺寸，其像素分辨率也就是物理分辨率是750，那么，此时设置div的width等于320px，是能充满整个屏幕的，这其中也就是说1px实际上等于750/320 px。
直接设置viewport的width来适配的话固然简单，但是会产生很多的兼容性问题，就比如加入我需要设置一个div的边框为1px，但是此时的1px实际上是750/320 px。。。这样就导致了，在大的屏幕中，1px显得非常的粗，导致了用户体验的差异。
/*********************************关于rem适配***********************************/
rem适配是现在非常流行的一种适配方案 了。rem代表根元素的font-size。默认根元素的大小都是16px。对于不同的屏幕分辨率，其根元素的设置也应该不一致。比如说设计师给我的设计稿是640的，那也就是说这个在640的情况下，我们假设进行的设置根元素的大小为10px。然后刚刚好合适布局，但是像设计稿600的，如果还是设置这个根元素，那么内容肯定会进行溢出，对于设计稿为750的，内容肯定会留有一大段空白，所以这个时候，我们可以根据设计师设计稿为基准，来进行相应成比例的放大和缩小根元素的值。达到适配的效果。
其实计算rem的值，第一种方法可以利用js动态设计rem。这也是目前淘宝所运用的方法。还有一种方法是比较笨一点的，利用密集度和媒体查询css，密集的分配不同分辨率下不同的设置不同的根元素的大小。
关于js动态设计rem。我浅陋的计算方法是：
当我的设计稿是320的时候，我根元素设置10px，这样排版刚刚合适，其比例为32.。所以根据这个比例，我根据不同的屏幕尺寸，计算出不同的根元素，如果这种方法有错误希望大家多多指正，因为我本人基础很一般，也比较笨，
如果是根据css的媒体查询来设置根元素，可以类似如下：
@media screen and （min-width：300px）and (max-width:330px){
html{font-size:10px};
}
@media screen and （min-width：340px）and (max-width:380px){
html{font-size:12px};
}
........类似以上的，密集的设置根元素的大小。
以上就是我总结的地方，有不对的地方，希望大家多多提意见，共同进步
网友评论