rem配置 页面等比例缩放

原创 已于 2022-08-01 17:22:32 修改 · 768 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #html #css

于 2022-08-01 16:45:20 首次发布

安装插件：px to rem & rpx & vw（cssrem）

在这里插入图片描述
在这里插入图片描述

然后找到=>文件=>首选项=>设置=>setting.json

在这里插入图片描述
然后这样就成功了，rem px就可以自动换算适应了

然后再在根页面添加script标签中配置以下代码：
这里面的根节点和以上setting.json文件中配置的font-size大小基准要同步
在这里插入图片描述

VUE2.X 使用lib-flexible px2rem-loader 实现1920*1080下的等比缩小
weixin_44472982的博客
05-30 1544
效果 1.先用脚手架安装基础框架 并实现一个水平居中的效果 如下图所示 结构目录如下 reset.css html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, s
大屏适配方案
m0_66832657的博客
07-04 458
大屏适配方案
手机端页面自适应解决方案—rem布局
weixin_34308389的博客
03-28 492
该方案目前已过时，这里是更加完美的替代方案——rem布局(进阶版) 相信很多刚开始写移动端页面的同学都要面对页面自适应的问题，当然解决方案很多，比如：百分比布局，弹性布局flex（什么是flex），也都能获得不错的效果，这里主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局 rem布局非常简单，首页你只需...
前端rem适配(自适应布局)
Reset_Xc的博客
03-30 5051
前端rem适配
rem配置
chaitong2204的博客
02-19 579
rem的值相当于根元素font-size值的倍数 1rem = 根元素font-size; 2rem  = 根元素font-size * 2 dom加载完毕动态设置根元素font-size html.style.fontSize = window.innerWidth/10 + 'px’ --------------------------------------------------...
前端开发入门到实战：通过 rem 和 vw 实现页面等比例缩放自适应
软件开发-前端开发-IT
07-29 1513
一、rem 和 vw 简介 1. rem rem 是相对长度单位，是指相对于根元素(即html元素)font-size(字号大小)的倍数。 浏览器支持：Caniuse 示例 若根元素 font-size 为 12px html { font-size: 12px; } h1 { font-size: 2rem; /* 2 × 12px = 24px */ } p { ...
html pc页面自动缩放,WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现
weixin_32126033的博客
05-31 3507
WEB页面实现等比例缩放自适应 - 通过 rem 和 vw 实现一、rem 和 vw 简介1. remrem 是相对长度单位，是指相对于根元素(即html元素)font-size(字号大小)的倍数。示例若根元素 font-size 为 12pxhtml {font-size: 12px;}h1 {font-size: 2rem; /* 2 × 12px = 24px */}p {font-siz...
移动端REM布局自动等比缩放还原设计
superw的博客
11-18 683
同学们面对移动端不同分辨率的手机，肯定也为自适应的布局头大吧。 有了REM一切好像变的简单了，现在一般移动端的设计宽度都是750PX，或者640PX.今天我们就以750的设计稿为例讲下怎么还原设计吧。 在750px下 html{font-size: calc(100vw/7.5);} 100vw=750px–>font-size:750px/7.5 -->100px–>1rem。这里两个概念，一是VW就是手机屏幕宽度的单位，不管你手机屏幕实际宽是多少都可以用100VM来表示，类似于是一
转载（web app变革之rem）
weixin_30699741的博客
12-26 832
rem这是个低调的css单位，近一两年开始崭露头角，有许多同学对rem的评价不一，有的在尝试使用，有的在使用过程中遇到坑就弃用了。但是我对rem综合评价是用来做web app它绝对是最合适的人选之一。 rem是什么？ rem（fontsizeoftherootelement）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到r...
大屏页面三种缩放：按分辨率进行缩放、等比缩放（展示全部内容、展示部分内容和滚动条）
sxww_zyt的博客
04-30 1万+
本篇记录了大屏的三种缩放（按分辨率进行缩放、窗口分辨率缩放 + 等比缩放 + 留白(窗口始终呈现等比之后的页面)和窗口分辨率缩放 + 等比缩放 + 不留白而改用滚动条）的具体实现，记录于此，可供个人学习和参考，如有更好的办法，请斧正~
利用rem和媒体查询实现屏幕发生变化时元素宽高等比例缩放
m0_74001959的博客
12-12 2748
我们看到一些网页在你改变浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面，在移动端，不同的时间有不同的尺寸，不同的屏幕尺寸有不同的样式，那么如何做到屏幕尺寸发生变化时页面的宽度和高度也随之改变呢？首先我们需要学习rem和媒体查询知识媒体查询（Media Query）是CSS3新语法，可以针对不同的屏幕尺寸设置不同的样式，当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
px rem 转换的几种方法(分辨率字体调整)
White feathe 的博客
06-19 1万+
目前（2016-06-19）px转rem 的工具已经不少了。下面介绍几个转换的方案。 转换方式1：　使用 在线-px转rem　　在线 px 转换 rem 工具地址：http://520ued.com/tools/rem转换方式2： 使用 sublime text 3 rem插件自动转换。 　　 效果如下： 　 　　 使用步骤　　 1、下载插件 https://github.com/
前端大屏适配几种方案
热门推荐
qq_38210427的博客
04-24 1万+
记录一下前端大屏的几种适配方案。我们是1920*1080的设计稿。文章目录一、方案一：rem+font-size1.查看适配情况1.1 1920*1080情况下1.2 3840*2160(4k屏)情况下1.3 7680*2160 超宽屏下二、方案二：vw（单位）三、方案三：scale（缩放）强烈推荐1、根据宽度比率进行缩放2、动态计算2.1、超宽屏最终适配效果大屏是适配是前端开发必不可少的技能，适配各种大屏也是为了给用户更好的体验。
rem设置 vscode设置rem 适配 px转rem
weixin_50885665的博客
10-30 1416
二、 如果代码里面设置 就按代码里面来 -- 20。
移动端rem和px的转换
LzzMandy的博客
05-11 909
1、参考 使用css方法设置https://blog.youkuaiyun.com/unbreakablec/article/details/87268904 使用js方法设置https://www.cnblogs.com/web-wjg/p/7872468.html 2、使用css方法设置1rem=10px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta.
flexible.js 移动端自适应 rem
Your_Smile_的博客
08-24 1239
(function flexible(window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize() { if (document.body) { d...
vscode安装px to rem & rpx & vw (cssrem) 插件及配置
大雾起了清晨
06-08 5396
vscode安装px to rem & rpx & vw (cssrem) 插件及配置
vue中自适应rem的设置及vant组件库px自动修改为相对大小的方法两则（postcss-pxtorem和postcss-px-to-viewport）
weixin_41990749的博客
09-18 3270
在使用vant组件时，vant采用的都是px的绝对宽度，其设计稿是视口宽度为375px作为基准值。我们在开发时，为了自适应宽度，往往采用rem或vm或百分比等相对单位作为宽度。但vant组件写死了，我们如何在代码中不修改vant原生的style，也能让页面在运行时做到自适应变化呢。此时重新启动服务，发现原来vant组件，或原页面中使用的px值，全部自适应为rem了。步骤4：在main.js中引入import '@/libs/rem.js'步骤3：新建文件src/libs/rem.js。
《前端开发vscode插件》
maeryang0510的博客
05-17 2862
一件事，不管是太晚还是太早，都不会阻止你成为你想成为的人。这个过程没有时间限制，只要你愿意，你可以随时开始。
vue2数据大屏页面同比例缩放
最新发布
01-08
### 实现 Vue2 数据大屏页面内容的响应式布局及同比例缩放 #### 使用 ECharts 和 CSS 进行模块化设计 对于数据大屏展示，实现响应式的常见方式是将页面按照功能或视觉区域划分为多个独立组件。这样做不仅提高了代码的可维护性和重用率，还增强了项目的结构清晰度[^1]。 ```javascript // Example of a modular component structure in Vue.js <template> <div class="dashboard"> <!-- Individual components representing different sections --> <sectionA /> <sectionB /> ... </div> </template> <script> import sectionA from './components/SectionA.vue'; import sectionB from './components/SectionB.vue'; export default { name: 'Dashboard', components: { sectionA, sectionB } }; </script> ``` #### 绑定数据到视图层 当涉及到从单一API获取整个屏幕所需的所有数据时，可以考虑通过Vuex管理状态来简化全局数据流处理过程。这有助于保持应用逻辑的一致性并减少重复请求次数。 ```javascript // store/index.js const state = { dashboardData: null, }; const actions = { async fetchAllData({ commit }) { const response = await axios.get('/api/dashboard'); commit('setDashboardData', response.data); }, }; const mutations = { setDashboardData(state, data) { state.dashboardData = data; }, }; ``` #### 利用CSS和JavaScript创建自适应布局 为了使界面能够根据浏览器窗口尺寸动态调整其外观，在样式表中采用媒体查询配合相对单位（如`rem`, `vw`)是非常有效的手段之一；同时借助于JavaScript监听resize事件实时更新DOM元素属性值以达到最佳显示效果[^2]。 ```css /* styles.css */ body { margin: 0; } .container { width: 100%; height: 100vh; } ``` ```javascript // main.js or within specific component script tag window.addEventListener('resize', () => { let scaleRatio = window.innerWidth / designWidth; // Assume you have defined the designWidth variable somewhere. document.documentElement.style.setProperty('--scale-ratio', `${scaleRatio}`); }); ``` #### 应用 PostCSS 插件优化移动端适配方案 针对不同设备间的差异性需求，可以通过配置PostCSS插件链中的`postcss-pxtorem`工具来自动生成基于根字体大小的比例转换规则，从而确保文字和其他UI控件能够在各种分辨率下都能良好呈现[^3]。 ```json { "plugins": [ require('autoprefixer')({ overrideBrowserslist: ["last 2 versions"], cascade: false }), require('postcss-pxtorem')({ rootValue: 16, propList: ['*'], selectorBlackList: ['.ignore'] }) ] } ```
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值