在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关闭端口的方法(445/135/137/138/139/3389等)

    为防止漏洞被利用,需要采取必要措施,关闭以上端口,以保证系统更加安全. window2003 关闭135端口的方法 要关闭此端口,只需停止DCOM接口服务即达到目的.下面是详细操作过程. 1.打开“组 ...

  2. nessus 激活码

    nessus激活码的申请 nessus屏蔽了中国的激活码申请,中国IP申请的时候会直接跳转到购买商业版的页面. 解决方法: 使用IE代理或者VPN,用美国的IP最好,然后访问网址: http://ww ...

  3. LinQ的初步学习与总结

    嘿嘿,说起来ORM和LinQ,就感觉离我好遥远的,在学校是没有学习的,所以总感觉学习了LinQ就是大神,现在嘛,终于也体会一点,感觉LinQ只是初步学习,没有太难,当然以后使用在项目中就没有这样的简单 ...

  4. 为JDK自带的jvisualvm安装Visual GC插件

    1.打开cmd,输入jvisualvm,回车: 2.点击工具——>插件; 3.访问网址:https://visualvm.github.io/pluginscenters.html,找到自己JD ...

  5. open-falcon之judge

    功能 judge 模块主要从transfer中接收数据,并从HBS中获取报警策略,然后进行阈值报警判断 从HBS获取报警策略 接收transfer 上报的数据,并存储最新几个点 判断阈值,产生报警事件 ...

  6. USACO The Clocks

    操作间没有次序关系,同一个操作最多重复3次... 可以直接暴力... The Clocks IOI'94 - Day 2 Consider nine clocks arranged in a 3x3 ...

  7. 【大数据系列】在windows下连接linux 下的hadoop环境进行开发

    一.下载Eclipse并安装 二.下载exlipse的hadoop plugin 三.打开Map Reduce视图 Window --> Perspective --> Open pers ...

  8. 浏览器 User Agent字符串列表

    http://www.73207.com/useragent/ http://www.73207.com/useragent/pages/internet-2520explorer/index.htm ...

  9. Linux 如何开启SFTP

    一.SFTP讲解 SFTP 是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法. SFTP 与 FTP有着几乎一样的语法和功能. ...

  10. Hive学习之数据去重

    insert overwrite table store select t.p_key,t.sort_word from ( select p_key, sort_word , row_number( ...