在index.html中

<style>
@media all and (min-width: 0px) {
html{font-size: 20px;}/* 12*4.6 */
}
@media all and (min-width: 640px) {
html{font-size: 50px;}/* 14*4.6 */
}
@media all and (min-width: 768px) {
html{font-size: 53px;}/* 16*4.2 */
}
@media all and (min-width: 800px) {
html{font-size: 53px;}/* 16*4.2 */
}
@media all and (min-width: 1024px) {
html{font-size: 65px;}/* 18 *4.6*/
}
@media all and (min-width: 1100px) {
html{font-size: 65px;}/* 20 *4.6 */
}
@media all and (min-width: 1280px) {
html{font-size: 82px;}/* 22 *3.03*/
}
@media all and (min-width: 1366px) {
html{font-size: 83px;}/* 24 */
}
@media all and (min-width: 1440px) {
html{font-size: 83px;}/* 25 */
}
@media all and (min-width: 1680px) {
html{font-size: 87px;/* 28 */
}
@media all and (min-width: 1920px) {
html{font-size:100px;}/* 33 */
}
</style>

vue中 用媒体查询 空置根节点字体大小的更多相关文章

  1. 彻底弄懂设置根元素字体大小calc(100vw/18.75) 实现rem自适应

    rem 是相对文档根元素(html)字体大小的尺寸单位,当元素的尺寸或文字字号等使用 rem 单位时,会随着根元素的 font-size 变化而变化,那么在不同分辨率的设备下动态设置根元素的字体大小就 ...

  2. Bulma 中的媒体查询

    在 Bulma 中将设备分为 6 类:手机.平板.触屏设备.桌面.宽屏和大屏.提供了四个阈值. // sass/utilities/variables.sass $tablet: 769px !def ...

  3. vue中element-ui树形控件自定义节点,注意一下

    在项目中用到菜单项编辑删除,在 element-ui自定义节点内容时, 有说明:使用render-content指定渲染函数, 得环境支持 JSX 语法,只要正确地配置了相关依赖,就可以正常运行. 一 ...

  4. js媒体查询设置根字号

    !function(n){var e=n.document,t=e.documentElement,i=750,d=i/50,o="orientationchange"in n?& ...

  5. 在javascript中使用媒体查询media query

    由于需要,我们可能会在js中用到一些media query,从而针对不同的分辨率做一些操作. //全兼容的 事件绑定 and 阻止默认事件 var EventUtil = { //Notice: ty ...

  6. vue中如何让多个echarts随屏幕大小变化

    在vue项目中使用Echarts  一般window.onsize在页面中只能存在一个. 如何在一个页面中多个echarts使用window.onresize?    myChart 可以放在Data ...

  7. eclipse中android开发怎么修改xml文件字体大小

    windows->preference->General->appearence->Colors and Font->Basic->Text Font.点击右侧的E ...

  8. bootstrap媒体查询

    Bootstrap 中的媒体查询允许您基于视口大小移动.显示并隐藏内容.下面的媒体查询在 LESS 文件中使用,用来创建 Bootstrap 网格系统中的关键的分界点阈值. /* 超小设备(手机,小于 ...

  9. Bootstrap 网格系统(Grid System)的工作原理 - 媒体查询

    媒体查询 媒体查询是非常别致的"有条件的 CSS 规则".它只适用于一些基于某些规定条件的 CSS.如果满足那些条件,则应用相应的样式. Bootstrap 中的媒体查询允许您基于 ...

随机推荐

  1. [Cubieboard] 在 Cubieboard 上安装 Node.js 和 npm

    你有两个选择可以实现在Cubieboard上安装NodeJS,下载别人已经编译完成适用于Cubieboard的NodeJS二进制包,或者自己下载源码自行在Cubieboard上进行编译. 使用编译完成 ...

  2. 关于MFLAGS与MAKEFLAGS

    与子make通讯的选项 诸如‘-s’和‘-k’标志通过变量MAKEFLAGS自动传递给子make.该变量由make自动建立,并包含make收到的标志字母.所以,如果您是用‘make –ks’变量MAK ...

  3. Linux虚拟机下mysql 5.7安装配置方法图文教程

    一. 下载mysql5.7 http://mirrors.sohu.com/mysql/MySQL-5.7/ Linux下载: 输入命令:wget http://mirrors.sohu.com/my ...

  4. hadoop完全分布式搭建HA(高可用)

    2018年03月25日 16:25:26 D调的Stanley 阅读数:2725 标签: hadoop HAssh免密登录hdfs HA配置hadoop完全分布式搭建zookeeper 配置 更多 个 ...

  5. GNU Readline库函数的应用示例

    说明 GNU Readline是一个跨平台开源程序库,提供交互式的文本编辑功能.应用程序借助该库函数,允许用户编辑键入的命令行,并提供自动补全和命令历史等功能.Bash(Bourne Again Sh ...

  6. 【十大算法实现之KNN】KNN算法实例(含测试数据和源码)

    KNN算法基本的思路是比较好理解的,今天根据它的特点写了一个实例,我会把所有的数据和代码都写在下面供大家参考,不足之处,请指正.谢谢! update:工程代码全部在本页面中,测试数据已丢失,建议去UC ...

  7. windows下使用git管理代码,其中出现的问题的解决办法

    和朋友共同开发一个小项目,所以就涉及到了代码管理这块,刚开始想到的是使用svn,但是外网访问svn的时候需要使用花生壳来弄一个动态的域名,中间出了很多错误,感觉有点麻烦,所以就想到看看还有别的管理代码 ...

  8. cookie设置在特定时间点过期的方法

    假设需求为:在当天晚上0:00过期. 方法: 得到当天晚上0:00这个时间点的一个时间. function getNextDate(){        var d = new Date(),      ...

  9. Oracle 12C 创建用户连接pdb

    测试环境: C:\ora12c\product\12.1.0\dbhome_1\BIN>sqlplus.exe /nolog SQL*Plus: Release 12.1.0.1.0 Produ ...

  10. git服务器

    1 关于版本控制版本控制是一种记录一个或若干文件内容变化,以便将来查阅特定版本修订情况的系统.有以下三种版本控制系统:1. 本地版本控制系统许多人习惯用复制整个项目目录的方式来保存不同的版本,或许还会 ...