官网适配遇到的问题

遇到的问题：

1：如果给设计稿是1920*1080，和750*1334设计稿你怎么做适配

2：怎么合理使用rem,%

3：在pc端怎么适配各种大小不一的尺寸电脑

4：当页面在刷新出现那么一瞬间样式没有渲染，1秒后又好的情况怎么处理

5：使用最小尺寸电脑通常限制到1200

第一：在pc端适配，限制最小尺寸1200保证样式不乱，文字很大的情况下使用rem适配，

          文字很小就还是使用单位px,图片使用%控制。

           在移动端，使用rem来适配就可以了。

第二：在pc端使用rem时，要注意不是都用rem是配的，很大的文字可以使用rem来适配，但是大的div块或图片使用百分比控制会比较好。

第三：在pc端总的来说使用%来适配，对于大的文字使用rem来适配，最大的容器页面使用min-width:1200px来控制页面不能再小，当拖拉缩小页面到1200尺寸的时候页面样式就固定不再跟着变化。

第四：先将内容隐藏起来，然后当页面样式加载完后再让内容显示出来，可以利用jq的

$(function(){

    $("").show(1000);//内容显示

})

利用的知识点：jq的$(function(){}):当资源加载完后，才运行里面的方法

如何使用rem来适配？

浏览器通常默认字号是16px,然后我们这么对算1rem对于16px，

16px是页面的根元素样式，所有页面都是以它为基准的，

所以我们来根据它的比例改变页面的根元素，1/16*100%

但是这样不好计算， 我们根据设计稿每个尺寸都除以16，计算速度比较慢，如果1rem对应10px,这样就好计算多了，10/16*100%

但是这样会出现问题

chrome强制字体最小值为12px，低于12px按12px处理，那上面的1rem=10px就变成1rem=12px，出现偏差

【解决方案： 将1rem=10px换为1rem=100px（或者其它容易换算的比例值）;不要在pc端使用rem。

那么上面的页面根元素样式要改为：

html {font-size: 625%; /*100 ÷ 16 × 100% = 625%*/}

再用本工厂总结得出的各分辨率媒体查询换算：

@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait) {

html { font-size: 703%; }

}

@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait) {

html { font-size: 732.4%; }

}

@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait) {

html { font-size: 750%; }

}

@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait) {

html { font-size: 781.25%; }

}

@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait){

html { font-size: 808.6%; }

}

@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait){

html { font-size: 843.75%; }

}

至此，坑填完。设计稿px换算直接/100即可得到rem值。

上面的625%大法除了有兼容性问题，也无法很好地根据不同设计稿精准适配，不是我们的最佳选择。

屏幕宽度/设计稿rem宽度=页面动态font-size值（如：375/7.5=50）

这样就设置好了每个页面的根fonts-size，因为rem单位是基于根font-size，因此只要确定一种设计稿对应手机的换算，其余屏幕尺寸均可自动适配。

上面我们得出设计稿换算rem的基准值是100，因此只需要把设计稿上的px值除以100即为我们要的rem值。

Px/100=rem，所以100px=1rem,25px=0.25rem

】以上是参考https://blog.csdn.net/chenxueshanBlog/article/details/78129410这边博客的理解

下面是一段适配750设计稿的代码

(function (doc, win) {

var docEl = doc.documentElement;

resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';

recalc = function () {

//屏幕的宽度（兼容处理）

var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;

if (!clientWidth) return;

document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';

};

if (!doc.addEventListener) return;

win.addEventListener(resizeEvt, recalc, false);

doc.addEventListener('DOMContentLoaded', recalc, false);

}(document,window));