css字体适配rem 根据屏幕大小变换字体大小

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>css适配</title><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1"><style type="text/css">body{margin: 0 ;padding: 0;font-size: 0.32rem;/*0.32*50px(320屏幕宽度下html是50px)是16px0.32*50px(414屏幕宽度下html是64.68px)是20px0.32*50px(768屏幕宽度下html是120px)是38px*/}div{width: 3.2rem;height: 3.2rem ;background: red;}</style><script type="text/javascript">document.documentElement.style.fontSize = document.documentElement.clientWidth / 640 * 100 + 'px';</script></head><body><div><span class="demo">测试</span></div></body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">$(function(){var font=$(".demo").css('font-size'); console.log("字体大小:",font);});
</script>
</html>

转载地址：https://www.cnblogs.com/dannyxie/p/6640903.html

css字体适配rem 根据屏幕大小变换字体大小相关推荐

Android 屏幕适配（修改系统字体大小、显示大小、修改分辨率相关适配）
Android实际开发中会遇到各种各样的机型,所以就需要对多种机型进行适配.常见的适配在这类就不详细介绍了,大家可以参考这里的系列文章Android通用屏幕适配讲解的已经很详细了.下面说的是:当修改系 ...
js 适配手机端屏幕字体大小
通过js控制页面大小,字体大小 function setRootFontSize() {var width = document.documentElement.clientWidth,fontSiz ...
【适配】521- 移动端开发各种兼容适配问题（屏幕、图像、字体与布局等）
来源 | https://www.cnblogs.com/coco1s/p/11463599.html 本文是内部的一次分享沉淀,偏向基础但是涉及了一些有意思的细节,文笔有限,才疏学浅,文中若有不正之 ...
多种方法解决rem字体适配
rem单位 ·rem(root em)相对单位类似于em,em相对于是父元素的字体大小 ·rem的基准是相对于html的字体大小(root根,document的根元素是html) ·rem的优点:通 ...
通过js适配不同的屏幕大小
// 通过js适配不同的屏幕大小 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationcha ...
css文字大小fontsize,字体大小：font-size - CSS | 绿叶学习网
在CSS中,我们可以使用font-size属性来定义字体大小. 语法: font-size: 像素值; 说明: 实际上,font-size属性取值有两种:一种是"关键字",如sma ...
android ui适配大字体,Android UI总结 Android 和H5 字体大小适配
1.Android字体 1. 像素:像素(pixel)为图像的基本单位,是一个抽象的采样.一般作为一个最小的显示单位内置RGB. 2.屏幕尺寸:指屏幕的物理尺寸,一般用屏幕的对角线长度表示 3.宽高比 ...
css屏幕大小的容器,位置2箭头固定到CSS页面容器的外部 - 屏幕大小
我想创建一个HTML页面滑块,所以我有我的容器div,然后坐在外面,在左边我有一个Previous图标和右侧我有一个下一个图标.位置2箭头固定到CSS页面容器的外部 - 屏幕大小我的问题是,当我将窗 ...
html自动适应屏幕分辨率,css如何设置适配不同分辨率屏幕？
css如何设置适配不同分辨率屏幕?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css如何设置适配不同分辨率屏幕? 在使用div+css网页布局时,可以 ...

css字体适配rem 根据屏幕大小变换字体大小

css字体适配rem 根据屏幕大小变换字体大小相关推荐

最新文章

热门文章