1、rem布局 它是一个长度单位，这个长度单位是根据‘根元素’的字体大小的单位确定的根元素字体大小 = 1rem 响应式布局 它是在页面宽度改变时，整个页面或者页面中的局部随着页面的缩放进行响应并实时变化 响应式布。

2、核心思想 百分比布局可实现响应式布局，而rem相当于百分比布局 实现手段 动态获取当前视口宽度width，除以一个固定的数n，得到rem的值表达式为rem = width n * windowdevicePixelRatio1 这里考虑设备。

3、手机的物理尺寸是375px所以在用css的时候，设计尺寸需要除以2要用rem完成移动端的适配，需要固定浏览器的显示宽度不变也就是说，我在设计稿上量到宽367px的大小，那么css里可以直接写width367rem此时，以375。

4、响应式布局 采用自适应布局和流式布局的综合方式，为 不同屏幕分辨率范围 创建 流式布局 弹性布局 要点在于使用 em和rem单位 来定义元素宽度，与流式布局有极大的相似性，但也有不同之处，主要区别在于弹性布局的尺。

5、1 这里以上图为例，因为每一台手机的屏幕横向的大小是固定的，如果使用px则可能在小屏幕出现位置不可控，导致内容换行错乱等问题故使用remrpx单位布局2 而手机纵向的高度是无限延伸的，所以上下边距和边框等则可以。

6、1less+rem+媒体查询 2lflexiblejs+rem 响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不。

7、说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么原理简单点说响应式布局它是通过CSS中Media Query媒介查询@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的。

8、这种布局中包裹文字的各元素的尺寸采用emrem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位默认的文字大小16px就是1em5响应式布局 每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变，设计方法。

9、第二种 rem响应式布局方案等比缩放使用的时候按照1920的设计稿来做100px=1rem，fontsize设置成100px 750px的设计稿 1rem = 100px 设置屏幕超过2560及以上，就固定1rem = 200px， 宽度小于600及以下，就固定1。

10、响应式布局 一使用百分比与rem 宽度% 高度rem 字号rem 在html中设置根元素的fontsize大小 这样页面中的rem将根据根元素显示字号大小，2rem就是32px 二使用百分比与px 单位设置px，移动端的px自动转为rem。

11、优点1面对不同分辨率设备灵活性强 2能够快捷解决多设备显示适应问题 缺点不能完全兼容所有浏览器，代码累赘，加载时间加长说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么原理。

12、在pc端，视口宽高就是浏览器得宽高rem是一种弹性布局，它强调等比缩放，100%还原它和响应式布局不一样，响应式布局强调不同屏幕要有不同的显示，比如媒体查询。

13、响应式的基础是“相对”宽度，“相对”高度，“相对”大小，是percentage， em， rem 而不是px，pt如果你希望一个页面占满半个viewport，那么你应该用50%的width，bootstrap和所有主流的框架都是以此为基础的，row是100%。

14、3em和rem单位字体的大小是不固定，都是通过字体大小计算得到的像素值所以两者多用于响应式布局注意选择使用什么字体单位主要由你的项目来决定，如果你的用户群都使用最新版的浏览器，那推荐使用rem，如果要考虑兼容性。

15、2设计方法使用@media媒体查询给不同尺寸和介质的设备切换不同的样式在优秀的响应范围设计下可以给适配范围内的设备最好的体验，在同一个设备下实际还是固定的布局四响应式布局ResponsiveLayout随着CSS3出现了媒体。