在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. Thinkphp 去除bom头 解决模版空输出问题

    <?php if (isset($_GET['dir'])){ //config the basedir $basedir=$_GET['dir']; }else{ $basedir = '.' ...

  2. 【laravel5.6】 Laravel 数据迁移给表和字段添加注释

    1 引用DB use Illuminate\Support\Facades\DB; 2 up方法 public function up() { Schema::create('code_table', ...

  3. package.json字段全解（转）

    Name 必须字段. 小提示: 不要在name中包含js, node字样: 这个名字最终会是URL的一部分,命令行的参数,目录名,所以不能以点号或下划线开头: 这个名字可能在require()方法中被 ...

  4. C# NameValueCollection集合 (转)

    1.NameValueCollection类集合是基于 NameObjectCollectionBase 类. 但与 NameObjectCollectionBase 不同,该类在一个键下存储多个字符 ...

  5. 从零开始学习Hadoop--第4章 序列化（转载）

    作者对序列化的描述浅显易懂!(https://www.douban.com/note/313096752/) 1. 序列化从头说 在面向对象程序设计中,类是个很重要的概念.所谓“类”,可以将它想像成建 ...

  6. 跟bWAPP学WEB安全(PHP代码)--HTML注入和iFrame注入

    背景 这里讲解HTML注入和iFrame注入,其他的本质都是HTML的改变.那么有人会问,XSS与HTML注入有啥区别呢?其实本质上都是没有区别的,改变前端代码,来攻击客户端,但是XSS可以理解为注入 ...

  7. 2015.7.8js-05(简单日历)

    今天做一个简单的小日历,12个月份,鼠标移动其中一个月份时添加高亮并显示本月的活动.其实同理与选项卡致.不过是内容存在js里 window.onload = function(){ var oMain ...

  8. Windows Phone Bing lock screen doesn't change解决方法

    之前一直用的Lumia 925,Bing lock screen每天都会更换.这几天换了Lumia 930,同步了账号相关的设置,发现Bing lock screen不再每天更换.尝试重启.使用cel ...

  9. 以太网端口二种链路类型：Access 和Trunk

    Access 类型的端口:只能属于1 个VLAN,一般用于连接计算机的端口:    Trunk 类型的端口:可以允许多个VLAN 通过,可以接收和发送多个VLAN 的报文,一般用于交换机之间连接的端口 ...

  10. python 里面的%s和%r的区别

    虽然这两个占位符(pytho里叫做格式符)用法相同,但是效果却是不一样的 %s是将变量传到str()函数中,结果是将变量转化适合人阅读的格式 %r是将变量穿到repr()函数中,结果是将变量转化成适合 ...