前端rem适配(自适应布局)_如何使用rem来对网页进行自适应-CSDN ...

相关文章推荐

阳光的酱肘子 · 注意力层后需要经过激活函数吗- CSDN文库· 2 月前 ·

阳光的酱肘子 · 不要再用js设置rem了，现代css自适应方 ...· 2 月前 ·

阳光的酱肘子 · 使用rem配置PC端自适应大屏- ...· 2 月前 ·

阳光的酱肘子 · rem自适应移动端布局- ...· 2 月前 ·

风流的啄木鸟 · 移动端自适应vw、vh、rem - ...· 9 月前 ·

在开发过程中，前端会存在多种不同的适配方案，如自适应布局，响应式布局。

自适应布局：在不同设备，不同视口宽度的情况下，让页面显示效果相同。
响应式布局：在不同设备，不同视口宽度的情况下，让页面显示不同的效果，如手机端和PC端的不同效果。

在自适应布局中，em、rem是目前常用的适配手段，接下来主要探讨使用rem进行自适应适配的方案。

已知设计图宽度是1920*1080，现需要对不同终端，不同屏幕大小(如1920*1080 125%，1920*1080 100% ，2560*1600 125%，3000*2000 200&本人电脑)进行适配。

一般在使用rem做自适应布局中，会首先未根节点设置一个数值( html: { font-size: 62.5% } );

其计算过程如下：

1. 首先大多数浏览器的默认字体大小都是16px；根据rem计算原则得到此时的rem为

1rem = 根节点字体大小 = 16px

2. 为了方便计算，此时想把 1rem = 10px，之后的开发中设置125px可以直接转化成12.5rem

html { font-size: 62.5% } ( 10px / 16px )

3. 所以此时 1rem = 16px * 62.5%(10px / 16px) = 10px

开发之前，先对照设计图计算并设置出rem

const setRem = () => {
  const reScreenSize = (wid) => {
    // 当设备宽度小于1400px时，不在改变rem的值
    if (wid <= 1400) return;
    let w = document.documentElement.clientWidth; // 获取设备的宽度
    let n =
      10 * (w / 1920) > 40
        ? 40 + 'px'
        : 10 * (w / 1920) >= 7.4
        ? 10 * (w / 1920) + 'px'
        : 7.4 + 'px';
    document.documentElement.style.fontSize = n;
  reScreenSize();
  window.addEventListener('load', reScreenSize);
  window.addEventListener('resize', () => reScreenSize(document.documentElement.clientWidth));
export default setRem;
本次开发场景是应用与React中，创建一个设置rem的工具类。
 
个人理解在使用rem时与使用%进行对不同设备进行适配时的效果和原理相近，只不过在使用百分比进行开发时不容易控制细节问题，所以在一些细节掌控方面还需要进行rem适配及计算。对本场景的理解如下： 
        使用场景：1920*1080设计稿 
        设置rem：为方便计算，设置 1rem = 10px（这里的px相对于设计稿来说） 
                1rem = 10 * ( 视口宽度 /  设计稿宽度 ) 
                 在此基础上增加一些不同情况的容错，最后可以得：                                                        
const reScreenSize = (wid) => {
    if (wid <= 1400) return;
    let w = document.documentElement.clientWidth; // 获取设备的宽度
    let n =
      10 * (w / 1920) > 40
        ? 40 + 'px'
        : 10 * (w / 1920) >= 7.4
        ? 10 * (w / 1920) + 'px'
        : 7.4 + 'px';
    document.documentElement.style.fontSize = n;
       在计算好rem后，添加监听事件，当页面加载load以及视口变化resize时，执行监听事件去改变rem，以达到对不同设备适配，不同放大比例适配。 
1920*1080 100% 设备下显示 
 3000*2000 100% 设备下显示 
  开发小贴士： 
         在使用VsCode进行前端开发时，VsCode有一个叫px to rem & rpx & vw (cssrem)的插件，可以设置rem的基准font-size：10。在样式时，可以按照设计图直接输入300px，会有代码提示换算后的rem，无需手动在计算，非常好用o(￣▽￣)ｄ 
在自适应适配中，利用rem相对尺寸的特性，根据视口大小的不同，不变改变根节点的字体大小，从而改变rem的相对大小，最后计算得出在不同视口下的px。 
以上是在项目中，碰到的关于使用rem适配的问题，以及个人对rem的理解。后续如果有新的理解会不断更新。
1、让一些不能等比自适应的元素，达到当设备尺寸发生改变时等比例适配当前设备
2、使用媒体查询根据不同设备比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化，元素尺寸也发生变化，从而达到等比例缩放的适配
二、技术选取
rem+媒体查询+less技术
三、设计稿
设计稿一般由网工提供，设计稿现在基本以750px为准，根据设计稿要求进行项目开发。
四、元素大小取值方法
注：拿到设计稿时，一般将屏幕宽度分15等份 比如750px 750
				let setFont = function () {
      // 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
      let html = document.documentElement;// 获取html
      // 获取宽度
      let width = html.clientWidth;
      // 判断
      if (width &...
				文章目录1、rem是什么？2、rem媒体查询3、不同设备移动适配4、rem——flexible移动适配
1、rem是什么？
rem是目前好多企业都在使用的移动端界面的适配方案，是一种尺寸单位
rem单位
rem单位是相对于HTML标签的字号计算结果
1rem = 1HTML字号大小
网页的根就是 html 标签
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8
1rem = html之font-size
根据设计图 1366宽 html设置100px 100px的元素==1rem
比如实际浏览器 2732 宽 同样设置1rem ，那根元素要设置多少，使俩者比例一致
1366:100=2732:x
得x=200
html设置font-size=200px 而其他元素设置的rem不用变化
var deviceWidth（不考虑兼容性可使用vw,vh获取视图窗口viewport宽高）
setHtmlFontSize()
if (window.addEventListener) {
  window.addEventListener(
				- Svelte 是一个`构建 web 应用程序的工具`。
- Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似，都怀揣着一颗让构建交互式用户界面变得更容易的心。
但是有一个关键的区别：Svelte 在 `构建/编译阶段` 将你的应用程序转换为理想的 JavaScript 应用，而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本，并且在应用程序首次加载时没有额外损失。
你可以使用 Svelte 构建整个应用程序，也可以逐步将其融合到现有的代码中