vue中响应式布局如何将字体大小改成自适应

目录
  • 响应式布局将字体大小改成自适应
  • vue文字大小自适应问题

响应式布局将字体大小改成自适应

1.在app.vue的生命周期函数中添加一段代码来设置页面的rem

 mounted: function() {
    // 页面开始加载时修改font-size
    var html = document.getElementsByTagName("html")[0];
    var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
    // 这里的750是指设计图的大小,自己根据实际情况改变
    html.style.fontSize = oWidth / 750 * 100 + "px";
    console.log('rem:', html.style.fontSize);
  }

2.在style中使用媒体查询来进行阶段性的字体大小设置(这个自己调整试一试,我调的可能不合适)

/* 手机屏幕的字体大小 */
@media screen and (max-width: 768px) {
  #app {
    font-size: 0.05rem;
  }
}
/* 笔记本电脑的字体大小 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  #app {
    font-size: 0.08rem;
  }
}
/* 台式电脑显示器屏幕字体大小 */
@media screen and (min-width: 1024px) {
  #app {
    font-size: 0.08rem;
  }
}

3.然后页面的默认字体大小设置好了,之后局部样式的字体大小就自行调整

4.要注意的是,字体大小的设置以后都要用rem,这样是为了以后动态的修改全局字体样式方便

vue文字大小自适应问题

