html5纯css字体大小自适应设置
css 字体大小自适应样式设置篇
字体可以设置大小使用css font-size来实现,有时需要对字体大小根据浏览器分辨率来判断后自适应大小。
在CSS 2.0中字体大小自适应是难实现的,一般使用JS来实现,这里就不必说了。
现在字体大小自适应样式常常使用在IE10、谷歌浏览器、较新手机、平板平台上(安卓、ios),可以使用CSS3.0来实现。但是依然是使用font-size字体大小样式来设置,只不过值在CSS3版本中新增了自适应百分比大小值。
css3提供了一些与当前viewpoint相关的元素,vw,vh,vim等。
“viewpoint” = window size
15vw = 15% 设置width(可以理解为宽度单位)
15vh = 15% 设置height(可以理解高度单位)
此CSS 3单位兼容性:chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+
具体示例代码如下:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>文字大小自适应实例</title>
<style>
#fontset{font-size:5vw;}
</style>
</head>
<body>
<div id="fontset">
文本字体大小为5vw
</div>
</body>
</html>
html5纯css字体大小自适应设置相关推荐
- html的font字号1-7,CSS 字体大小font-size设置
CSS font-size字体文字大小样式属性-字体大小样式篇: 本节DIVCSS7为大家介绍通过CSS样式设置文字字体大小知识,涉及CSS样式单词font-size. 一.设置字体大小CSS单词与语 ...
- 关于rem移动端 html字体大小自适应设置的问题
rem是个单位,单位大小由它第一代祖先font-size的大小决定rem的大小. 了解字体大小的同时我们要知道像素是什么东西. 像素是屏幕的组成元素,我们看到屏幕上的内容都是由一个个小颗粒构成的,而这 ...
- css设置字体大小会受分辨影响吗,CSS字体大小设置时的参考(转)
font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们是浏览器预定义设置的.给元素指定了绝对关键字font-size的时候,该元素就不会继承父元素的字体大小 font-s ...
- 字体大小自适应屏幕分辨率 CSS解决方案
字体大小自适应屏幕分辨率 CSS解决方案 参考文章: (1)字体大小自适应屏幕分辨率 CSS解决方案 (2)https://www.cnblogs.com/love0618/p/4020752.htm ...
- HTML设置字体大小自适应屏幕与echarts图表颜色根据数据大小实时刷新图表颜色
设置html文字大小根据页面大小自适应,在使用rem之前是使用的px和百分比,后来发现页面缩放或在小屏幕的电脑显示不尽人意,后改用rem,写法如:font-size: .21rem;或font-siz ...
- pyqt5标签中的字设置不同字体_PyQt5 实现字体大小自适应分辨率的方法
最近遇到一个现象,将做好的软件放在更高分辨率的电脑上运行,会导致字体显示不完全,出现被控件遮挡的情况.具体原因可以上网查询,在这里将记录下解决方法. 这里记录两种方法,如果使用的Qt版本在5.6.0之 ...
- js设置字体大小自适应屏幕分辨率
js可以通过 screen.width获取屏幕分辨率的大小. var conf_div = document.createElement('div'); //创建div conf_div.style. ...
- HTML5纯css实现爱心动画效果DW、vscode来自程序员的浪漫表白
HTML5纯css实现爱心动画效果DW来自程序员的浪漫表白 一.拉面版 css部分 *{/* 初始化页面元素内外边距*/margin:0;padding: 0;}body{/* 弹性布局元素垂直水平居 ...
- 使用阿里云的oss对图片加水印并且字体大小自适应(阿里云oss暂不支持字体大小自适应)
使用阿里云的oss对图片加水印并且字体大小自适应(阿里云oss暂不支持字体大小自适应) 背景: 首先阿里云oss云对象存储是不能做到字体大小自适应的,因为在开发中我们的图片上传的尺寸是做不到固定大小宽 ...
最新文章
- 相机自动对焦AF原理
- 2018-3-12论文(非结构网络中有价值信息数据挖掘)笔记二-----作者:关联规则的非结构网络有价值信息数据挖掘(看不懂,看不懂)
- cocos2dx 自学记录(4)-- 写一个自己的界面
- 【控制】《现代控制理论》谢克明老师-第2章-线性控制系统状态空间表达式的求解
- 【noi 2.6_9284】盒子与小球之二(DP)
- Java 关系运算符
- linux ls 配色方案,ubuntu 更改ls配色方案
- 三维重建PCL:点云单侧面正射投影
- 初学JavaWeb,前端css要不要了解一下啊?一文学会JavaWeb中css的简单应用
- linux c 内存elf,gcc加入linux ELF有什么功能?
- 思维导图_教学工具思维导图
- centos开机自动挂载磁盘_3分钟教你看懂linux磁盘划分
- 2019年中国研究生数学建模大赛的经验分享
- 关于matlab的erf与erfc
- PX4-小型固定翼滑跑起飞问题分析
- Installing vipm-17.0.2018-linux
- 论文阅读笔记《REDE: End-to-End Object 6D Pose Robust Estimation Using Differentiable Outliers Elimination》
- SDRAM DQM的解释,总算明白了
- Redis 的高并发实战:抢购系统 --浅奕
- 开放性:你可能没听说过的终极大挑战(开放性既是驱动探索智能的力量之一,也可能直接就是AI本身的组成部分)
热门文章
- 一个BT下载工具推荐下
- 【hive报错】SemanticException Failed to breakup Windowing invocations into Groups
- java returning_JAVA中使用PostgreSQL的RETURNING语句来实现插入时快速获取insert id
- 惩戒教育也是“爱的艺术”[图]
- 阿里OCR身份证识别相关信息
- AIGC风起,快看能否走出“水逆周期”?
- 拿捏SQL数据分析:从基础破冰到面试题解
- Perl进程——exec system qx//
- 快手did设备注册,快手sig签名(sign解决,操作太快了,请稍微休息一下)
- 恒源云(GPUSHARE)_GPU服务器租用 | Spyder连接使用教程