了解响应式布局

响应式布局种类

响应式布局开发@media等比缩放布局
按照固定的样式写一版*（例如 320），然后根据设备的宽度 让其除以320，计算出缩放比，最后让整个HTML基于
transform:scale(比例) 进行缩放rem,等比缩放dpr

* 

1.响应式布局开发@media
2.等比缩放布局
按照固定的样式写一版*（例如 320），然后根据设备的宽度 让其除以320，计算出缩放比，最后让整个HTML基于
transform:scale(比例) 进行缩放
3.rem,等比缩放
REM响应式布局开发

第一步：拿到设计稿后（现在设计稿一般是750px的）我们设置一个初始的REM和PX的换算比例
（一般设置1REM=100px），为了方便后期换算
第二步：测量出设计稿中的元素的尺寸（ps测量出来是px单位的），在编写样式的时候就全部转化为REM的单位的（除以100即可）
=>100% 设计稿还原
第三步：编写一段JS，获取当前设备的宽度，让其除以设计稿的750，再乘以出事的换算比例100，

计算出当前设备下，1REM 应该等于多少像素，（只要改变html的font-size就可以啦）：这样html字体发生改变，之前的
所有以REM为单位的元素，都会自动缩放

然而  真实项目中的，主体响应式布局以REM为主，部分效果可以实现以flex来做，需要样式调整还是以@media来完成
   function computedREM(){
    let HTML=document.documentElement,
    winW=HTML.clientWidth;
    HTML.style.fontSize=winW/320*20+"px"
   }
   computedREM()

  window.addEventListener('resize',computedREM)


*/

/* 
dpr适配：屏幕像素密度比

高清屏：
视网膜技术：

css布局像素  像素和分辨率
手机本身按照40*40来渲染
图片本身真实大小：20*20的
图片就会被放大渲染
*/

其实大部分手机dpr现在都是2。 也有3的， 前端如果作图的话最好给设计要750的设计稿，这个的话他上边的图片就是相对于手机设备的宽度来说。就是2倍图。这样手机根据dpr缩放成两杯。正好是我们想要的一倍。 保证图片的不模糊，正常显示，另外如果他给的是375设计稿，那么咱们 在 蓝狐 上下载的一定要是2倍图 ，或者3倍的保证清楚一些