首页 > 其他分享 >rem自适应页面宽度

rem自适应页面宽度

时间:2024-09-20 11:14:07浏览次数:8  
标签:scale const setRem 宽度 rem baseSize 页面

编写页面

// 基准大小
const baseSize = 16
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 750 宽的缩放比例,可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 1920
    console.log(scale)
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

引入main.js

import '@/utils/rem.js'

在编辑器中下载pxtorem插件将页面中所有的px转换为rem

标签:scale,const,setRem,宽度,rem,baseSize,页面
From: https://www.cnblogs.com/baozhengrui/p/18422112

相关文章

  • Vue 目录树正常跳转,浏览器新增页面地址栏输入后created函数请求不走完
    在vue树中开发当created()涉及到多个接口请求的时候,一般我们都是用来渲染页面或者给变量初始化,在实际开发中我遇到了浏览器新增页面用地址直接访问页面数据以默认值展示导致报错,当发现created()涉及多个请求赋初值的情况,将请求用{}包起来保证顺序执行,当每个请求是独立的就会有异步......
  • VUE框架CLI组件化配置Router实现单页面路由程序省市切换联动------VUE框架
    //导入vue-router对象importVueRouterfrom"vue-router";importHebeifrom"../components/hebei.vue";importHenanfrom"../components/henan.vue";//创建路由器对象(在这个路由器对象中配置路由)constrouter=newVueRouter({//在这里配置所有的路由规则......
  • 一个vue 页面
    好的,我会对你的代码进行一些样式上的调整,以使布局更加美观和实用。以下是修改后的代码:```html<template><divclass="login-page"><el-formref="formRef":model="form"class="centered-form"label-width="120px"><el-row:......
  • vue项目记录每个页面保持滚动条的位置
    路由元信息增加keepAlive:true,scrollTop:{top:0},{path:'/**/**',name:'**',component:()=>import('@/views/**/index.vue'),meta:{title:'**',affix:fals......
  • 多协议数据库管理工具:Navicat Premium (Win&Mac) 中文特别版
    NavicatPremium是一款强大的数据库管理和开发工具,它支持多种数据库系统,包括MySQL、MariaDB、MongoDB、SQLServer、Oracle、PostgreSQL和SQLite。这款软件为用户提供了一个直观的图形用户界面,使得创建、组织、访问和共享信息变得安全而简单。NavicatPremium的主要特点......
  • 如何用Python将HTTP接口封装成可视化页面。
        在软件行业中,经常会遇到有一些功能只能通过接口触发,没有页面。这样很不方便,。我们这里,就是通过PyQt5实现,将接口的入参,封装成一个可视化的表单。将用户在表单中填写的数据,传给接口,接口再带参请求业务 1.先看最终的效果,用户打开桌面应用后,只会出现下面的弹窗, 接口......
  • [TamperMonkey] 批量替换页面内容
    //==UserScript==//@nameReplacewords//@namespacehttp://tampermonkey.net///@version2024-09-18//@description替换网页中的指定关键字//@authorYou//@match*://ctext.org/*//@iconnone//@grantnone//......
  • 【w0网页制作】Html+Css网页制作影视主题之庆余年Ⅱ含轮播表单(5页面附源码)
    庆余年2HTML+CSS网页开发目录......
  • 如何使用CSS和JS使网页页面灰掉
    让页面灰掉,通常是通过CSS样式或JavaScript来实现。以下是一些具体的方法:一、使用CSS样式应用filter属性CSS的filter属性可以用来对元素应用图形效果,如灰度。要将整个页面或特定元素变灰,可以在该元素的CSS样式中应用filter:grayscale(100%);。例如,要让整个页面变灰,可以在标签或......
  • 易优eyoucms网站重新安装时,删除了install.lock文件,可是还是出现404页面
    当您在重新安装网站时删除了install.lock文件但仍出现404页面,可能是因为某些配置文件或缓存文件未被正确处理。以下是详细的解决步骤:1.确认删除install.lock文件确保install.lock文件已被正确删除。删除install.lock文件登录FTP客户端:使用FTP客户端登录到服务器。找......