移动端开发使用rem时动态设置html的字体大小

1、动态设置html的字体大小

移动端开发时习惯使用rem单位，而rem是基于根html的字体大小的，为了适配不同尺寸屏幕需要动态设置html字体的大小。我们一般习惯于设置html的字体大小是基于iPhone6（375px）的100px。100px的取值主要是为了便于后续rem的计算，当然也可以不设置为100px。

2、使用js设置或使用vw设置

方法一（js）：
习惯以iPhone6(375px)为基础，设置字体为100px，其他尺寸根据比例计算，淘宝使用。

var fontSize = document.documentElement.clientWidth / 3.75;
document.doucmentElement.style.fontSize = fontSize + 'px';

方法二（vw）：
vw把屏幕分成100份，屏幕宽度为100vw，同样以iPhone6（375px）为例：1vw代表3.75px，表示100px计算可得100 / 3.75 = 26.666667vw，爱奇艺使用。

html{font-size: 26.666667vw;
}

3、设置body字体大小

众所周知，字体大小是可以被继承传递的，为了避免html的字体大小被继承传递，我们习惯上给body设置自己所需要的字体大小

body{font-size: 16px;
}

如果对你有帮助，可以

移动端开发使用rem时动态设置html的字体大小相关推荐

动态设置html根字体大小（随着设备屏幕的大小而变化，从而实现响应式）
代码如下:如果设置了根字体大小,font-size必须是rem var html =document.querySelector('html');html.style.fontSize = docum ...
动态设置根节点字体大小
<script> function setRem(){ var ui_w=" "; //获取屏幕的宽度 var clieniwdth =document.documen ...
linux终端字体大小6,[adminitrative][archlinux][setfont] 设置console的字体大小
电脑的分辨率高了之后,用命令行进入的时候,完全看不清楚,是否容易导致眼瞎. 第一步便把字体调大就成了很必要的操作. 使用一个命令能马上生效: setfont 使用配置文件 /etc/vconsole. ...
android webview 字体系统字体大小,【转】android webview设置内容的字体大小
Enum for specifying the text size. SMALLEST is 50% SMALLER is 75% NORMAL is 100% LARGER is 150% LARG ...
android textview 字体颜色设置,Android textview 设置不同的字体大小和颜色
在实际应用中,需要将一个字符串已不同的颜色,字体显示出来.当然完全可以通过不同textview拼接出来.也可以通过一个textview来展示. 步骤如下: 1.定义不同style . 不妨如下定义2个 ...
[css] 使用rem布局时怎样合理设置根标签字体大小？
[css] 使用rem布局时怎样合理设置根标签字体大小? UI出2倍稿,然后用js计算当前设备和UI设计稿之间的比例关系,通过resize实时计算根标签字体大小,即可. 个人简介我是歌谣,欢迎和大家 ...
android重新编译res,使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中lt;meta-datagt;变量的值...
你也能够查看我的其它同类文章.也会让你有一定的收货关于使用Gradle来控制版本号和生成不同版本号的代码.我总结了三篇文章,网上关于这些知识,都比較零散.我在学习这些的之前.根本不知道还有这种方法. ...
使用 gradle 在编译时动态设置 Android resValue / BuildConfig / Manifes中lt;meta-datagt;变量的值...
转载请标明出处:http://blog.csdn.net/xx326664162/article/details/49247815 文章出自:薛瑄的博客你也能够查看我的其它同类文章.也会让你有一定的 ...
Android 屏幕适配攻略（四）获取手机屏幕的相关信息与动态设置控件的大小
Android 屏幕适配攻略(四)获取手机屏幕的相关信息与动态设置控件的大小 1 动态获取手机屏幕的屏幕密度与对应像素比例例如在 320 * 480 尺寸为 3.2 英寸的手机 ,对应的像素密度 ...

移动端开发使用rem时动态设置html的字体大小

1、动态设置html的字体大小

2、使用js设置或使用vw设置

3、设置body字体大小

移动端开发使用rem时动态设置html的字体大小相关推荐

最新文章

热门文章