博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
rem、em、px、pt及网站字体大小设配
阅读量:4649 次
发布时间:2019-06-09

本文共 1247 字,大约阅读时间需要 4 分钟。


  • rem:相对的只是HTML根元素字体尺寸;
  • em:相对于当前对象内文本的字体尺寸(值不是固定且继承父级元素的字体大小);
  • px像素(Pixel):对于显示器屏幕分辨率而言的;
  • pt:point,是印刷行业常用单位,等于1/72英寸100%=100pt。
  • %:类似em。

使用 rem 实现 适配各种屏幕布局

方法一:用JS来动态的设置html的font-size:

(function (doc, win) {/*初始化 默认宽度、字体、最小最大比例*/    var init_w = 640,    init_fs = 10,    max_scale = 1,    min_scale = 0.5;    var docEl = doc.documentElement,    resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,    recalc = function () {        var clientWidth = docEl.clientWidth;        if (!clientWidth) return;        var percentage = clientWidth / init_w;        percentage = percentage > max_scale?max_scale: percentage 

另外一种利用css3中的 媒体查询来根据不同的屏幕大小来写定html的font-size:

html {font-size : 10px;}@media only screen and (min-width: 401px){html {font-size: 6px !important;}}@media only screen and (min-width: 428px){html {font-size: 6.5px !important;}}@media only screen and (min-width: 481px){html {font-size: 7.25px !important; }}@media only screen and (min-width: 569px){html {font-size: 8.625px !important; }}@media only screen and (min-width: 641px){html {font-size: 10px !important; }}

注意:

谷歌下css设置字体最小为12px,所以HTML根元素font-size字体尺寸基数尽量大:25px 40px 50px 75px 100px

字体10px


纯属个人观点,仅供参考!

转载于:https://www.cnblogs.com/yancongyang/p/6198026.html

你可能感兴趣的文章
chkconfig
查看>>
2.抽取代码(BaseActivity)
查看>>
夏天过去了, 姥爷推荐几套来自smashingmagzine的超棒秋天主题壁纸
查看>>
反射的所有api
查看>>
css 定位及遮罩层小技巧
查看>>
项目中非常有用并且常见的ES6语法
查看>>
[2017.02.23] Java8 函数式编程
查看>>
sprintf 和strcpy 的差别
查看>>
JS中window.event事件使用详解
查看>>
ES6深入学习记录(一)class方法相关
查看>>
C语言对mysql数据库的操作
查看>>
INNO SETUP 获得命令行参数
查看>>
clientcontainerThrift Types
查看>>
链接全局变量再说BSS段的清理
查看>>
HTML5与CSS3权威指南之CSS3学习记录
查看>>
docker安装部署
查看>>
AVL树、splay树(伸展树)和红黑树比较
查看>>
多媒体音量条显示异常跳动
查看>>
运算符及题目(2017.1.8)
查看>>
React接入Sentry.js
查看>>