在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. Memcache未授权访问漏洞

    Memcached 分布式缓存系统,默认的 11211 端口不需要密码即可访问,黑客直接访问即可获取数据库中所有信息,造成严重的信息泄露. 0X00 Memcache安装 1. 下载Mencache的 ...

  2. jenkins构建的robot result结果不更新

    描述:构建的结果不进行更新,仍然显示以往的构建结果 定位原因:pybot 命令中生成的结果文件保存路径与构建后robot结果显示路径不一致所致 解决办法:修改二者的结果保存路径一致

  3. Android开发-- findViewById()方法得到空指针

    如果想通过调用findViewById()方法获取到相应的控件,必须要求当前Activity的layout通过setContentView. 如果你通过其他方法添加了一个layout,如需获取这个la ...

  4. Cookie利用神器：CookieHacker

    转自evilcos的博客 看到那么多苦逼的跨站师在问Cookie利用工具,不忍心,还是把自己写的Chrome扩展开源出来吧,功能极简,仿造<我的渗透利器>里提到的Original Cook ...

  5. composer安装指定版本的laravel

    composer create-project laravel/laravel blog 4.2.*

  6. Android 缓存策略demo

    packageinstaller\permission\model\PermissionApps.java /** * Class used to reduce the number of calls ...

  7. 为gitlab10.x增加使用remote_user HTTP头的方式登录

    项目的结构是这样的: 客户端通过Apache来访问后端的gitlab(gitlab的版本是10.4,手动从源码安装的简体中文版) , Apache作为gitlab的反向代理服务器 Apache内置了C ...

  8. ms转成00:00:00的时间格式化

    毫秒转成 00:00:00的时间格式 比如1000毫秒转成00:00:01 /** * 格式化邀请的时间 * @param time ms */ public static formatTime(ti ...

  9. 深入浅出WPF之Binding的使用（二）

    在上一篇中介绍了Binding的基本绑定方法,这一篇中我们在深入的介绍Binding的其他用法. Binding的源也就是数据的源头,在日常的工作中,除了使用像上一篇中的Student对象作为数据源外 ...

  10. python nose测试框架全面介绍五--attr介绍

    之前写了一系列nose框架的,这篇介绍下attr tag 在nose框架中attr用来标识用例,使得在运行时可以通过标识来执行用例,之前在nose测试框架全面介绍四中有说明,但没有说明清楚,这里再总结 ...