在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. 【权限维持】window服务端常见后门技术

    0x00 前言 未知攻焉知防,攻击者在获取服务器权限后,通常会用一些后门技术来维持服务器权限,服务器一旦被植入后门,攻击者如入无人之境.这里整理一些window服务端常见的后门技术,了解攻击者的常见后 ...

  2. cannot access android.support.v4.app.BaseFragmentActivityJB的解决

    //implementation 'com.android.support:appcompat-v7:26.1.0' 改成implementation 'com.android.support:app ...

  3. codeforces水题100道 第六题 Yandex.Algorithm 2011 Qualification 2 A. Double Cola (math)

    题目链接:www.codeforces.com/problemset/problem/82/A题意:五个人排队喝可乐,一个人喝完一杯,就在可乐的最后面放两杯自己喝的可乐,问第n个喝的人是谁.C++代码 ...

  4. JS - 点击事件排除父级标签

    点击事件排除父级标签,这里使用的是stopPropagation()方法.event.stopPropagation(); 对了,这里还用了解除click事件,unbind. 下面这篇博文,介绍挺全的 ...

  5. Qt编写带频谱的音乐播放器

    之前有个项目需要将音频文件的频谱显示出来,想了很多办法,后面发现fmod这个好东西,还是跨平台的,就一个头文件+一个库文件就行,简单小巧功能强大,人家做的真牛逼.为了不卡住界面,采用了多线程处理. 可 ...

  6. HTTP协议详解(真的很经典)(转载)

    HTTP协议详解(真的很经典):http://www.cnblogs.com/li0803/archive/2008/11/03/1324746.html 引言 HTTP是一个属于应用层的面向对象的协 ...

  7. POJ 3258 River Hopscotch(二分答案)

    River Hopscotch Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 21939 Accepted: 9081 Desc ...

  8. “找女神要QQ号码”——java篇

    题目就是这样的: 给了一串数字(不是QQ号码),根据下面规则可以找出QQ号码: 首先删除第一个数,紧接着将第二个数放到这串数字的末尾,再将第三个数删除,并将第四个数放到这串数字的末尾...... 如此 ...

  9. squid白名单

    http_access deny all #取消注释 http_access allow all --> http_access allow xxx_custom_ip #添加系统服务器IP白名 ...

  10. 《modern-php》 - 阅读笔记 - 最佳实践

    过滤.验证和转义数据 过滤数据 不要相信任何外部数据! 常见的有以下几种数据需要过滤:HTML,SQL查询,用户提交的信息(邮件地址.电话号码.身份证) HTML htmlentities() HTM ...