font-size:calc(100vw * 24 / 1920); 
  • calc：是一个css自带的计算方法，可以自动计算后返回px单位的值
  • 100vw：vw是屏幕的宽度。也就是百分百屏幕宽度。
  • *100：这里乘的100代表100px。
  • 1920：设计稿的宽度

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 实现一个VUE响应式属性装饰器详析

    实现一个VUE响应式属性装饰器详析

    目录 前言 不使用任何的响应Api 使用 reactive 实现 使用 ref 实现 使用装饰器实现 实现Reactive装饰器 实现Watch装饰器 总结 前言 使用面向对象的开发思想难免会用到类,既然有了类,那就应该有实例,然而我们使用类的时候可能需要实例中的某个属性是vue的响应属性,也可能里面的某个方法也可以被vue的watch监听.我就开始琢磨如何通过 Composition API 来实现这个类属性装饰器 不使用任何的响应Api // TestReactive.ts export c

  • vue视图响应式更新详细介绍

    目录 概述 思路 第一步统一封装更新函数 第二步监听并触发视图更新 引入Dep管家 实现下语法糖v-model 概述 前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化,但是当数据变化时,视图还不能够跟随数据实时更新.本文就在之前的基础上介绍下视图响应式更新部分. 思路 统一封装更新函数 待数据发生改变时调用对应的更新函数 这里思考个问题: 在何时注册这个更新函数? 如何找到对应的更新函数? 第一步统一封装更新函数 基于上篇文章compile的部分,将数据初始化的部分统一封装起来.

  • vue如何使用媒体查询实现响应式

    目录 使用媒体查询实现响应式的两种方式 前提 1.在每个组件中为其使用媒体查询 2.写n套页面,在使用这些页面的组件中进行一次媒体查询 vue中的媒体查询 语法 使用媒体查询实现响应式的两种方式 前提 依赖: sass,sass-loader 1.在每个组件中为其使用媒体查询 这种方法的有点是减少了重写不同终端同一组件的工作量,缺点是每个组件都要使用媒体查询,当一套页面组件不同时,需要进行组件的显示与隐藏(display:none!important),在不同终端区别不大的情况下建议使用这种方法

  • 深度解析 Vue3 的响应式机制

    深度解析 Vue3 的响应式机制

    目录 什么是响应式 响应式原理 定制响应式数据 Vueuse 工具包 什么是响应式 响应式一直都是 Vue 的特色功能之一:与之相比,JavaScript 里面的变量,是没有响应式这个概念的:你在学习 JavaScript 的时候首先被灌输的概念,就是代码是自上而下执行的: 我们看下面的代码,代码在执行后,打印输出的两次 double 的结果也都是 2:即使 我们修改了代码中 count 的值后,double 的值也不会有任何改变 let count = 1 let double = count

  • Vue 如何关掉响应式问题

    Vue 如何关掉响应式问题

    目录 Vue如何关掉响应式 例子 v-once Vue响应式的处理过程 Vue如何关掉响应式 大家都知道Vue有双向数据绑定 ,但是很少人知道怎样把它这个功能关掉 比如想要让某个值的改变不改变原有值 使用 Object.freeze(),这会阻止修改现有的 property,也意味着响应系统无法再追踪变化. 例子 var obj = {   foo: 'bar' } Object.freeze(obj) new Vue({   el: '#app',   data: obj }) <div id

  • 关于vue2响应式缺陷的问题

    关于vue2响应式缺陷的问题

    目录 vue2响应式缺陷 1.对象新增的属性没有响应式 2.数组的部分操作没有响应式 vue2与vue3的响应式原理 vue2响应式 vue3响应式雏形 vue3的响应式相较于vue2的优势 vue2响应式缺陷 响应式 : 数据改变 ==> 视图跟着改变 vue2响应式缺陷 1.对象新增的属性没有响应式 对象,新增属性b,修改b的值,值改变但视图并未更新 解决方案 : 使用vue提供的 api $set(对象,属性名,值) 效果如属性c 2.数组的部分操作没有响应式 数组中有7种操作有响应式 a

  • vue中响应式布局如何将字体大小改成自适应

    目录 响应式布局将字体大小改成自适应 vue文字大小自适应问题 响应式布局将字体大小改成自适应 1.在app.vue的生命周期函数中添加一段代码来设置页面的rem mounted: function() {     // 页面开始加载时修改font-size     var html = document.getElementsByTagName("html")[0];     var oWidth = document.body.clientWidth || document.doc

  • vue-cli中实现响应式布局的方法

    我们在进行前端开发中必然会遇到PC与移动端的适配,面对这样的问题有些公司会准备两个页面,移动是移动,PC是PC,而响应式布局就是根据用户不同的机型展示不同的页面,废话不多说,直接贴代码 首先我们这个功能是借助vuex实现的,没下载的小伙伴可以先下一个 yarn add vuex 既然是响应式布局就要准备两套css,一个是PC端的css,一个是移动端的css,我们暂且将PC端的样式称为computer,移动端的样式称为mobile 我们首先要做的就是当前屏幕的宽度 state: { screenW

  • JS中使用media实现响应式布局

    JS中使用media实现响应式布局

    常见写法: 下面总结常见的响应式布局的分类: @media screen and (max-width:320px){ #talkFooter .editArea{-- } } @media screen and (min-width:321px) and (max-width:375px){ #talkFooter .editArea{-- } } @media screen and (min-width:376px) and (max-width:414px){ #talkFooter .e

  • 谈一谈bootstrap响应式布局

    谈一谈bootstrap响应式布局

    随着移动端的用户越来越多,传统的web系统架构无法兼容很多移动终端的正常使用.在工作中也会发现,现在很多的客户都有在手机.平板等移动终端上使用管理系统的需求.如果单独为每一个终端开发相应的响应网页,这必定增加项目的成本和开发人员的压力.这时候了解响应式布局就很有必要,响应式布局就是为解决多终端问题而生的.本次介绍的是轻量级.开源的.免费的bootstrap. 搭建开发环境 首先下载官网的boostrap源码包:http://www.bootcss.com/. 开发简单的项目不必加入源码中的所有c

  • 简要了解jQuery移动web开发的响应式布局设计

    简要了解jQuery移动web开发的响应式布局设计

    响应式布局设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计.这意味着,无论用户是在移动.平板还是桌面设备上浏览 Web 页面,设计都将根据该设备的屏幕分辨率显示特定的布局,从而适当地响应设备. 该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计.对不同屏幕分辨率的反应方式. 没有自定义样式,我们的电网将3列的布局在所有的屏幕宽度: 在我们的自定义样式,我们希望此网格叠加在狭窄的宽度,然后切换到一个标准的3栏布局.在很宽的屏幕宽度,我们

  • Bootstrap禁用响应式布局的实现方法

    在Bootstrap中极其重要的一个技术内容便是响应式布局了,一次编码针对不同设备终端的强大能力使得响应式技术愈发流行. 不过正所谓"萝卜青菜各有所爱",如果你想要使用Bootstrap开发自己的项目却又恰巧不太喜欢响应式布局(或者你所设计的页面布局不允许你使用响应式技术),那么你可以通过以下方式禁用响应式布局. 移除标签 禁用第一步,就是需要移除在head标签中添加的 <meta name="viewport" content="width=dev

  • 浅谈Vue 数据响应式原理

    浅谈Vue 数据响应式原理

    前言 Vue的数据响应主要是依赖了Object.defineProperty(),那么整个过程是怎么样的呢?以我们自己的想法来走Vue的道路,其实也就是以Vue的原理为终点,我们来逆推一下实现过程. 本文代码皆为低配版本,很多地方都不严谨,比如 if(typeof obj === 'object')这是在判断obj是否为为一个对象,虽然obj也有可能是数组等其他类型的数据,但是本文为了简便,就直接这样写来表示判断对象,对于数组使用Array.isArray(). 改造数据 我们先来尝试写一个函数

  • 浅谈Vue的响应式原理

    浅谈Vue的响应式原理

    一.响应式的底层实现 1.Vue与MVVM Vue是一个 MVVM框架,其各层的对应关系如下 View层:在Vue中是绑定dom对象的HTML ViewModel层:在Vue中是实例的vm对象 Model层:在Vue中是data.computed.methods等中的数据 在 Model 层的数据变化时,View层会在ViewModel的作用下,实现自动更新 2.Vue的响应式原理 Vue响应式底层实现方法是 Object.defineProperty() 方法,该方法中存在一个getter和s

  • 通过图带你深入了解vue的响应式原理

    通过图带你深入了解vue的响应式原理

    前言 如果自己去实现数据驱动的模式,如何解决一下几个问题: 通过什么手段去知道我的数据变了? 通过什么东西去同步更新视图? 数据劫持--obvserver 我们需要知道数据的获取和改变,数据劫持是最基础的手段.在Obeserver中,我们可以看到代码如下: Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: function reactiveGetter () { // ... }, set:

  • 一步一步实现Vue的响应式(对象观测)

    平时开发中,Vue的响应式系统让我们不再去操作DOM,只需关心数据逻辑的处理,极大地降低了代码的复杂度.而响应式系统也是Vue的核心,作为开发者有必要了解其实现原理! 简易版 以watch为切入点 watch是平时开发中使用率非常高的功能,其目的是观测一个数据,当数据变化时执行我们预先定义的回调.使用方式如下: { watch: { obj(val, oldVal) { console.log(val, oldVal); } } } 上面观测了Vue实例的obj属性,当其值发生变化时,打印出新值

随机推荐