响应式开发基础知识以及大屏解决方案

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第1天，点击查看活动详情

1.响应式开发基础知识

1.1-媒体查询@media:

css中设置条件，基于@media

媒体设备： all所有设备、print打印设备/screen屏幕设备媒体条件，符合某个条件，写对应的样式max-width、min-width、max-height、min-heigth

1.2-视口viewport：

把html5页面放到手机上预览，默认情况下，不管手机设备有多宽，html都是按照980px或者1024px(黑莓)宽度渲染的,这样页面会整体缩小，内容也会整体缩小。

解决方案:viewport-设定页面渲染中的一些规则

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• initial-scale=1.0:初始缩放比例
• width=device-width:宽度等于设备宽度

1.3-等比缩放布局:

按照固定的样式写一版样式（例如:1920），然后根据设备的宽度，让其除以1920，计算除以缩放的比例，最后让整个html基于transform:scale(比例)进行缩放。

但是这么做会有一个问题就是，有些内容缩放后会模糊。

1.4-rem响应式布局开发(目前常用)：

css常用单位:

• px像素(固定单位)
• em相对单位，相对于父元素字体大小设定的单位
• rem（root em）相对于当前页面根元素(html)的字体大小设定的

使用rem响应式布局:

如果320px宽度下 html的font-size对应的是20px

那么在375px宽度下html的font-size对应的是(375/320)*20

document.documentElement.style.fontSize = (375/320)*20 + 'px';

2.响应式布局开发具体步骤:

• 拿到设计稿后，先在设计稿后(设计稿一般是750px)，我们设定一个处理的rem和px的换算比例(一般设置1rem = 100px,为了方便后期换算,不能写10px,因为浏览器最小的字体大小为12px)

• 测量出设计稿中，元素的尺寸(ps测出来的是px),在编写样式的时候，全部转换为rem(测量值➗100)

• 一般移动端最外层宽度，使用百分比

• 编写一段js代码:获取当前设备的宽度，让其除以设计稿的宽度（750），再乘以初始的换算比例100，计算出当前设备下，1rem应该等于多少像素。 这样html的font-size的大小一改变，之前所有以rem为单位的值，都会跟着自动缩放。

  // 1rem = 100px 的情况    
  		function computedREM (){
        let html = document.documentElement;
        let winW = html.clientWidth;
        html.style.fontSize = winW/750 *100 + 'px';
      }
      computedREM();
      window.addEventListener('resize',computedREM)
  

• 实际项目开发中以rem为主，部分效果实现可以基于flex来实现，需要样式微调整，还是要基于@media来完成

3.DPI适配：

DPR:屏幕像素密度比

1像素:

dpr为2，其实中的1px其实是2x2渲染的