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

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渲染的

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享