本篇文章给大家谈谈rem响应式布局原理，以及响应式布局的原理对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、css样式布局及rem用法梳理
• 2、什么是响应式布局？
• 3、响应式布局-PC端和移动端同时适配
• 4、rem为什么可以实现自适应布局，在不同的手机端表现是什么？
• 5、rem自适应的原理
• 6、浅谈rem与rpx布局

css样式布局及rem用法梳理

视口（viewport）是用来约束网页中最顶级块元素的，即它决定了网页的大小，网页是先在视口上渲染，然后再通过视口放回到浏览器窗口上的，网页的渲染过程如下：

pc端视口的大小和浏览器的大小一样，所以网页是1：1的放到浏览器窗口上，而移动端视口就有点特殊，移动端视口的宽度是比移动端屏幕要宽，宽度尺寸一般是980px或者1024px，网页是视口上渲染完之后，为了能在移动端屏幕上显示整个网页，整个视口会整体缩放到屏幕的宽度，这样，网页看上去就整体缩放

具体如何设置视口以及禁止视口页面缩放可以自行百度

（主要针对移动端以及pc端网页需要实现等比放大缩小页面效果）

大概有以下几种

1、流体布局

流体布局其实就是宽度用百分比，高度用固定值的布局方式，宽度通过百分比来适配不同宽度的屏幕。

为了适配手机端不同尺寸的屏幕，我们在定义元素宽度的时候可以写百分比，百分比是相对于屏幕的宽度，所有宽度就可以做到自适应，而在高度方向，由于网页的高度是不定的，所以我们可以把高度写成固定的值(px),这种布局方式叫做流体布局。

注意两个概念

2、弹性盒模型布局flex

这种布局方式是通过css3新增的一些辅助布局的样式属性来制作布局的方式。

3、rem布局

rem是一种相对长度单位，通过这个长度单位可以实现元素宽高等比例缩放，从而完成不同宽度屏幕的适配。

4、响应式布局 （媒体查询）

通过样式动态查询屏幕的宽度，动态切换样式来适配不同宽度屏幕的布局方式。

Bootstrap是最典型的一种

待补充

实际开发中，pc端页面需要实现响应式等比缩放（即自适应），使用rem+弹性布局是比较现实及理想的解决方式

移动端可以使用rem布局，也可以使用px实现（主要用flex），具体看产品是怎么设计要求的

css3规定：1rem的大小就是根元素html的font-size的值。

rem其实是一个单位 ，是个相对单位 root em。rem就是root（根元素的大小）相对于html元素的字体大小的单位。

rem布局的原理

就是根据一个html根元素来控制，网页的布局，实现类似于自适应等比例的缩放的布局。

rem优势

通过修改html文字的大小，来改变页面中元素的大小，实现了页面的整体控制

rem的作用

通过设置 根元素html的font-size的大小，来控制整个html文档内的字体大小、元素宽高、内外边距等，根据移动设备的宽度大小来实现自适应，不同的设备都展示一致的页面效果。

简单用法

vscode中安装cssrem插件，通过这个插件可以自动计算rem数值。

具体设置如下

注意:设置后 vscode软件需要重启 否则计算的rem值会出错

待补充

可以通过js的方式来改变，也可以通过css媒体查询的方式来改变，

待补充

什么是响应式布局？

响应式布局能同时兼容多个终端，比如（手机、平板、PC）做一个网站转眼间就可以变成3个网站。可能有些人对“什么是响应式布局”还不是很了解，下面达内长沙web培训就跟大家简单说下什么是响应式布局：响应式布局：简单点说，就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为我们大大节省了资源。那么响应式布局的优点和缺点又有哪些呢？优点：1.面对不同分辨率设备灵活性强2.能够快捷解决多设备显示适应问题缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。说了这么多，可能还有很多人，不明白响应式布局该怎么去做，以及它的开发原理是什么？原理：简单点说响应式布局它是通过CSS中MediaQuery（媒介查询）@media功能，来判断我们的终端设备宽度在多少像素内，然后就执行与之对应的CSS样式。

响应式布局-PC端和移动端同时适配

第二种 rem响应式布局方案(等比缩放)：

使用的时候按照1920的设计稿来做。100px=1rem，font-size设置成100px; 750px的设计稿 1rem = 100px 设置屏幕超过2560及以上，就固定1rem = 200px， 宽度小于600及以下，就固定1rem = 32px

第三方库用的一般是使用px单位，无法使用rem适配不同设备的屏幕。

解决办法：使用px2rem-loader插件将第三方ui库的px转换成rem单位。

移动端设计稿一般都是750px的，所切的图就是@2x 的，在一些DPR为3.0的手机上使用@2x图片大多数也会显示的很清晰，这样就是为什么设计稿要750px的

rem为什么可以实现自适应布局，在不同的手机端表现是什么？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

1. 静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

rem自适应的原理

rem布局 --一个很神奇的布局

1 rem这个单位它是以html的font-size改变的

2 不同的分辨率 ，由375到414 ，比例=414/375 *50 就是414手机的font-size

3 网易的原始布局是1rem =100px

浅谈rem与rpx布局

rem大家或许都比较熟悉，而rpx则是腾讯在公测小程序时所推崇；二者实质并无太大的区别，在很多的小白前端开发阶段会不懂为什么一些老前端在开发移动端过程中会出现部分地方不使用rem或者rpx而转用px，接下来谈谈我的看法：

一般开发中横向布局通常使用rem/rpx布局，纵向布局部分使用px

（适用于一行布局中多个元素布局）

1. 这里以上图为例，因为每一台手机的屏幕横向的大小是固定的，如果使用px则可能在小屏幕出现位置不可控，导致内容换行错乱等问题。故使用rem/rpx单位布局。

2. 而手机纵向的高度是无限延伸的，所以上下边距和边框等则可以使用px固定像数，这样不会对页面效果产生太大影响，而且也不用担心元素不可控错乱等问题。

（适用于一行中单元素或者左右两端的小型元素布局）

1. 同样一上图为例，对于这样的单元素或者左右小元素，可以选择px固定尺寸，原因是当横行布局只有一个元素时根本不会产生错乱，因为屏幕的宽度远大于这点小元素的宽度，如果产生错乱则可以放弃该手机适配了（这种小屏幕早该淘汰了）。

2. 纵向布局原理与上面一致。

本文章仅代表个人开发观点，实际情况实际分析，如果还是不懂就记住一句话：发生错乱就必须使用rem或者rpx布局；围绕此观点就不会有错。如果有错误还望各位大师指出，这也是我第一次写文章，多多指教。

关于rem响应式布局原理和响应式布局的原理的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。