响应式布局

Posted 2022-12-11 wangshouren

响应式布局

在不同尺寸的设备上都能良好的展示，这就是响应式布局设计（Responsive Layout）

产品形态：

? 1.PC端(全屏页面需要宽度自适应，但是一般都是固定宽度的)
? 2.PC+移动端用同一套项目（简单的页面，例如：产品介绍，公司展示类的官网等）
? 3.移动端（移动端设备尺寸差异较大，需要做响应式布局开发）
? 嵌入到APP中的H5
? 微信中分享出来的H5
? 微信公号
? 小程序
? 靠浏览器访问的H5
? ...
? 4.RN(React Native) / ionic / cordova ... JS开发APP的框架，使用JS代码开发APP，最后框架会把代码转换为 安卓和ios 需要的代码

如何实现响应式布局开发?

? 最常用的方案：REM等比缩放响应式布局

做移动端H5开发，首先加META标签

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

</meta>

REM和PX一样都是样式单位，PX是固定单位，REM是相对单位（相对于当前页面根元素html的字体设定的单位）

我们开始给HTML的字体大小设置为100PX(1REM=100PX)，接下来我们写样式的时候，把所有的尺寸都用REM设定（测量出来的PX值/100就是应该设置的REM的值）,如果HTML的FONT-SIZE不变，用REM和PX一样，但是如果字体大小改变，也就是改变了REM和PX之间的换换算比例，那么之前所有用REM做单位的样式都会自动按照最新的比例进行缩放（实现了改动HTML的FONT-SIZE，整个页面中的元素都跟着缩放了，牵一发而动全身）

真实项目中，设计师给给我们一套设计稿（常用的尺寸：6401136 7501334 640*960 ...），拿到设计稿后，我们严格按照设计稿中的尺寸去编写样式
HTML
FONT-SIZE:100PX;

接下来写样式，把测量出来的PX都除以100变为REM，所有的单位基于REM来搞
=>假设设计稿是750,也就相当于750的设备下,1REM=100PX

我们页面运行在320的设备上，我们需要修改HTML的字体大小，以此实现页面跟着整体缩放：320/750*100 =>当前设备上HTML的字体大小