Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue rem回顾(初学者简单笔记)

 

目录

rem回顾

移动端适配

等比例缩放

下载插件

总结


rem回顾

实现自适应的rem布局。

通过把屏幕划分成几个等份,作为html字体的大小,当设备变化的时候,就除去这个份数,得出当前html的字体大小,然后转换为rem单位。

移动端适配

移动端适配 根据clientWidth

等比例缩放

适配第一种方案

设置body是为了盒子不被字体撑开,如下:

在越大的设备上 就越大 (750为设计稿宽度)

动态设定fontSize 可适配所有屏幕

 

适配第二种方案

750px/16 = 46.875rem

200px/16 = 12.5rem

页面元素的rem值 = 页面元素值(px)/ html font-size 字体大小

下载插件

可以通过vscode安装插件,进行px和rem的换算。

 

可以通过settings.json修改插件默认的fontsize计算值,根据项目进行设置

总结

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue rem回顾(初学者简单笔记)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/91807.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/91807.shtml
英文地址,请注明出处:http://en.pswp.cn/diannao/91807.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#语法基础总结(超级全面)(二)

文章目录c#语法基本元素关键字操作符(operator)类型转换标识符(Identifier)语句try语句迭代语句(循环语句)索引器文本(字面值)五大数据类型引用类型:值类型:变…

MyBatis分页神器PageHelper深度解析

PageHelper 是一个优秀的 MyBatis 分页插件,它通过简单的拦截器机制,实现了对 MyBatis 查询的物理分页(而非内存分页),极大简化了分页代码的编写。而 PageHelper 扩展 通常指的是在其核心功能基础上,为特定…

【2025/07/19】GitHub 今日热门项目

GitHub 今日热门项目 🚀 每日精选优质开源项目 | 发现优质开源项目,跟上技术发展趋势 📋 报告概览 📊 统计项📈 数值📝 说明📅 报告日期2025-07-19 (周六)GitHub Trending 每日快照&#x1f55…

【数据结构】二叉树初阶详解(一):树与二叉树基础 + 堆结构全解析

文章目录📝前言🌠树的概念和结构🌉树的概念🌉树的相关概念🌉树的表示🌠二叉树概念及结构🌉二叉树的概念🌉特殊的二叉树🌉二叉树的性质🌠二叉树顺序结构及实现…

Flutter基础(前端教程①⑤-API请求转化为模型列成列表展示实战)

models/post_model.dart定义 Post 数据模型包含 fromJson() 方法用于解析 JSONcontrollers/post_controller.dart管理帖子数据的获取和状态使用 http 包请求 API通过 RxList 和 RxBool 实现响应式状态管理views/post_list_view.dart展示帖子列表的 UI使用 Obx 监听状态变化包含…

第十五届全国大学生数学竞赛初赛试题(非数学专业类A卷)

