Rem 字体设置学习

(2)JS方法动态计算根元素的字体大小: 【淘宝首页:m.taobao.com】

(function (doc, win) {

     var docEl = doc.documentElement,
          resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
          recalc    = function () {
                 var clientWidth = docEl.clientWidth;
                 if (!clientWidth) return;
               docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px‘;
          };
          if (!doc.addEventListener) return;
          win.addEventListener(resizeEvt, recalc, false);
          doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

然后根据设计稿比如尺寸是640尺寸 就 rem = 设计稿的字体大小 / 100

16px —> 0.16rem

时间: 2024-09-30 13:14:10

Rem 字体设置学习的相关文章

关于pc端rem字体设置的问题。

1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.此时BODY的FONT-SIZE设置为正常值,12PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大. 3.当浏览器窗口变化时,内容的大小

SecureCRT学习之道:SecureCRT常用快捷键设置与字体设置方法

常用快捷键: 全屏View->Full Screen 快捷键 Alt + Enter 菜单View 快捷键 Alt + V 打开新的终端 快捷键 Alt + B 字体设置: options->global options->general->Default session-> Edit Defalut Settings 网上有人建议用fixedsys,这个字体虽然不是最美丽的,但在终端上也是一个不错选择,大家都可以接受. 选择它,主要是因为它大小固定,在所有地方显示,效果都一

CFileDialog(文件夹对话框类)和CFontDialog(字体设置对话框类)的使用学习

CFileDialog(文件夹对话框类) 主要用于文件的保存,另存,打开,关闭等功能 功能“另存为”的实现: 1 void CTXTDlg::OnFileSaveas() 2 { 3 LPCTSTR szFilter = "文本文件(*.txt)|*.txt|所有文件(*.*)|*.*||"; //过滤器设置,注意格式 4 CFileDialog fd(FALSE,"txt",NULL,OFN_OVERWRITEPROMPT|OFN_PATHMUSTEXIST| /

SecureCRT学习之道:SecureCRT经常使用快捷键设置与字体设置方法

1:假设不想每次登陆都输入password,能够在你打开的session里邮件session option->login action 选中automate logon 双击ogin 和assword分别输入username和password即可了,telnet的命令符为〉,敲入指令的命令符为# 2:假设在global option->terminal->emulation->mapped keys勾选CUA setting就会导致Linux命令下快捷键ctrl+C失效,假设勾选就

移动页面100%自适应,媒体查询 - REM单位字体设置

/* 媒体查询 - 字体设置 */ /* 平滑过渡 */ html{ -webkit-transition: font-size .2s ease-out; transition: font-size .2s ease-out; } /* 设计稿宽度=640时, 4rem=400px, 1rem=100px, .5rem = 50px, .1rem = 10px 以此类推 */ @media screen and (max-width: 1280px) { html{ font-size: 20

Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

目录 一.概述 二.效果展示 三.定制表头 1.重写数据源 2.重写QHeaderView 四.设置属性 五.相关文章 原文链接:Qt实现表格控件-支持多级列表头.多级行表头.单元格合并.字体设置等 一.概述 最近在研究QTableView支持多级表头的事情,百度了下网上资料还是挺多的.实现的方式总的来说有2种,效果都还不错,最主要是搞懂其中的原理,做到以不变应万变. 实现多级表头的方式有以下两种方案 行表头和列表头都是用一个表格去模拟 重写QHeadView 以上两种方式都可以实现多级表头,各

Emacs Org-mode中英文字体设置

Emacs Org-mode中英文字体设置 Table of Contents 1. 缺省字体存在的问题 2. 解决方法 2.1. 环境说明 2.2. 思路和方法 2.3. emacs设置代码 2.4. 显示效果 1 缺省字体存在的问题 一直在找一款能随心所欲记笔记的软件,近期发现了Org-mode,试用之后感觉确实非常好用. 不过,org-mode缺省字体在绘制表格时存在一个问题:因为中英文字体宽度不同,表格无法对齐.如下图所示: 2 解决方法 2.1 环境说明 本机环境为Mac OS X.E

secureCRT简单设置(学习笔记二)

菜鸟记录. 一.更改终端类型 选项-全局选项-默认会话-编辑默认设置-终端-仿真-右侧选择类型,下方设置缓冲区大小 二.设置字体和外观 上方窗口外观-右侧设置-字体设置字体类型大小,下面光标可以设置光标类型,颜色 三.日志文件设置 选择日志-根据下方的提示设置日志名称,也可以使用默认-下设置为:会话名称+年+月+日.log 四.上传下载设置 选择X/Y/Zmodem 安装上传下载软件 不提示直接安装yum install lrzsz -y 上传用rz 会弹出选择文件窗口会上传到登录过程中的当前目

Ubuntu字体设置

Ubuntu所带的字体不是很好看,比较模糊,现修改为微软雅黑 Win7安装分区下的 \windows\fonts\文件夹下,复制msyh.ttf和msyhhd.ttf到/home/m/msfonts文件夹下(m为我的用户名). 第一种方法: 如果只想添加到当前用户下,拷贝到/home/m/.fonts目录下,重启x即可. 第二种方法: 将字体放入字体文件夹 sudo sumkdir /usr/share/fonts/msfontscd /usr/share/fonts/msfontscp /ho