第十五届全国大学生数学竞赛初赛试题(非数学专业类A卷) 文章目录第十五届全国大学生数学竞赛初赛试题(非数学专业类A卷)题目速览逐题详解题目速览 求极限: lim⁡x→3x39−62−x3−23.\lim\limits_{x \to 3} \frac{\sqrt{x^3 9} - 6}{2 - \sqrt{x^3 - 23}} \rule{2…

ROS1/Linux——Ubuntu、ROS1虚拟机环境配置

ROS1/Linux——Ubuntu、ROS1虚拟机环境配置 文章目录ROS1/Linux——Ubuntu、ROS1虚拟机环境配置编辑时间:系统环境Linux镜像下载Ubuntu相关链接iso镜像下载VMware操作虚拟机安装步骤基础设置设置语言设置窗口分辨率、图标大小等终端固定在左侧栏显示隐藏文件夹其他问…

万字解析LVS集群

一、集群和分布式介绍1.1、诞生的原因单台设备 “又贵又弱又容易挂”,扛不住现代业务的 “海量访问、海量数据、复杂计算”;集群 / 分布式让多台设备 “抱团干活”,分担压力(流量、存储、计算),还能 “坏了…

关于博客后续内容会以xmind内容转markdown格式来呈现

自己感觉不正确的地方 一直感觉学啥东西记到博客里,这样就方便后续回顾或者查找 但csdn貌似不适合全局搜索,也就是我居然先要知道我对应的模糊点对应到哪篇文章,然后再到那篇文章里找,简直麻烦死了,而且另外一个毛病是…

Python - 数据分析三剑客之Pandas

阅读前可参考NumPy文章 https://blog.csdn.net/MinggeQingchun/article/details/148253682https://blog.csdn.net/MinggeQingchun/article/details/148253682 ‌Pandas是Python中一个强大的开源数据分析库,专门用于处理结构化数据(如表格、时间序列等&…

深度解析:Python实战京东资产拍卖平台爬虫,从ID抓取到详情数据落地

深度解析:Python实战京东资产拍卖平台爬虫,从ID抓取到详情数据落地 对爬虫、逆向感兴趣的同学可以查看文章,一对一小班教学(系统理论和实战教程)、提供接单兼职渠道:https://blog.csdn.net/weixin_35770067/article/details/142514698 文章目录 深度解析:Python实战京东…

ServletConfig 接口详解

ServletConfig 接口详解 1. 核心概念 ServletConfig 是 Servlet 规范中定义的核心接口,用于在 Servlet 初始化阶段向 Servlet 传递配置信息。每个 Servlet 都有自己独立的 ServletConfig 对象。 2. 关键特性特性说明唯一性每个 Servlet 实例拥有独立的 ServletConfi…

Maven学习总结(62)—— Maven 打包瘦身和提速解决方案

臃肿的 Maven 项目 在 Java 项目开发中,Maven 作为强大的项目管理和构建工具,极大地简化了依赖管理和项目构建过程。但随着项目的不断演进,依赖的 Jar 包越来越多,我们的 Maven 项目也逐渐变得臃肿不堪。曾经,我参与维护一个大型的 Spring Boot 项目,随着业务功能的不断…

【Qt开发】Qt的背景介绍(三)-> 认识Qt Creator

目录 1 -> Qt Creator概览 2 -> 使用Qt Creator创建项目 2.1 -> 新建项目 2.2 -> 选择项目模板 2.3 -> 选择项目路径 2.4 -> 选择构建系统 2.5 -> 填写类信息设置界面 2.6 -> 选择语言和翻译文件 2.7 -> 选择Qt套件 2.8 -> 选择版本控…

HTML5中的自定义属性

自定义属性(Custom Attributes) 允许在标准 HTML 属性之外,为元素添加额外的元数据(metadata)。 1. 标准方式:data-* 属性 HTML5 引入了 data-* 前缀的自定义属性规范,所有以 data- 开头的属性都…

前端项目利用Gitlab CI/CD流水线自动化打包、部署云服务

叠甲前言 本文仅作为个人学习GitLab的CI/CD功能记录,不适合作为专业性指导,如有纰漏,烦请君指正。 Gitlab的CI/CD做什么用的 自工作以来,去过大大小小公司,有一些公司技术人员专业性欠佳,每当产品经理或…

基于typescript严格模式以实现undo和redo功能为目标的命令模式代码参考

下面是一个完整的、严格模式下的 TypeScript 实现,包含 CommandManager、Command 和 CompositeCommand 类,支持 undo/redo 功能。完整实现代码1. Command 接口和基类// src/commands/ICommand.ts export interface ICommand {execute(): void;undo(): vo…

2022年CIE SCI2区TOP,NSGA-II+直升机-无人机搜救任务分配,深度解析+性能实测

目录1.摘要2.数学模型3.求解方法4.结果展示5.参考文献6.代码获取7.算法辅导应用定制读者交流1.摘要 无人机任务分配对于保障搜救活动高效有序开展具有重要意义,但现有研究较少考虑无人机作业环境与性能对任务分配的影响。针对低空风场和地形因素对无人机能耗与性能…

暑期算法训练.4

目录 15.力扣 904.水果成篮 15.1 题目解析: 15.2 算法思路: 15.2.1 暴力解法: 15.2.1 滑动窗口 15.3代码演示: 15.4 总结反思: 16 力扣 438.找出字符串中所有字母的异位词 16.1 题目解析: 16.2算法…

关于个人博客系统的测试报告

1)项目背景2)项目功能介绍 登陆写博客/编辑已存在博客删除博客注销 2)基于项目功能设计相关测试用例3)基于测试用例编写自动化测试 准备工作登陆界面相关博客首页相关博客详情页相关编辑博客相关删除博客相关注销相关 4&#xff0…